Vue 3 Development: Complete Storybook Setup with Vite

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:

/** @type { import('@storybook/vue3-vite').StorybookConfig } */
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 // or yarn 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:

// button.stories.js
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 used in your story `template` are defined in the `components` object
  components: { Button },
// The story's `args` need to be mapped into the template through the `setup()` method
  setup() {
    return { args };
  },
// And then the `args` are bound to your component with `v-bind="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!

Storybook Setup with Vue 3