Installed storybook

.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from "@storybook-vue/nuxt";
+
+const config: StorybookConfig = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.ts",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook-vue/nuxt",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/vue3";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

nuxt.config.ts

@@ -32,6 +32,7 @@ export default defineNuxtConfig({
     "@pinia/nuxt",
     "pinia-plugin-persistedstate/nuxt",
     "@vite-pwa/nuxt",
+    "@nuxtjs/storybook",
   ],
 
   pwa: {
@@ -71,4 +72,9 @@ export default defineNuxtConfig({
   typescript: {
     typeCheck: true,
   },
-});
+  vite: {
+    optimizeDeps: {
+      include: ['storybook > @storybook/core > jsdoc-type-pratt-parser'],
+    },
+  },
+});

package.json

@@ -12,39 +12,52 @@
     "format": "prettier --write \"**/*.{ts,tsx,md,vue}\"",
     "lint:prettier": "prettier --check \"**/*.{ts,tsx,md,vue}\"",
     "generate-client": "pnpm openapi --input https://api.ratemanu.com/doc.json --output ./api-client/",
-    "lint": "eslint --ignore-pattern './nuxt/*' && pnpm lint:prettier && pnpm run typecheck"
+    "lint": "eslint --ignore-pattern './nuxt/*' && pnpm lint:prettier && pnpm run typecheck",
+    "storybook": "storybook dev --port 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.23",
     "@heroicons/vue": "^2.1.5",
-    "@nuxt/eslint": "^0.6.0",
+    "@nuxt/eslint": "^0.6.1",
     "@nuxt/image": "^1.8.1",
-    "@nuxt/ui": "^2.18.7",
+    "@nuxt/ui": "^2.19.2",
     "@pinia/nuxt": "^0.5.5",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
-    "@vite-pwa/nuxt": "^0.10.5",
-    "@vueuse/core": "^11.1.0",
-    "nuxt": "^3.13.2",
+    "@vite-pwa/nuxt": "^0.10.6",
+    "@vueuse/core": "^11.2.0",
+    "nuxt": "^3.14.159",
     "nuxt-twemoji": "^3.6.2",
     "ohash": "^1.1.4",
-    "pinia-plugin-persistedstate": "^4.1.1",
+    "pinia-plugin-persistedstate": "^4.1.2",
     "vue": "latest",
     "vue3-carousel-nuxt": "^1.1.3",
     "yup": "^1.4.0"
   },
   "devDependencies": {
     "@iconify-json/heroicons": "^1.2.1",
+    "@nuxtjs/storybook": "8.3.2",
     "@nuxtjs/tailwindcss": "^6.12.2",
-    "@openapitools/openapi-generator-cli": "^2.14.0",
+    "@openapitools/openapi-generator-cli": "^2.15.3",
+    "@storybook-vue/nuxt": "0.2.6",
+    "@storybook/addon-essentials": "8.4.2",
+    "@storybook/addon-interactions": "8.4.2",
+    "@storybook/addon-links": "8.4.2",
+    "@storybook/blocks": "8.4.2",
+    "@storybook/builder-vite": "8.4.2",
+    "@storybook/test": "8.4.2",
+    "@storybook/vue3": "8.4.2",
     "@types/js-cookie": "^3.0.6",
+    "@types/node": "^18.19.64",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-vue": "^9.28.0",
+    "eslint-plugin-vue": "^9.30.0",
     "ofetch": "^1.4.1",
     "prettier": "^3.3.3",
+    "storybook": "8.4.2",
     "typescript": "^5.6.3",
     "vue-eslint-parser": "^9.4.3",
-    "vue-tsc": "^2.1.6"
+    "vue-tsc": "^2.1.10"
   }
-}
+}