In modern JavaScript Frameworks, we quickly realize that a user interface are becomming component-driven. By splitting interfaces into components provides better code reuse and improve code sharing in projectes with similar needs.
This approach brought by frameworks is now the backbone of frontend development, making web development overall more approachable and less overwhelming. Now we have powerful frameworks like React JS, Vue JS, Svelte, and Solid JS, all of which came with huge improvements on the development experience, providing many useful tools for developers to build these components.
A framework like Vue gives us the ability to write reusable code in SFC (Single File Components), and the opportunity to document it via props, events, and code comments. However, we might still feel the lack of a more accessible way to provide solid documentation for our components during the development process.
This is where Storybook comes in. Storybook is a workshop that allows us to isolate your UI components and work on them without the need to link the business logic of the app just to see how they will be renderred. This helps us to focus on the UI components for each of the variations you may need them to be.
What is Storybook?
Storybook is an open source tool that helps you isolate your components while granting you the capacity to “play” with them. Storybook lets us interactively develop and test user interface components without having to run an application. Because Storybook acts as a component library with its own Webpack configuration, we can develop in isolation without worrying about project dependencies and requirements.
Storybook will boost your overall code maintainability by making your components show up like separate entities ready to be tested and integrated with others.
Prerequisites
Before we dive into the setup process, make sure you have Node.js installed on your system. You can download and install Node.js from the official website: Node.js Website
Create a Vue 3 Project
Let's kick things off by creating a new Vue 3 project with Vite. Open your terminal and run the following commands:
npm init vite@latest my-vue-storybook
Follow the prompts to configure your project. Once the project is created, navigate into the project directory:
cd my-vue-storybook
Install Storybook
Now that we have our Vue project set up, let's install Storybook. Run the following command in your terminal:
npx sb init
The command above will install Storybook with its dependencies, configure Storybook’s instance, and add some boilerplate code to guide you.
In src/stories directory, you’ll find code added by Storybook. Stories are the files with the xxx.stories.js extension and the other files are samples to your project’s files. Storybook provides them as a means of guidance on how to write stories for your Vue components.
Configure Storybook for Vue 3
By default, Storybook is configured for the project. To use it with Vue 3, we need to make a few adjustments. Open the .storybook/main.js file in your project and modify it as follows:
const config = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx|vue)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@chromatic-com/storybook",
"@storybook/addon-interactions",
],
framework: {
name: "@storybook/vue3-vite",
options: {},
},
docs: {
autodocs: "tag",
},
};
export default config;
This configuration ensures that Storybook uses Vue 3 for rendering components.
Run Storybook
With your stories in place, it's time to run Storybook. In your terminal, run the following command:
npm run storybook
This command starts the Storybook development server and automatically open in a new browser tab to http://localhost:6006
Write Your First Story
Now it's time to create our first story. Stories are files that showcase individual components. Create a new file in the src/components directory with a .stories.js extension. For example, Button.stories.js. Here's an example of how you can define a story:
import Button from './Button.vue';
export default {
title: 'Button',
component: Button,
argTypes: {
size: {
control: { type: "select" },
options: ["small", "medium", "large"],
},
backgroundColor: { control: "color" },
},
};
const Template = (args) => ({
components: { Button },
setup() {
return { args };
},
template: '<Button v-bind="args" />',
});
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Button',
};
export const Small = Template.bind({});
Small.args = {
primary: true,
label: 'Button',
size:'small',
};
export const Medium = Template.bind({});
Medium.args = {
primary: true,
label: 'Button',
size:'medium',
};
export const Large = Template.bind({});
Large.args = {
primary: true,
label: 'Button',
size:'large'
};
Conclusion
We have successfully set up Storybook with Vue 3 using Vite, enhancing our component development workflow. Storybook provides a powerful environment for developing and testing UI components in isolation, while Vite offers lightning-fast build times. Experiment with different stories, explore Storybook's features, and enjoy a more efficient VueJS component development experience.
Please feel free to provide feedback 😊. I will try my best to generate such blog in future as well 🤗.
Happy coding!
