revert to plugins

packages/storybook-nuxt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook-vue/nuxt",
-  "version": "0.2.3-alpha.12",
+  "version": "0.2.3-alpha.13",
   "packageManager": "[email protected]",
   "description": "Storybook for Nuxt and Vite: Develop Vue3 components in isolation with Hot Reloading.",
   "license": "MIT",

packages/storybook-nuxt/src/preset.ts

@@ -17,9 +17,8 @@ const distDir = resolve(fileURLToPath(
 const runtimeDir = resolve(distDir, 'runtime')
 const pluginsDir = resolve(runtimeDir, 'plugins')
 const componentsDir = resolve(runtimeDir, 'components')
-const composablesDir = resolve(runtimeDir, 'composables')
 
-const dirs = [distDir, packageDir, pluginsDir, componentsDir, composablesDir]
+const dirs = [distDir, packageDir, pluginsDir, componentsDir]
 
 let nuxt: Nuxt
 
@@ -36,18 +35,6 @@ function extendComponents(nuxt: Nuxt) {
   })
 }
 
-/**
- * extend composables to override router ( fix undefined router  useNuxtApp )
- *
- * @param nuxt
- * */
-
-async function extendComposables(nuxt: Nuxt) {
-  const { addImportsDir } = await import(require.resolve('@nuxt/kit'))
-  nuxt.options.build.transpile.push(composablesDir)
-  addImportsDir(composablesDir)
-}
-
 async function defineNuxtConfig(baseConfig: Record<string, any>) {
   const { loadNuxt, buildNuxt, addPlugin, extendPages } = await import(require.resolve('@nuxt/kit'))
   nuxt = await loadNuxt({
@@ -68,11 +55,9 @@ async function defineNuxtConfig(baseConfig: Record<string, any>) {
 
   let extendedConfig: ViteConfig = {}
 
-  nuxt.options.build.transpile.push(resolve(composablesDir, 'storybook'))
   nuxt.options.build.transpile.push(resolve(packageDir, 'preview'))
 
   nuxt.hook('modules:done', () => {
-    extendComposables(nuxt)
     // Override nuxt-link component to use storybook router
     extendComponents(nuxt)
     // Add iframe page
@@ -123,8 +108,6 @@ async function defineNuxtConfig(baseConfig: Record<string, any>) {
   try {
     await buildNuxt(nuxt)
 
-    // nuxt.options.dev = true
-
     return {
       viteConfig: extendedConfig,
       nuxt,

packages/storybook-nuxt/src/preview.ts

@@ -1,6 +1,25 @@
-async function initNuxt() {
-  const { useStorybook } = await import('./runtime/composables/storybook')
-  useStorybook()
+const vueAppRootContainer = document.createElement('div')
+vueAppRootContainer.id = '__nuxt'
+vueAppRootContainer.setAttribute('hidden', 'true')
+document.body.appendChild(vueAppRootContainer)
+
+// entry()
+const logger = console
+async function nuxtAppEntry() {
+  const nuxtApp = () => import('#app/entry').then(m => m.default).catch(() => {})
+  // i
+  const vueAppPromise = nuxtApp().catch((_error) => {
+    // consola.error('Error while mounting app:', error)
+  })
+  return vueAppPromise
 }
-initNuxt()
-export default initNuxt
+
+nuxtAppEntry().then((app: any) => {
+  logger.log('nuxtAppEntry done', app)
+  app().then(() => {
+    logger.log('nuxtAppEntry app done')
+  }).catch(() => { logger.log('nuxtAppEntry app error') })
+// app()
+})
+
+export default nuxtAppEntry

packages/storybook-nuxt/src/runtime/plugins/storybook.ts

@@ -1,7 +1,20 @@
-import { defineNuxtPlugin } from 'nuxt/app'
+import { applyPlugins, createNuxtApp, defineNuxtPlugin } from 'nuxt/app'
 import { getContext } from 'unctx'
 
+// These files must be imported first as they have side effects:
+// 1. (we set __webpack_public_path via this import, if using webpack builder)
+import '#build/paths.mjs'
+
+// 2. we set globalThis.$fetch via this import
+import '#build/fetch.mjs'
+
 import logger from 'consola'
+import { nextTick } from 'vue'
+
+// @ts-expect-error virtual file
+import plugins from '#build/plugins'
+
+const globalWindow = window as any
 
 export default defineNuxtPlugin({
   name: 'storybook-nuxt-plugin',
@@ -12,6 +25,41 @@ export default defineNuxtPlugin({
     const nuxtMainApp = getContext('nuxt-app')
     if (nuxtMainApp)
       logger.info('🔌  [storybook-nuxt-plugin] setup already done ', nuxtMainApp)
+    if (nuxtApp.globalName !== 'nuxt')
+      return
+    const applyNuxtPlugins = async (vueApp: any, storyContext: any) => {
+      const nuxt = createNuxtApp({ vueApp, globalName: `nuxt-${storyContext.id}` })
+      getContext('nuxt-app').set(nuxt, true)
+      async function handleVueError(err: any) {
+        await nuxt.callHook('app:error', err)
+        nuxt.payload.error = (nuxt.payload.error || err) as any
+      }
+
+      vueApp.config.errorHandler = handleVueError
+
+      try {
+        await applyPlugins(nuxt, plugins)
+      }
+      catch (err) {
+        handleVueError(err)
+      }
+      try {
+        await nuxt.hooks.callHook('app:created', vueApp)
+        await nuxt.hooks.callHook('app:beforeMount', vueApp)
+        setTimeout(async () => {
+          await nuxt.hooks.callHook('app:mounted', vueApp)
+          await nextTick()
+        }, 10)
+      }
+      catch (e) {
+        logger.error('Vue Error in plugins ', e)
+      }
+
+      return nuxt
+    }
+
+    globalWindow.PLUGINS_SETUP_FUNCTIONS ||= new Set()
+    globalWindow.PLUGINS_SETUP_FUNCTIONS.add(applyNuxtPlugins)
   },
 
   hooks: {