v0.1.3-alpha.0

package.json

@@ -27,21 +27,20 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.40.3",
     "@storybook-vue/nuxt": "workspace:*",
-    "@types/node": "^16.18.46",
+    "@types/node": "^16.18.54",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "eslint": "^8.48.0",
+    "eslint": "^8.50.0",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "lint-staged": "^13.3.0",
-    "rimraf": "^5.0.1",
+    "rimraf": "^5.0.5",
     "simple-git-hooks": "^2.9.0",
     "typescript": "^4.9.5",
     "ufo": "^1.3.0",
     "unbuild": "^1.2.1",
     "vite": "^4.4.9",
     "vite-hot-client": "^0.2.2",
-    "vue-router": "^4.2.4",
-    "vue-tsc": "^1.8.8"
+    "vue-tsc": "^1.8.15"
   },
   "pnpm": {
     "overrides": {

packages/storybook-nuxt/build.config.ts

@@ -16,13 +16,16 @@ export default defineBuildConfig({
     emitCJS: true,
     inlineDependencies: true,
   },
-
+  dependencies: [
+    'vue-router',
+    'vue',
+  ],
   externals: [
+    'nuxt',
     'nuxt/schema',
     'nuxt/app',
     '@storybook/types',
     '@storybook/vue3',
-    'vue-router',
     '@vue/shared',
     '@unhead/vue',
     '@nuxt/devtools-kit',

packages/storybook-nuxt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook-vue/nuxt",
-  "version": "0.1.2",
+  "version": "0.1.3-alpha.0",
   "packageManager": "[email protected]",
   "description": "Storybook for Nuxt and Vite: Develop Vue3 components in isolation with Hot Reloading.",
   "license": "MIT",
@@ -56,37 +56,40 @@
     "build": "unbuild",
     "build:watch": "unbuild --stub",
     "test": "vitest run",
-    "dev": "unbuild && cd playground && storybook dev",
+    "dev": "unbuild && cd playground && storybook dev -p 6006",
     "prepack": "unbuild"
   },
   "peerDependencies": {
+    "nuxt": "^3.6.5",
     "vite": "^4.0.0",
     "vue": "^3.3.4"
   },
   "dependencies": {
-    "@nuxt/devtools-kit": "^0.7.6",
+    "@nuxt/devtools-kit": "^0.7.4",
     "@nuxt/kit": "^3.6.5",
     "@nuxt/schema": "^3.6.5",
     "@nuxt/vite-builder": "^3.6.5",
-    "@storybook/builder-vite": "latest",
-    "@storybook/vue3": "latest",
-    "@storybook/vue3-vite": "latest",
+    "@storybook/builder-vite": "7.4.4",
+    "@storybook/vue3": "7.4.4",
+    "@storybook/vue3-vite": "7.4.4",
     "autoprefixer": "^10.4.15",
     "postcss": "^8.4.27",
     "postcss-import": "^15.1.0",
     "postcss-url": "^10.1.3",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
-    "@storybook/types": "latest",
+    "@storybook/types": "7.4.4",
     "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "nuxt": "^3.6.5",
-    "vite": "^4.0.0"
+    "@vitejs/plugin-vue-jsx": "^3.0.1"
   },
   "publishConfig": {
     "access": "public"
   },
+  "paths": {
+    "#build/plugins": "./build/plugins"
+  },
   "bundler": {
     "entries": [
       "./src/index.ts",

packages/storybook-nuxt/playground/app.vue

@@ -1,10 +1,6 @@
-<script lang="ts" setup>
-
-</script>
-
 <template>
   <div>
     <h1> My Nuxt App</h1>
-    <NuxtPage />
+    <MyNuxtPage />
   </div>
 </template>

packages/storybook-nuxt/playground/components/MyNuxtPage.vue

@@ -1,43 +1,58 @@
-<script setup lang="ts">
-const route = useRoute()
+<script>
+
 </script>
 
 <template>
-  <b>My Custom Storybook App </b>
-  <p>This is custom app template to be used in Storybook to test routing.</p>
-  <br>
-  <p> worth clapping no ?</p>
-  <NuxtExampleLayout repo="nuxt/examples" example="routing/pages">
-    <NuxtLoadingIndicator />
+  <v-container>
     <NuxtPage />
+    <template #footer>
+      <div class="text-center p-4 op-50">
+        Current route: <code>{{ route.path }}</code>
+      </div>
+    </template>
+  </v-container>
+  <v-layout class="overflow-visible" style="height: 56px;">
+    <v-bottom-navigation
+      v-model="value"
+      active
+      color="primary"
+    >
+      <v-btn>
+        <v-icon>mdi-home</v-icon>
 
-    <template #nav>
-      <nav class="flex align-center gap-4 p-4">
         <NuxtLink to="/" class="n-link-base">
           Home
         </NuxtLink>
+      </v-btn>
+      <v-btn>
+        <v-icon>mdi-history</v-icon>
+
         <NuxtLink to="/about" class="n-link-base">
           About
         </NuxtLink>
+      </v-btn>
+
+      <v-btn>
+        <v-icon>mdi-heart</v-icon>
+
         <NuxtLink to="/parent" class="n-link-base">
           Parent (index)
         </NuxtLink>
+      </v-btn>
+
+      <v-btn>
+        <v-icon>mdi-map-marker</v-icon>
+
         <NuxtLink to="/parent/b" class="n-link-base">
           Parent (b)
         </NuxtLink>
-        <button class="n-link-base" @click="$router.push(`/parent/reload-${(Math.random() * 100).toFixed()}`)">
-          Keyed child
-        </button>
-        <button class="n-link-base" @click="$router.push(`/parent/static-${(Math.random() * 100).toFixed()}`)">
-          Non-keyed child
-        </button>
-      </nav>
-    </template>
-
-    <template #footer>
-      <div class="text-center p-4 op-50">
-        Current route: <code>{{ route.path }}</code>
-      </div>
-    </template>
-  </NuxtExampleLayout>
+      </v-btn>
+      <v-btn class="n-link-base" @click="$router.push(`/parent/reload-${(Math.random() * 100).toFixed()}`)">
+        Keyed child
+      </v-btn>
+      <v-btn class="n-link-base" @click="$router.push(`/parent/static-${(Math.random() * 100).toFixed()}`)">
+        Non-keyed child
+      </v-btn>
+    </v-bottom-navigation>
+  </v-layout>
 </template>

packages/storybook-nuxt/playground/nuxt.config.ts

@@ -1,17 +1,10 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   modules: [
-    '@nuxt/ui',
-    '@nuxtjs/i18n',
     '@nuxt/image',
     '@pinia/nuxt',
     '@invictus.codes/nuxt-vuetify',
   ],
-  i18n: {
-    locales: ['en', 'fr', 'ar'],
-    defaultLocale: 'en',
-  },
-
   runtimeConfig: {
     app: {
       name: 'Nuxt',

packages/storybook-nuxt/playground/package.json

@@ -12,24 +12,27 @@
   },
   "devDependencies": {
     "@invictus.codes/nuxt-vuetify": "^0.3.0",
-    "@nuxt/devtools": "0.8.0",
+    "@nuxt/devtools": "^0.7.0",
     "@nuxt/image": "rc",
-    "@nuxt/ui": "0.4.1",
-    "@nuxtjs/i18n": "8.0.0-rc.2",
+    "@nuxt/ui-templates": "^1.3.1",
+    "@nuxtjs/color-mode": "^3.3.0",
     "@pinia/nuxt": "^0.4.11",
     "@storybook-vue/nuxt": "workspace:*",
-    "@storybook/addon-essentials": "latest",
-    "@storybook/addon-interactions": "latest",
-    "@storybook/addon-links": "latest",
-    "@storybook/blocks": "latest",
-
+    "@storybook/addon-essentials": "7.4.4",
+    "@storybook/addon-interactions": "7.4.4",
+    "@storybook/addon-links": "7.4.4",
+    "@storybook/blocks": "7.4.4",
     "@storybook/testing-library": "^0.2.0",
     "@types/node": "^18.17.5",
-    "nuxt": "^3.6.5",
+    "nuxt": "3.6.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "latest",
-    "typescript": "^5.1.0",
-    "vue-router": "^4.2.4"
+    "storybook": "7.4.4",
+    "typescript": "^5.1.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "nuxt": "3.6.5"
+    }
   }
 }

packages/storybook-nuxt/src/preset.ts

@@ -23,7 +23,7 @@ let nuxt: Nuxt
  * extend nuxt-link component to use storybook router
  * @param nuxt
  */
-function extendComponents(nuxt: Nuxt) {
+export function extendComponents(nuxt: Nuxt) {
   nuxt.hook('components:extend', (components: any) => {
     const nuxtLink = components.find(({ name }: any) => name === 'NuxtLink')
     nuxtLink.filePath = join(runtimeDir, 'components/nuxt-link')
@@ -67,8 +67,8 @@ async function defineNuxtConfig(baseConfig: Record<string, any>) {
   nuxt.hook('modules:done', () => {
     extendComposables(nuxt)
     addPlugin({
-      src: join(runtimeDir, 'plugins/storybook'),
-      mode: 'client',
+      src: join(pluginsDir, 'storybook'),
+      mode: 'all',
     })
     // Override nuxt-link component to use storybook router
     extendComponents(nuxt)
@@ -97,7 +97,7 @@ async function defineNuxtConfig(baseConfig: Record<string, any>) {
   try {
     await buildNuxt(nuxt)
 
-    nuxt.options.dev = true
+    // nuxt.options.dev = true
 
     return {
       viteConfig: extendedConfig,