Tutorial: Storybook with Vuetify in Nuxt App
Tags: storybook, vue, nuxt, tutorial
Published: 2023-10-08 03:31:21

## 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

{% embed https://stackblitz.com/edit/nuxt-starter-ngjmj6?embed=1&file=package.json %}

**More links:**

[Storybook Nuxt docs](https://storybook.nuxtjs.org/).
[Storybook Nuxt Framework github repository](https://github.com/storybook-vue/storybook-nuxt).