feat: init storybook

.gitignore

@@ -104,3 +104,7 @@ tests/*/screenshots
 
 # Tests videos
 tests/*/videos
+
+# Storybook
+.nuxt-storybook
+storybook-static

components/MyButton.stories.js

@@ -0,0 +1,7 @@
+export default {
+  title: "MyButton",
+}
+
+export const MyButton = () => {
+  "<MyButton>Primary Button</MyButton>"
+}

components/MyButton.vue

@@ -0,0 +1,3 @@
+<template>
+  <button>Button</button>
+</template>

nuxt.config.js

@@ -361,11 +361,23 @@ export default {
     },
   },
 
-  // https://github.com/nuxt-community/color-mode-module
+  // Color mode configuration (https://github.com/nuxt-community/color-mode-module)
   colorMode: {
     classSuffix: "",
   },
 
+  // Storybook configuration (https://github.com/nuxt-community/storybook)
+  storybook: {
+    webpackFinal(config, _options) {
+      config.node = {
+        fs: "empty",
+      }
+
+      // extend config here
+      return config
+    },
+  },
+
   // Build Configuration (https://go.nuxtjs.dev/config-build)
   build: {
     transpile: ["three"],

package.json

@@ -16,7 +16,9 @@
     "lintfix": "eslint --ext .ts,.js,.vue --ignore-path .gitignore . --fix",
     "test": "jest",
     "prepare": "husky install",
-    "pre-commit": "lint-staged"
+    "pre-commit": "lint-staged",
+    "storybook": "nuxt storybook",
+    "storybook:build": "nuxt storybook build"
   },
   "lint-staged": {
     "*.{ts,js,vue}": "eslint",
@@ -76,6 +78,7 @@
     "@nuxtjs/google-analytics": "^2.4.0",
     "@nuxtjs/google-fonts": "^1.3.0",
     "@nuxtjs/pwa": "^3.3.5",
+    "@nuxtjs/storybook": "^4.1.1",
     "@nuxtjs/stylelint-module": "^4.0.0",
     "@nuxtjs/svg": "^0.1.12",
     "@testing-library/jest-dom": "^5.14.1",
@@ -104,5 +107,8 @@
     "ts-jest": "^27.0.3",
     "vue-jest": "^3.0.7",
     "worker-loader": "^3.0.8"
+  },
+  "browser": {
+    "fs": false
   }
 }