diff --git a/packages/storybook-nuxt/build.config.ts b/packages/storybook-nuxt/build.config.ts index 3b66f76..47c5d9e 100644 --- a/packages/storybook-nuxt/build.config.ts +++ b/packages/storybook-nuxt/build.config.ts @@ -19,6 +19,7 @@ export default defineBuildConfig({ dependencies: [ 'vue-router', 'vue', + 'nuxt', ], externals: [ 'nuxt', @@ -29,10 +30,6 @@ export default defineBuildConfig({ '@vue/shared', '@unhead/vue', '@nuxt/devtools-kit', - '#app/composables/state', - '#build/css', - '#build/fetch', - '#build/paths', ], failOnWarn: false, }) diff --git a/packages/storybook-nuxt/package.json b/packages/storybook-nuxt/package.json index e6beec1..435829e 100644 --- a/packages/storybook-nuxt/package.json +++ b/packages/storybook-nuxt/package.json @@ -1,6 +1,6 @@ { "name": "@storybook-vue/nuxt", - "version": "0.2.3-alpha.6", + "version": "0.2.3-alpha.7", "packageManager": "pnpm@8.6.12", "description": "Storybook for Nuxt and Vite: Develop Vue3 components in isolation with Hot Reloading.", "license": "MIT", diff --git a/packages/storybook-nuxt/playground/components/MyWelcome.vue b/packages/storybook-nuxt/playground/components/MyWelcome.vue index 37e6614..5de4146 100644 --- a/packages/storybook-nuxt/playground/components/MyWelcome.vue +++ b/packages/storybook-nuxt/playground/components/MyWelcome.vue @@ -1,7 +1,6 @@ diff --git a/packages/storybook-nuxt/src/preset.ts b/packages/storybook-nuxt/src/preset.ts index e8d98e0..477d5f8 100644 --- a/packages/storybook-nuxt/src/preset.ts +++ b/packages/storybook-nuxt/src/preset.ts @@ -161,10 +161,8 @@ export const viteFinal: StorybookConfig['viteFinal'] = async ( } const nuxtConfig = await defineNuxtConfig(await getStorybookViteConfig(config, options)) - // console.log(nuxtConfig.viteConfig.build?.rollupOptions) - return mergeConfig(nuxtConfig.viteConfig, { - build: { rollupOptions: { external: ['vue', 'vue-demi', '#build/css', '#build/paths', '#build/fetch', '#build/plugins'] } }, + // build: { rollupOptions: { external: ['vue', 'vue-demi'] } }, define: { __NUXT__: JSON.stringify({ config: nuxtConfig.nuxt.options.runtimeConfig }), }, @@ -190,7 +188,7 @@ export const viteFinal: StorybookConfig['viteFinal'] = async ( }) } export function getNuxtProxyConfig(nuxt: Nuxt) { - const port = nuxt.options.runtimeConfig.public.port ?? 3000 + const port = nuxt.options.runtimeConfig.app.port ?? 3000 const route = '^/(_nuxt|_ipx|_icon|__nuxt_devtools__)' const proxy = { [route]: diff --git a/packages/storybook-nuxt/src/preview.ts b/packages/storybook-nuxt/src/preview.ts index 2d8db5e..6eb2c33 100644 --- a/packages/storybook-nuxt/src/preview.ts +++ b/packages/storybook-nuxt/src/preview.ts @@ -1,58 +1,6 @@ -// import { useStorybook } from './runtime/composables/storybook' - -import { applyPlugins, createNuxtApp } from 'nuxt/app' -import { nextTick } from 'vue' -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' - -// @ts-expect-error virtual file -import plugins from '#build/plugins' - -import '#build/css' - -const globalWindow = window as any - -// entry() -const logger = console - -async function applyNuxtPlugins(vueApp: any, storyContext: any) { - const nuxt = createNuxtApp({ vueApp, globalName: `nuxt-${storyContext.id}` }) - getContext('nuxt-app').set(nuxt, true) - logger.log('🔌 🔌 🔌 [storybook-nuxt-plugin] setup ', { nuxtApp: nuxt }) - 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) { - // consola.error('Vue Error in plugins ', e) - } - - return nuxt +async function initNuxt() { + const { useStorybook } = await import('./runtime/composables/storybook') + useStorybook() } -globalWindow.PLUGINS_SETUP_FUNCTIONS ||= new Set() -globalWindow.PLUGINS_SETUP_FUNCTIONS.add(applyNuxtPlugins) - -export default applyNuxtPlugins +initNuxt() +export default initNuxt diff --git a/packages/storybook-nuxt/src/runtime/composables/storybook.ts b/packages/storybook-nuxt/src/runtime/composables/storybook.ts index 2993723..52bcc60 100644 --- a/packages/storybook-nuxt/src/runtime/composables/storybook.ts +++ b/packages/storybook-nuxt/src/runtime/composables/storybook.ts @@ -1,6 +1,7 @@ import consola from 'consola' import { applyPlugins, createNuxtApp } from 'nuxt/app' import { nextTick } from 'vue' +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) @@ -12,13 +13,11 @@ import '#build/fetch.mjs' // @ts-expect-error virtual file import plugins from '#build/plugins' -import '#build/css' - const globalWindow = window as any async function applyNuxtPlugins(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