Practical Tutorial: Configuring Storybook 8 in Your Nuxt 3 Project

In this tutorial, you'll learn how to integrate Storybook into your existing Nuxt project for efficient UI development. Storybook allows you to build, test, and document individual components in isolation, making it an invaluable tool for frontend developers.

Step 1: Install Storybook in Your Nuxt Project

Start by initiating Storybook in your Nuxt project. Open your terminal and run the following command:

npx storybook-nuxt init

This command will set up Storybook in your project and generate a main.js configuration file.

Step 2: Configure Storybook

Open the generated main.js file. This file contains the configuration for your Storybook instance. Here's what it looks like:

import type { StorybookConfig } from "@storybook-vue/nuxt";

const config: StorybookConfig = {
  stories: [
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook-vue/nuxt",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};

export default config;

You can customize this configuration based on your project's requirements. For example, you can specify additional directories for Storybook to look for stories or include extra addons to enhance functionality.

Step 3: Organize Your Components

Next, organize your Nuxt components and create stories for them. Place your components in the appropriate directories and create .stories.js files for each component to showcase different states and props.

Step 4: Run Storybook

Once you've configured your components and stories, it's time to run Storybook. In your terminal, navigate to your project directory and run the following command:

pnpm storybook dev

This command will start the Storybook server, and you'll be able to view your components and stories in the browser.

Step 5: Develop, Test, and Document

With Storybook up and running, you can now develop, test, and document your components with ease. Use Storybook's hot module replacement (HMR) for real-time updates, test your components for different scenarios, and document them for future reference.

Step 6: Additional Considerations

If your Nuxt project includes page routing or server-side components like NuxtImage, you may encounter issues when running Storybook alone. In such cases, it's recommended to run your Nuxt app using the following command:

npx nuxi dev

Or simply:

pnpm dev

This will ensure that all aspects of your Nuxt project, including routing and server-side components, are properly handled during development.

Conclusion

Congratulations! You've successfully integrated Storybook into your Nuxt project and learned how to configure, organize, and utilize it for efficient UI development. Storybook will undoubtedly streamline your development workflow and help you build high-quality UI components with confidence.

Tutorial source:

• Part 1: generated files after npx nuxi init https://github.com/chakAs3/storybook-nuxt-tuto-2/tree/3e0f19be22038c14279f68f986e00f9181719827
• Part 2: generated files after npx storybook-nuxt init https://github.com/chakAs3/storybook-nuxt-tuto-2/tree/39fb3124ae3618e4830deb1d64296f7012fba216