Set up Storybook

.gitignore

@@ -40,3 +40,6 @@ logs
 # Gemini
 .gemini/
 
+
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -0,0 +1,8 @@
+import type { StorybookConfig } from "@storybook-vue/nuxt";
+
+const config: StorybookConfig = {
+  stories: ["../app/components/**/__stories__/*.stories.@(js|jsx|ts|tsx|mdx)"],
+  addons: [],
+  framework: "@storybook-vue/nuxt",
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook-vue/nuxt";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

app/components/ui/__stories__/Button.stories.ts

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import Button from "../Button.vue";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/UI/Button",
+  component: Button,
+  argTypes: {
+    type: {
+      control: "radio",
+      options: ["primary", "secondary", "accent"],
+    },
+    to: {
+      control: "text",
+      description: "The URL or route to navigate to when the button is clicked",
+    },
+    isSubmit: {
+      control: "boolean",
+      description: "Whether the button is a submit button for forms",
+    },
+    default: {
+      control: "text",
+    },
+  },
+  args: {
+    default: "Click me",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    type: "primary",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    type: "secondary",
+  },
+};
+
+export const Accent: Story = {
+  args: {
+    type: "accent",
+  },
+};
+
+export const WithLink: Story = {
+  args: {
+    to: "/example",
+  },
+};
+
+export const SubmitButton: Story = {
+  args: {
+    isSubmit: true,
+  },
+};

nuxt.config.ts

@@ -32,6 +32,7 @@ export default defineNuxtConfig({
     "@nuxt/scripts",
     "nitro-cloudflare-dev",
     "nuxt-auth-utils",
+    "@nuxtjs/storybook",
   ],
   $env: {
     production: {

package.json

@@ -27,15 +27,18 @@
     "@catppuccin/daisyui": "^2.1.1",
     "@iconify-json/heroicons": "^1.2.3",
     "@iconify-json/logos": "^1.2.11",
+    "@nuxtjs/storybook": "^9.0.1",
     "@trunkio/launcher": "^1.3.4",
     "@types/bun": "^1.3.14",
     "@types/node": "^25.9.1",
     "drizzle-kit": "^0.31.10",
+    "eslint-plugin-storybook": "^10.4.1",
     "nitro-cloudflare-dev": "^0.2.2",
     "nitropack": "^2.13.4",
     "npm-run-all2": "^9.0.1",
     "playwright": "^1.60.0",
     "prettier": "^3.8.3",
+    "storybook": "^10.4.1",
     "vitest": "^4.1.8",
     "wrangler": "^4.96.0"
   },
@@ -89,7 +92,9 @@
     "test:nuxt": "vitest --project nuxt",
     "test:unit": "vitest --project unit",
     "test:watch": "vitest --watch",
-    "types": "bun run wrangler types"
+    "types": "bun run wrangler types",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "type": "module",
   "trustedDependencies": [