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 existStep 2: Define Your Story
Inside thestories
folder, create aVuetify.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 yourcomponents
directory, create avuetify.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 <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.
Top comments (1)
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