DEV Community: Chakir QATAB

Configuring Storybook in Your Nuxt Project

Chakir QATAB — Fri, 29 Mar 2024 13:34:01 +0000

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

Tutorial: Storybook with Vuetify in Nuxt App

Chakir QATAB — Sun, 08 Oct 2023 03:31:21 +0000

Introduction

Now that there’s an official package and module from the Storybook team, setting up a Nuxt project with Storybook has become easier than ever. In this tutorial, we’ll guide you through the process of using Storybook in your Nuxt application while showcasing Vuetify as the UI library. By the end of this guide, you’ll have a solid foundation for incorporating Storybook into your Nuxt project and harnessing its benefits.

Prerequisites

Before you begin, make sure you meet the following prerequisites:

Basic Knowledge of Nuxt: Familiarity with Nuxt, including creating and managing Nuxt projects, components, and routes.
Basic Knowledge of Storybook: While not mandatory, a fundamental understanding of what Storybook is and how it works is beneficial. Storybook is a tool for developing and documenting UI components in isolation.
Node.js and pnpm Installed: Ensure that you have Node.js and pnpm (Package Node Manager) installed on your machine.
Nuxt Project Set Up: You should have a Nuxt project ready to go. If not, you can quickly initialize one using the following commands
Create a new Nuxt project

pnpm dlx nuxi@latest init <project-name>

Navigate to the project directory and initialize Storybook

cd <project-name>
npx storybook-nuxt init

These commands will set up both your Nuxt project and Storybook.

Install Vuetify and Nuxt Vuetify Plugin: To add Vuetify to your Nuxt project, run the following command:

pnpm add @invictus.codes/nuxt-vuetify vuetify

Familiarity with Vuetify: A basic understanding of Vuetify, a popular Vue framework for building UIs. This includes knowing how to use Vuetify components and work with its theming system.

make sure before starting that you have right versions
vuetify:3.3.17 , nuxt:3.6.5, storybook:7.4.4

Creating Your First Story

With Storybook and Vuetify integrated into your project, it’s time to create your first Storybook story for a Vuetify component. Stories are isolated instances of your components, allowing you to showcase and test them independently.

Step 1: Create the stories Folder
In your project directory, create a stories folder if it doesn’t exist
Step 2: Define Your Story
Inside the stories folder, create a Vuetify.stories.ts file and add the following content:

import type { Meta, StoryObj } from '@storybook/vue3'
import Vuetify from '~/components/vuetify.vue'
const meta = {
title: 'Plugins/Vuetify ',
component: Vuetify,
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
tags: ['autodocs'],
} as Meta<typeof Vuetify>
export default meta
type Story = StoryObj<typeof meta>
export const Primary: Story = {
args: { message: 'Hello World' },
}

Step 3: Create the vuetify.vue Component In your components directory, create a vuetify.vue file and add the following content. This component uses Vuetify UI elements:

<script setup>
defineProps({
  message: String,
});
</script>

<template>
  <v-container>
    <v-row>
      <v-col>
        <v-sheet
          class="pa-4 d-flex align-center flex-column"
          color="grey-lighten-3"
          rounded="lg"
        >
          <div>
            <v-icon color="orange" icon="mdi-fire" />
            @invictus.codes/nuxt-vuetify by
            <a href="https://invictus.codes">
              invictus.codes &nbsp;<v-icon icon="mdi-home" size="12" />
            </a>
          </div>
        </v-sheet>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <v-sheet class="pa-4 d-flex align-center flex-column">
          Storybook <v-icon color="pink" icon="mdi-heart" /> Nuxt
        </v-sheet>
      </v-col>
      <v-col>
        <v-sheet class="pa-4 d-flex justify-space-between flex-row">
          Storybook <v-icon color="pink" icon="mdi-heart" /> Nuxt
        </v-sheet>
      </v-col>
      <v-col>
        <v-sheet class="pa-4 d-flex align-center flex-column">
          Storybook <v-icon color="pink" icon="mdi-heart" /> Nuxt
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>

Step 4: View Your Storybook:

Run the following command to start your Storybook development server:

pnpm run storybook

Your Storybook should now be available at http://localhost:6006. Open your web browser and navigate to this URL to see your Storybook in action.

Conclusion

In this tutorial, you’ve learned how to set up Storybook with Vuetify in your Nuxt application. This powerful combination allows you to streamline UI component development, testing, and documentation. With Storybook, you can create a robust design system for your project, making it easier to maintain and collaborate on your Vue applications.
Now that you’ve taken the first steps into the world of Storybook, feel free to explore its extensive documentation and continue building beautiful and reusable UI components for your Nuxt projects.

here is final project for this tutorial

More links:

Storybook Nuxt docs.
Storybook Nuxt Framework github repository.

Storybook Module for Nuxt Framework

Chakir QATAB — Sat, 07 Oct 2023 21:55:27 +0000

Introduction

