Tutorial: Storybook with Vuetify in Nuxt App

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.

Comments

[gkTim]

Great article. Maybe have a look at: histoire.dev/ it was build with vite / vue in mind from the beginning. Really fast and I personally like the syntax