chore: create vuetify example

.github/workflows/ci-examples.yml

@@ -27,6 +27,10 @@ jobs:
             buildScript: example:tailwind:build
             storybookBuildScript: example:tailwind:storybook:build
             projectToken: chpt_fbfe47dc27d4064
+          - package: Vuetify
+            buildScript: example:vuetify:build
+            storybookBuildScript: example:vuetify:storybook:build
+            projectToken: chpt_7664ea4a69a7210
           - package: Showcase
             buildScript: example:showcase:build
             storybookBuildScript: example:showcase:storybook:build

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
   "eslint.experimental.useFlatConfig": true,
-  "cSpell.words": ["nuxt", "ofetch", "Pinia", "composables"]
+  "cSpell.words": ["nuxt", "ofetch", "Pinia", "composables", "vuetify"]
 }

docs/content/3.examples/3.vuetify.md

@@ -0,0 +1,13 @@
+---
+toc: false
+---
+
+# Vuetify
+
+Usage of Storybook with Vuetify.
+
+---
+
+This example shows how to use the [Vuetify module for Nuxt](https://vuetify-nuxt-module.netlify.app/) in combination with the Storybook module.
+
+:sandbox{src="https://stackblitz.com/github/nuxt-modules/storybook/tree/main/examples/vuetify?file=components%2FVuetify.stories.ts&embed=1"}

examples/vuetify/.gitignore

@@ -0,0 +1,26 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+*storybook.log

examples/vuetify/.storybook/main.js

@@ -0,0 +1,20 @@
+/** @type { import('storybook-vue').StorybookConfig } */
+const config = {
+  stories: [
+    '../components/**/*.mdx',
+    '../components/**/*.stories.@(js|jsx|ts|tsx|mdx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+  ],
+  framework: {
+    name: '@storybook-vue/nuxt',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+}
+export default config

examples/vuetify/.storybook/preview.js

@@ -0,0 +1,12 @@
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+export default preview

examples/vuetify/README.md

@@ -0,0 +1,79 @@
+# Nuxt 3 Minimal Starter
+
+This example shows how to use the [Vuetify module for Nuxt](https://vuetify-nuxt-module.netlify.app/) in combination with the Nuxt Storybook module.
+
+---
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

examples/vuetify/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtWelcome />
+  </div>
+</template>

packages/storybook-addon/playground/stories/Vuetify.stories.ts → examples/vuetify/components/Vuetify.stories.ts

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 
-import Vuetify from '~/components/vuetify/index.vue'
+import Vuetify from './Vuetify.vue'
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 
 const meta = {
-  title: 'Plugins/Vuetify ',
+  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'],

examples/vuetify/nuxt.config.ts

@@ -0,0 +1,5 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  modules: ['@nuxtjs/storybook', 'vuetify-nuxt-module'],
+})

examples/vuetify/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "vuetify",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "nuxt": "^3.11.2",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0",
+    "vuetify-nuxt-module": "^0.14.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.3",
+    "@nuxtjs/storybook": "latest",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-links": "^8.0.8",
+    "@storybook/blocks": "^8.0.8",
+    "@storybook/test": "^8.0.8"
+  }
+}

examples/vuetify/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

examples/vuetify/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

package.json

@@ -22,6 +22,10 @@
     "example:tailwind:build": "nuxi build examples/tailwind",
     "example:tailwind:storybook:build": "cd examples/tailwind && pnpm run build-storybook",
     "example:tailwind:storybook:publish": "chromatic --exit-zero-on-changes --build-script-name example:tailwind:storybook:build --project-token=chpt_fbfe47dc27d4064",
+    "example:vuetify:dev": "nuxi dev examples/vuetify",
+    "example:vuetify:build": "nuxi build examples/vuetify",
+    "example:vuetify:storybook:build": "cd examples/vuetify && pnpm run build-storybook",
+    "example:vuetify:storybook:publish": "chromatic --exit-zero-on-changes --build-script-name example:vuetify:storybook:build --project-token=chpt_7664ea4a69a7210",
     "example:showcase:dev": "nuxi dev examples/showcase",
     "example:showcase:build": "nuxi build examples/showcase",
     "example:showcase:storybook:build": "cd examples/showcase && pnpm run build-storybook",

packages/storybook-addon/playground/package.json

@@ -28,6 +28,6 @@
     "typescript": "^5.4.3",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0",
-    "vuetify-nuxt-module": "^0.14.0"
+    "vuetify-nuxt-module": "^0.14.1"
   }
 }