If you're a developer working with Nuxt Framework, you know how crucial it is to maintain a clean and organized codebase while building beautiful user interfaces. However, one common challenge faced by many Nuxt developers is the integration of Storybook, a powerful tool for developing UI components in isolation. In this blog post, we're excited to introduce the new Storybook Nuxt module and provide you with a technical explanation of how it can simplify the integration process and supercharge your Nuxt-based projects.

The Challenge: Integrating Storybook with Nuxt

Before we dive into the solution, let's briefly discuss the challenges developers face when integrating Storybook with Nuxt:

Complex Configuration: Historically, integrating Storybook with Nuxt has involved complex configuration setups, which can be time-consuming and error-prone.
Version Compatibility: Keeping Storybook and Nuxt versions in sync can be tricky, as both tools evolve independently.
Component Isolation: Achieving proper component isolation in Nuxt for development and testing can be challenging without Storybook.
Replicating Nuxt Environments: Creating a development environment in Storybook that mirrors your Nuxt app settings can be a daunting task.

The Solution: The Storybook Nuxt Module

The Storybook Nuxt module is a game-changer for Nuxt developers. It simplifies the integration of Storybook with your Nuxt projects, addressing the challenges mentioned above. Here's how it works and why you should consider using it:

Easy Setup

The Storybook Nuxt module offers multiple options for setup, making it flexible to your project's needs.

Option 1: @storybook-vue/nuxt
If you want Nuxt full features out of the box in your Storybook, you can install the @storybook-vue/nuxt preset in your current project. Simply modify your .storybook/main.js file as follows:
Option 2: storybook-nuxt init Command
Alternatively, you can use the storybook-nuxt init command, which streamlines the configuration process by setting up your .storybook/main.js and installing Storybook along with the @nuxtjs/storybook module.
Option 3: @nuxtjs/storybook
If you enable this module, it will install Storybook and provide it directly in devtools. You'll have full access to view the running process in the terminal, as well as access to the Storybook module tab containing your Storybook. Check here for more details.

These three components are options, meaning you can choose one or a combination of them based on your project's requirements.

Seamless Version Compatibility

The module is maintained by the Storybook team, ensuring compatibility with the latest Storybook and Nuxt releases. This means you can always enjoy the latest features without worrying about version conflicts.

Component Isolation

With Storybook integrated into your Nuxt project, you gain a powerful tool for isolating and developing UI components independently. This streamlines the development and testing of individual components, leading to faster and more efficient development cycles.

Mirroring Nuxt Environments

The Storybook Nuxt module effortlessly replicates your Nuxt app's environment settings, ensuring that your components behave consistently across your app and within Storybook. This simplifies debugging and testing by maintaining a coherent development ecosystem.

But that's not all! The Storybook Nuxt module goes above and beyond with these amazing features out of the box, requiring zero configuration:

Nuxt Modules or Plugins Integration: Whether you're using Nuxt modules like i18n, Vuetify, or Pinia, the Storybook Nuxt module seamlessly incorporates them. This means you can develop and test your components with the same plugins you use in your Nuxt project.
Autoimports: Say goodbye to manual imports of components. Storybook Nuxt module's autoimport feature takes care of this for you, making your development workflow even more efficient.
Hot Module Replacement (HMR): HMR is a game-changer for rapid development. With the module, you can take advantage of HMR to see changes in your components instantly, saving you precious development time.
File System Routing: One of Nuxt's standout features is its file system-based routing. Storybook Nuxt module magically makes this routing work seamlessly, allowing you to easily test page navigation and ensure smooth user experiences.

With all these features and capabilities available out of the box, the Storybook Nuxt module takes the complexity out of component-driven development and empowers you to create stunning interfaces with minimal effort.

Enhanced Collaboration

Storybook's interactive UI makes it easier for designers, developers, and stakeholders to collaborate. They can view and interact with your components in isolation, providing valuable feedback without needing to navigate your entire application.

Conclusion

The Storybook Nuxt module bridges the gap between Nuxt and Storybook, offering a streamlined integration process that simplifies component development and testing. By addressing the challenges of complex configuration, version compatibility, component isolation, and environment mirroring, it empowers developers to build better user interfaces with greater ease and efficiency.

If you're a Nuxt developer looking to take your UI development to the next level, don't hesitate to explore the Storybook Nuxt module. Embrace the power of component-driven development and unlock your creative potential.

Explore the Storybook Nuxt on GitHub.
Check out the Storybook Nuxt Full Demo on Stackblitz.
Visit the Storybook Nuxt Module Repository.

Your support and engagement are crucial to the success of this project. Show your appreciation to the maintainer by starring the repository and providing feedback. Your contributions, whether through bug reports, feature requests, or code contributions, can help shape the future of this module and make it even more valuable for the Nuxt developer community.

Start using the Storybook Nuxt module today and watch your Nuxt projects reach new heights of modularity and design excellence. Together, we can make the integration of Nuxt and Storybook even more accessible and powerful.

Happy coding!