diff --git a/packages/storybook-nuxt/playground/pages/parent/b.vue b/packages/storybook-nuxt/playground/pages/parent/b.vue
index 6312e816..f3889a62 100644
--- a/packages/storybook-nuxt/playground/pages/parent/b.vue
+++ b/packages/storybook-nuxt/playground/pages/parent/b.vue
@@ -1,5 +1,3 @@
-
- Parent/b
-
+ Parent/b
diff --git a/packages/storybook-nuxt/playground/pages/parent/index.vue b/packages/storybook-nuxt/playground/pages/parent/index.vue
index fe020db9..95ea3a23 100644
--- a/packages/storybook-nuxt/playground/pages/parent/index.vue
+++ b/packages/storybook-nuxt/playground/pages/parent/index.vue
@@ -1,5 +1,3 @@
-
- Parent/index
-
+ Parent/index
diff --git a/packages/storybook-nuxt/playground/pages/parent/reload-[id].vue b/packages/storybook-nuxt/playground/pages/parent/reload-[id].vue
index 8ab0f3fe..c69d9af4 100644
--- a/packages/storybook-nuxt/playground/pages/parent/reload-[id].vue
+++ b/packages/storybook-nuxt/playground/pages/parent/reload-[id].vue
@@ -1,11 +1,11 @@
-
- Child reloaded: {{ reloads }}
-
+ Child reloaded: {{ reloads }}
diff --git a/packages/storybook-nuxt/playground/pages/parent/static-[id].vue b/packages/storybook-nuxt/playground/pages/parent/static-[id].vue
index 2233558a..ca96b97d 100644
--- a/packages/storybook-nuxt/playground/pages/parent/static-[id].vue
+++ b/packages/storybook-nuxt/playground/pages/parent/static-[id].vue
@@ -1,14 +1,14 @@
-
- Child reloaded: {{ reloads }}
-
+ Child reloaded: {{ reloads }}
diff --git a/packages/storybook-nuxt/playground/stores/counter.ts b/packages/storybook-nuxt/playground/stores/counter.ts
index 406f14fb..002f0673 100644
--- a/packages/storybook-nuxt/playground/stores/counter.ts
+++ b/packages/storybook-nuxt/playground/stores/counter.ts
@@ -1,5 +1,5 @@
// eslint-disable-next-line promise/param-names
-const delay = (t: number) => new Promise(r => setTimeout(r, t))
+const delay = (t: number) => new Promise((r) => setTimeout(r, t))
export const useCounter = defineStore('counter', {
state: () => ({
@@ -10,7 +10,7 @@ export const useCounter = defineStore('counter', {
}),
getters: {
- double: state => state.n * 2,
+ double: (state) => state.n * 2,
},
actions: {
@@ -28,15 +28,13 @@ export const useCounter = defineStore('counter', {
await delay(1000)
this.numbers.push(n)
await delay(1000)
- if (this.n !== n)
- throw new Error('Someone changed n!')
+ if (this.n !== n) throw new Error('Someone changed n!')
return n
},
async decrementToZero(interval = 300) {
- if (this.n <= 0)
- return
+ if (this.n <= 0) return
while (this.n > 0) {
this.$patch((state) => {
diff --git a/packages/storybook-nuxt/playground/stories/MyNuxtWelcome.stories.ts b/packages/storybook-nuxt/playground/stories/MyNuxtWelcome.stories.ts
index 1071349b..3ab3944d 100644
--- a/packages/storybook-nuxt/playground/stories/MyNuxtWelcome.stories.ts
+++ b/packages/storybook-nuxt/playground/stories/MyNuxtWelcome.stories.ts
@@ -9,7 +9,6 @@ const meta = {
component: MyNuxtWelcome,
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
tags: ['autodocs'],
-
} satisfies Meta
export default meta
diff --git a/packages/storybook-nuxt/playground/stories/NuxtImage.stories.ts b/packages/storybook-nuxt/playground/stories/NuxtImage.stories.ts
index c9c5e196..b60d92fb 100644
--- a/packages/storybook-nuxt/playground/stories/NuxtImage.stories.ts
+++ b/packages/storybook-nuxt/playground/stories/NuxtImage.stories.ts
@@ -9,7 +9,6 @@ const meta = {
component: MyComponent,
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
tags: ['autodocs'],
-
} satisfies Meta
export default meta
@@ -21,5 +20,5 @@ type Story = StoryObj
*/
export const NuxtImage: Story = {
- args: { },
+ args: {},
}
diff --git a/packages/storybook-nuxt/playground/stories/Pinia.stories.ts b/packages/storybook-nuxt/playground/stories/Pinia.stories.ts
index 499690ab..f1c5645f 100644
--- a/packages/storybook-nuxt/playground/stories/Pinia.stories.ts
+++ b/packages/storybook-nuxt/playground/stories/Pinia.stories.ts
@@ -9,7 +9,6 @@ const meta = {
component: MyComponent,
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
tags: ['autodocs'],
-
} satisfies Meta
export default meta
diff --git a/packages/storybook-nuxt/playground/stories/RuntimeComposable.stories.ts b/packages/storybook-nuxt/playground/stories/RuntimeComposable.stories.ts
index 94ddbe25..cb496ddc 100644
--- a/packages/storybook-nuxt/playground/stories/RuntimeComposable.stories.ts
+++ b/packages/storybook-nuxt/playground/stories/RuntimeComposable.stories.ts
@@ -9,7 +9,6 @@ const meta = {
component: MyComponent,
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
tags: ['autodocs'],
-
} satisfies Meta
export default meta
diff --git a/packages/storybook-nuxt/playground/stories/Vuetify.stories.ts b/packages/storybook-nuxt/playground/stories/Vuetify.stories.ts
index 4e6a075f..dfbcd2f7 100644
--- a/packages/storybook-nuxt/playground/stories/Vuetify.stories.ts
+++ b/packages/storybook-nuxt/playground/stories/Vuetify.stories.ts
@@ -9,7 +9,6 @@ const meta = {
component: Vuetify,
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
tags: ['autodocs'],
-
} satisfies Meta
export default meta
diff --git a/packages/storybook-nuxt/playground/stories/pages/About.stories.ts b/packages/storybook-nuxt/playground/stories/pages/About.stories.ts
index bb2d0d6e..bc6272ea 100644
--- a/packages/storybook-nuxt/playground/stories/pages/About.stories.ts
+++ b/packages/storybook-nuxt/playground/stories/pages/About.stories.ts
@@ -9,7 +9,6 @@ const meta = {
component: MyComponent,
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
tags: ['autodocs'],
-
} satisfies Meta
export default meta
diff --git a/packages/storybook-nuxt/playground/stories/pages/CustomNav.stories.ts b/packages/storybook-nuxt/playground/stories/pages/CustomNav.stories.ts
index 7214988f..11f42a5c 100644
--- a/packages/storybook-nuxt/playground/stories/pages/CustomNav.stories.ts
+++ b/packages/storybook-nuxt/playground/stories/pages/CustomNav.stories.ts
@@ -10,7 +10,6 @@ const meta = {
component: MyNuxtPage,
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
tags: ['autodocs'],
-
} satisfies Meta
export default meta
@@ -22,16 +21,15 @@ type Story = StoryObj
*/
export const Home: Story = {
- args: { },
+ args: {},
render(args: any) {
- return ({
-
+ return {
components: { MyNuxtPage },
setup() {
useRouter().push('/')
return { args }
},
template: '
',
- })
+ }
},
}
diff --git a/packages/storybook-nuxt/playground/stories/pages/Home.stories.ts b/packages/storybook-nuxt/playground/stories/pages/Home.stories.ts
index 6f59e913..9df5d7d3 100644
--- a/packages/storybook-nuxt/playground/stories/pages/Home.stories.ts
+++ b/packages/storybook-nuxt/playground/stories/pages/Home.stories.ts
@@ -9,7 +9,6 @@ const meta = {
component: MyComponent,
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
tags: ['autodocs'],
-
} satisfies Meta
export default meta
@@ -21,5 +20,5 @@ type Story = StoryObj
*/
export const NewsPage: Story = {
- args: { },
+ args: {},
}
diff --git a/packages/storybook-nuxt/playground/stories/types.ts b/packages/storybook-nuxt/playground/stories/types.ts
index e03684f7..54e581df 100644
--- a/packages/storybook-nuxt/playground/stories/types.ts
+++ b/packages/storybook-nuxt/playground/stories/types.ts
@@ -1,11 +1,11 @@
// types.ts
export interface Props {
/**
- * description for prop "a" type definiton
- * in external file .
- * @file ./types.ts
- * @default "Hello World"
- * */
+ * description for prop "a" type definiton
+ * in external file .
+ * @file ./types.ts
+ * @default "Hello World"
+ * */
a: string
}
diff --git a/packages/storybook-nuxt/preset.js b/packages/storybook-nuxt/preset.js
index 57b73a38..a1c51f23 100644
--- a/packages/storybook-nuxt/preset.js
+++ b/packages/storybook-nuxt/preset.js
@@ -1 +1 @@
-module.exports = require('./dist/preset.cjs');
+module.exports = require('./dist/preset.cjs')
diff --git a/packages/storybook-nuxt/src/dirs.ts b/packages/storybook-nuxt/src/dirs.ts
index fe00a71c..c77c9d9e 100644
--- a/packages/storybook-nuxt/src/dirs.ts
+++ b/packages/storybook-nuxt/src/dirs.ts
@@ -10,4 +10,10 @@ export const composablesDir = resolve(runtimeDir, 'composables')
export const packageDir = resolve(distDir, '..')
-export const dirs = [distDir, packageDir, pluginsDir, componentsDir, composablesDir]
+export const dirs = [
+ distDir,
+ packageDir,
+ pluginsDir,
+ componentsDir,
+ composablesDir,
+]
diff --git a/packages/storybook-nuxt/src/preset.ts b/packages/storybook-nuxt/src/preset.ts
index 61e06776..ac6c51bc 100644
--- a/packages/storybook-nuxt/src/preset.ts
+++ b/packages/storybook-nuxt/src/preset.ts
@@ -3,7 +3,11 @@ import { fileURLToPath, pathToFileURL } from 'node:url'
import { createRequire } from 'node:module'
import type { PresetProperty } from '@storybook/types'
-import { type UserConfig as ViteConfig, mergeConfig, searchForWorkspaceRoot } from 'vite'
+import {
+ type UserConfig as ViteConfig,
+ mergeConfig,
+ searchForWorkspaceRoot,
+} from 'vite'
import type { Nuxt } from '@nuxt/schema'
import vuePlugin from '@vitejs/plugin-vue'
@@ -11,10 +15,8 @@ import replace from '@rollup/plugin-replace'
import type { StorybookConfig } from './types'
import { componentsDir, composablesDir, pluginsDir, runtimeDir } from './dirs'
-const packageDir = resolve(fileURLToPath(
- import.meta.url), '../..')
-const distDir = resolve(fileURLToPath(
- import.meta.url), '../..', 'dist')
+const packageDir = resolve(fileURLToPath(import.meta.url), '../..')
+const distDir = resolve(fileURLToPath(import.meta.url), '../..', 'dist')
const dirs = [distDir, packageDir, pluginsDir, componentsDir]
@@ -42,26 +44,31 @@ function extendComponents(nuxt: Nuxt) {
async function extendComposables(nuxt: Nuxt) {
const { addImportsSources } = await import('@nuxt/kit')
nuxt.options.build.transpile.push(composablesDir)
- addImportsSources({ imports: ['useRouter'], from: join(composablesDir, 'router') })
+ addImportsSources({
+ imports: ['useRouter'],
+ from: join(composablesDir, 'router'),
+ })
}
async function defineNuxtConfig(baseConfig: Record) {
- const { loadNuxt, buildNuxt, addPlugin, extendPages } = await import('@nuxt/kit')
+ const { loadNuxt, buildNuxt, addPlugin, extendPages } = await import(
+ '@nuxt/kit'
+ )
nuxt = await loadNuxt({
rootDir: baseConfig.root,
ready: false,
dev: false,
-
overrides: {
buildDir: '.nuxt-storybook',
},
-
})
if ((nuxt.options.builder as string) !== '@nuxt/vite-builder')
- throw new Error(`Storybook-Nuxt does not support '${nuxt.options.builder}' for now.`)
+ throw new Error(
+ `Storybook-Nuxt does not support '${nuxt.options.builder}' for now.`,
+ )
let extendedConfig: ViteConfig = {}
nuxt.options.build.transpile.push(join(packageDir, 'preview'))
@@ -93,14 +100,15 @@ async function defineNuxtConfig(baseConfig: Record) {
const plugins = baseConfig.plugins
// Find the index of the plugin with name 'vite:vue'
- const index = plugins.findIndex((plugin: any) => plugin.name === 'vite:vue')
+ const index = plugins.findIndex(
+ (plugin: any) => plugin.name === 'vite:vue',
+ )
// Check if the plugin was found
if (index !== -1) {
// Replace the plugin with the new one using vuePlugin()
plugins[index] = vuePlugin()
- }
- else {
+ } else {
plugins.push(vuePlugin())
}
baseConfig.plugins = plugins
@@ -119,24 +127,27 @@ async function defineNuxtConfig(baseConfig: Record) {
viteConfig: extendedConfig,
nuxt,
}
- }
- catch (e: any) {
+ } catch (e: any) {
throw new Error(e)
}
}
-export const core: PresetProperty<'core', StorybookConfig> = async (config: any) => {
- return ({
+export const core: PresetProperty<'core', StorybookConfig> = async (
+ config: any,
+) => {
+ return {
...config,
builder: '@storybook/builder-vite',
renderer: '@storybook/vue3',
- })
+ }
}
/**
*
* @param entry preview entries
* @returns preview entries with nuxt runtime
*/
-export const previewAnnotations: StorybookConfig['previewAnnotations'] = async (entry = []) => {
+export const previewAnnotations: StorybookConfig['previewAnnotations'] = async (
+ entry = [],
+) => {
return [...entry, resolve(packageDir, 'preview')]
}
@@ -146,29 +157,36 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (
) => {
const getStorybookViteConfig = async (c: Record, o: any) => {
// const pkgPath = await getPackageDir('@storybook/vue3-vite')
- const presetURL = pathToFileURL(join(await getPackageDir('@storybook/vue3-vite'), 'preset.js'))
+ const presetURL = pathToFileURL(
+ join(await getPackageDir('@storybook/vue3-vite'), 'preset.js'),
+ )
const { viteFinal: ViteFile } = await import(presetURL.href)
- if (!ViteFile)
- throw new Error('ViteFile not found')
+ if (!ViteFile) throw new Error('ViteFile not found')
return ViteFile(c, o)
}
- const nuxtConfig = await defineNuxtConfig(await getStorybookViteConfig(config, options))
+ const nuxtConfig = await defineNuxtConfig(
+ await getStorybookViteConfig(config, options),
+ )
return mergeConfig(nuxtConfig.viteConfig, {
// build: { rollupOptions: { external: ['vue', 'vue-demi'] } },
define: {
- '__NUXT__': JSON.stringify({ config: nuxtConfig.nuxt.options.runtimeConfig }),
+ __NUXT__: JSON.stringify({
+ config: nuxtConfig.nuxt.options.runtimeConfig,
+ }),
'import.meta.client': 'true',
},
- plugins: [replace({
- values: {
- 'import.meta.server': 'false',
- 'import.meta.client': 'true',
- },
- preventAssignment: true,
- })],
+ plugins: [
+ replace({
+ values: {
+ 'import.meta.server': 'false',
+ 'import.meta.client': 'true',
+ },
+ preventAssignment: true,
+ }),
+ ],
server: {
cors: true,
proxy: {
@@ -186,11 +204,14 @@ async function getPackageDir(frameworkPackageName: any) {
try {
const require = createRequire(import.meta.url)
- const packageDir = dirname(require.resolve(join(frameworkPackageName, 'package.json'), { paths: [process.cwd()] }))
+ const packageDir = dirname(
+ require.resolve(join(frameworkPackageName, 'package.json'), {
+ paths: [process.cwd()],
+ }),
+ )
return packageDir
- }
- catch (e) {
+ } catch (e) {
// logger.error(e)
}
throw new Error(`Cannot find ${frameworkPackageName},`)
@@ -200,8 +221,7 @@ export function getNuxtProxyConfig(nuxt: Nuxt) {
const port = nuxt.options.runtimeConfig.app.port ?? 3000
const route = '^/(_nuxt|_ipx|_icon|__nuxt_devtools__)'
const proxy = {
- [route]:
- {
+ [route]: {
target: `http://localhost:${port}`,
changeOrigin: true,
secure: false,
diff --git a/packages/storybook-nuxt/src/preview.ts b/packages/storybook-nuxt/src/preview.ts
index 27be96fa..d83f7591 100644
--- a/packages/storybook-nuxt/src/preview.ts
+++ b/packages/storybook-nuxt/src/preview.ts
@@ -6,7 +6,8 @@ document.body.appendChild(vueAppRootContainer)
// entry()
const logger = console
async function nuxtAppEntry() {
- const nuxtApp = () => import('#app/entry').then(m => m.default).catch(() => {})
+ const nuxtApp = () =>
+ import('#app/entry').then((m) => m.default).catch(() => {})
// i
const vueAppPromise = nuxtApp().catch((_error) => {
// consola.error('Error while mounting app:', error)
@@ -16,10 +17,14 @@ async function nuxtAppEntry() {
nuxtAppEntry().then((app: any) => {
logger.log('nuxtAppEntry done', app)
- app().then(() => {
- logger.log('nuxtAppEntry app done')
- }).catch(() => { logger.log('nuxtAppEntry app error') })
-// app()
+ app()
+ .then(() => {
+ logger.log('nuxtAppEntry app done')
+ })
+ .catch(() => {
+ logger.log('nuxtAppEntry app error')
+ })
+ // app()
})
export default nuxtAppEntry
diff --git a/packages/storybook-nuxt/src/runtime/components/nuxt-link.ts b/packages/storybook-nuxt/src/runtime/components/nuxt-link.ts
index 75f325ed..eded8cc9 100644
--- a/packages/storybook-nuxt/src/runtime/components/nuxt-link.ts
+++ b/packages/storybook-nuxt/src/runtime/components/nuxt-link.ts
@@ -1,19 +1,34 @@
/* eslint-disable max-statements-per-line */
import type { ComputedRef, DefineComponent, PropType } from 'vue'
import {
- computed, defineComponent, h, onBeforeUnmount, onMounted, ref, resolveComponent,
+ computed,
+ defineComponent,
+ h,
+ onBeforeUnmount,
+ onMounted,
+ ref,
+ resolveComponent,
} from 'vue'
import { useRouter as useVueRouter } from 'vue-router'
import type { RouteLocation, RouteLocationRaw } from 'vue-router'
import {
- hasProtocol, parseQuery, parseURL, withTrailingSlash, withoutTrailingSlash,
+ hasProtocol,
+ parseQuery,
+ parseURL,
+ withTrailingSlash,
+ withoutTrailingSlash,
} from 'ufo'
import {
- navigateTo, onNuxtReady, preloadRouteComponents, useNuxtApp, useRouter,
+ navigateTo,
+ onNuxtReady,
+ preloadRouteComponents,
+ useNuxtApp,
+ useRouter,
} from 'nuxt/app'
-const firstNonUndefined = (...args: (T | undefined)[]) => args.find(arg => arg !== undefined)
+const firstNonUndefined = (...args: (T | undefined)[]) =>
+ args.find((arg) => arg !== undefined)
const DEFAULT_EXTERNAL_REL_ATTRIBUTE = 'noopener noreferrer'
@@ -52,39 +67,62 @@ export interface NuxtLinkProps {
// Polyfills for Safari support
// https://caniuse.com/requestidlecallback
-export const requestIdleCallback: Window['requestIdleCallback'] = import.meta.server
- ? (() => {}) as any
- : (globalThis.requestIdleCallback || ((cb) => {
+export const requestIdleCallback: Window['requestIdleCallback'] = import.meta
+ .server
+ ? ((() => {}) as any)
+ : globalThis.requestIdleCallback ||
+ ((cb) => {
const start = Date.now()
const idleDeadline = {
didTimeout: false,
timeRemaining: () => Math.max(0, 50 - (Date.now() - start)),
}
- return setTimeout(() => { cb(idleDeadline) }, 1)
- }))
-
-export const cancelIdleCallback: Window['cancelIdleCallback'] = import.meta.server
- ? (() => {}) as any
- : (globalThis.cancelIdleCallback || ((id) => { clearTimeout(id) }))
+ return setTimeout(() => {
+ cb(idleDeadline)
+ }, 1)
+ })
+
+export const cancelIdleCallback: Window['cancelIdleCallback'] = import.meta
+ .server
+ ? ((() => {}) as any)
+ : globalThis.cancelIdleCallback ||
+ ((id) => {
+ clearTimeout(id)
+ })
/*! @__NO_SIDE_EFFECTS__ */
export function defineNuxtLink(options: NuxtLinkOptions) {
const componentName = options.componentName || 'NuxtLink'
- const checkPropConflicts = (props: NuxtLinkProps, main: keyof NuxtLinkProps, sub: keyof NuxtLinkProps): void => {
- if (import.meta.dev && props[main] !== undefined && props[sub] !== undefined)
- console.warn(`[${componentName}] \`${main}\` and \`${sub}\` cannot be used together. \`${sub}\` will be ignored.`)
+ const checkPropConflicts = (
+ props: NuxtLinkProps,
+ main: keyof NuxtLinkProps,
+ sub: keyof NuxtLinkProps,
+ ): void => {
+ if (
+ import.meta.dev &&
+ props[main] !== undefined &&
+ props[sub] !== undefined
+ )
+ console.warn(
+ `[${componentName}] \`${main}\` and \`${sub}\` cannot be used together. \`${sub}\` will be ignored.`,
+ )
}
const resolveTrailingSlashBehavior = (
to: RouteLocationRaw,
resolve: (to: RouteLocationRaw) => RouteLocation & { href?: string },
): RouteLocationRaw | RouteLocation => {
- if (!to || (options.trailingSlash !== 'append' && options.trailingSlash !== 'remove'))
+ if (
+ !to ||
+ (options.trailingSlash !== 'append' && options.trailingSlash !== 'remove')
+ )
return to
- const normalizeTrailingSlash = options.trailingSlash === 'append' ? withTrailingSlash : withoutTrailingSlash
- if (typeof to === 'string')
- return normalizeTrailingSlash(to, true)
+ const normalizeTrailingSlash =
+ options.trailingSlash === 'append'
+ ? withTrailingSlash
+ : withoutTrailingSlash
+ if (typeof to === 'string') return normalizeTrailingSlash(to, true)
const path = 'path' in to ? to.path : resolve(to).path
@@ -196,18 +234,17 @@ export function defineNuxtLink(options: NuxtLinkOptions) {
// Resolving link type
const isExternal = computed(() => {
// External prop is explicitly set
- if (props.external)
- return true
+ if (props.external) return true
// When `target` prop is set, link is external
- if (props.target && props.target !== '_self')
- return true
+ if (props.target && props.target !== '_self') return true
// When `to` is a route object then it's an internal link
- if (typeof to.value === 'object')
- return false
+ if (typeof to.value === 'object') return false
- return to.value === '' || hasProtocol(to.value, { acceptRelative: true })
+ return (
+ to.value === '' || hasProtocol(to.value, { acceptRelative: true })
+ )
})
// Prefetching
@@ -215,11 +252,17 @@ export function defineNuxtLink(options: NuxtLinkOptions) {
const el = import.meta.server ? undefined : ref(null)
const elRef = import.meta.server
? undefined
- : (ref: any) => { el!.value = props.custom ? ref?.$el?.nextElementSibling : ref?.$el }
+ : (ref: any) => {
+ el!.value = props.custom ? ref?.$el?.nextElementSibling : ref?.$el
+ }
if (import.meta.client) {
checkPropConflicts(props, 'prefetch', 'noPrefetch')
- const shouldPrefetch = props.prefetch !== false && props.noPrefetch !== true && props.target !== '_blank' && !isSlowConnection()
+ const shouldPrefetch =
+ props.prefetch !== false &&
+ props.noPrefetch !== true &&
+ props.target !== '_blank' &&
+ !isSlowConnection()
if (shouldPrefetch) {
const nuxtApp = useNuxtApp()
let idleId: number
@@ -229,24 +272,35 @@ export function defineNuxtLink(options: NuxtLinkOptions) {
onNuxtReady(() => {
idleId = requestIdleCallback(() => {
if (el?.value?.tagName) {
- unobserve = observer!.observe(el.value as HTMLElement, async () => {
- unobserve?.()
- unobserve = null
-
- const path = typeof to.value === 'string' ? to.value : router.resolve(to.value).fullPath
- await Promise.all([
- nuxtApp.hooks.callHook('link:prefetch', path).catch(() => {}),
- !isExternal.value && preloadRouteComponents(to.value as string, router).catch(() => {}),
- ])
- prefetched.value = true
- })
+ unobserve = observer!.observe(
+ el.value as HTMLElement,
+ async () => {
+ unobserve?.()
+ unobserve = null
+
+ const path =
+ typeof to.value === 'string'
+ ? to.value
+ : router.resolve(to.value).fullPath
+ await Promise.all([
+ nuxtApp.hooks
+ .callHook('link:prefetch', path)
+ .catch(() => {}),
+ !isExternal.value &&
+ preloadRouteComponents(
+ to.value as string,
+ router,
+ ).catch(() => {}),
+ ])
+ prefetched.value = true
+ },
+ )
}
})
})
})
onBeforeUnmount(() => {
- if (idleId)
- cancelIdleCallback(idleId)
+ if (idleId) cancelIdleCallback(idleId)
unobserve?.()
unobserve = null
})
@@ -259,7 +313,8 @@ export function defineNuxtLink(options: NuxtLinkOptions) {
ref: elRef,
to: to.value,
activeClass: props.activeClass || options.activeClass,
- exactActiveClass: props.exactActiveClass || options.exactActiveClass,
+ exactActiveClass:
+ props.exactActiveClass || options.exactActiveClass,
replace: props.replace,
ariaCurrentValue: props.ariaCurrentValue,
custom: props.custom,
@@ -269,7 +324,8 @@ export function defineNuxtLink(options: NuxtLinkOptions) {
// may render fragment or text root nodes (#14897, #19375)
if (!props.custom) {
if (prefetched.value)
- routerLinkProps.class = props.prefetchedClass || options.prefetchedClass
+ routerLinkProps.class =
+ props.prefetchedClass || options.prefetchedClass
routerLinkProps.rel = props.rel
}
@@ -284,37 +340,44 @@ export function defineNuxtLink(options: NuxtLinkOptions) {
// Resolves `to` value if it's a route location object
// converts `""` to `null` to prevent the attribute from being added as empty (`href=""`)
- const href = typeof to.value === 'object' ? router.resolve(to.value)?.href ?? null : to.value || null
+ const href =
+ typeof to.value === 'object'
+ ? router.resolve(to.value)?.href ?? null
+ : to.value || null
// Resolves `target` value
const target = props.target || null
// Resolves `rel`
checkPropConflicts(props, 'noRel', 'rel')
- const rel = (props.noRel)
+ const rel = props.noRel
? null
- // converts `""` to `null` to prevent the attribute from being added as empty (`rel=""`)
- : firstNonUndefined(props.rel, options.externalRelAttribute, href ? DEFAULT_EXTERNAL_REL_ATTRIBUTE : '') || null
+ : // converts `""` to `null` to prevent the attribute from being added as empty (`rel=""`)
+ firstNonUndefined(
+ props.rel,
+ options.externalRelAttribute,
+ href ? DEFAULT_EXTERNAL_REL_ATTRIBUTE : '',
+ ) || null
const navigate = () => navigateTo(href, { replace: props.replace })
// https://router.vuejs.org/api/#custom
if (props.custom) {
- if (!slots.default)
- return null
+ if (!slots.default) return null
return slots.default({
href,
navigate,
get route() {
- if (!href)
- return undefined
+ if (!href) return undefined
const url = parseURL(href)
return {
path: url.pathname,
fullPath: url.pathname,
- get query() { return parseQuery(url.search) },
+ get query() {
+ return parseQuery(url.search)
+ },
hash: url.hash,
// stub properties for compat with vue-router
params: {},
@@ -333,9 +396,16 @@ export function defineNuxtLink(options: NuxtLinkOptions) {
})
}
- return h('a', {
- ref: el, href, rel, target,
- }, slots.default?.())
+ return h(
+ 'a',
+ {
+ ref: el,
+ href,
+ rel,
+ target,
+ },
+ slots.default?.(),
+ )
}
},
}) as unknown as DefineComponent
@@ -348,12 +418,10 @@ type CallbackFn = () => void
type ObserveFn = (element: Element, callback: CallbackFn) => () => void
function useObserver(): { observe: ObserveFn } | undefined {
- if (import.meta.server)
- return
+ if (import.meta.server) return
const nuxtApp = useNuxtApp()
- if (nuxtApp._observer)
- return nuxtApp._observer
+ if (nuxtApp._observer) return nuxtApp._observer
let observer: IntersectionObserver | null = null
@@ -365,8 +433,7 @@ function useObserver(): { observe: ObserveFn } | undefined {
for (const entry of entries) {
const callback = callbacks.get(entry.target)
const isVisible = entry.isIntersecting || entry.intersectionRatio > 0
- if (isVisible && callback)
- callback()
+ if (isVisible && callback) callback()
}
})
}
@@ -382,20 +449,21 @@ function useObserver(): { observe: ObserveFn } | undefined {
}
}
- const _observer = nuxtApp._observer = {
+ const _observer = (nuxtApp._observer = {
observe,
- }
+ })
return _observer
}
function isSlowConnection() {
- if (import.meta.server)
- return
+ if (import.meta.server) return
// https://developer.mozilla.org/en-US/docs/Web/API/Navigator/connection
- const cn = (navigator as any).connection as { saveData: boolean; effectiveType: string } | null
- if (cn && (cn.saveData || /2g/.test(cn.effectiveType)))
- return true
+ const cn = (navigator as any).connection as {
+ saveData: boolean
+ effectiveType: string
+ } | null
+ if (cn && (cn.saveData || /2g/.test(cn.effectiveType))) return true
return false
}
diff --git a/packages/storybook-nuxt/src/runtime/plugins/storybook.ts b/packages/storybook-nuxt/src/runtime/plugins/storybook.ts
index 60473a1e..dcf16ed0 100644
--- a/packages/storybook-nuxt/src/runtime/plugins/storybook.ts
+++ b/packages/storybook-nuxt/src/runtime/plugins/storybook.ts
@@ -22,15 +22,22 @@ export default defineNuxtPlugin({
logger.log('🔌 🔌 🔌 [storybook-nuxt-plugin] setup ', { nuxtApp })
const nuxtMainApp = getContext('nuxt-app')
if (nuxtMainApp)
- logger.info('🔌 [storybook-nuxt-plugin] setup already done ', nuxtMainApp)
+ logger.info(
+ '🔌 [storybook-nuxt-plugin] setup already done ',
+ nuxtMainApp,
+ )
- if (nuxtApp.globalName !== 'nuxt')
- return
+ if (nuxtApp.globalName !== 'nuxt') return
const applyNuxtPlugins = async (vueApp: App, storyContext: any) => {
- const nuxt = createNuxtApp({ vueApp, globalName: `nuxt-${storyContext.id}` })
+ const nuxt = createNuxtApp({
+ vueApp,
+ globalName: `nuxt-${storyContext.id}`,
+ })
getContext('nuxt-app').set(nuxt, true)
- const router = nuxtApp.$router ?? createRouter({ history: createWebHistory(), routes: [] })
+ const router =
+ nuxtApp.$router ??
+ createRouter({ history: createWebHistory(), routes: [] })
nuxt.$router = router
getContext(nuxt.globalName).set(nuxt, true)
@@ -38,10 +45,12 @@ export default defineNuxtPlugin({
nuxt.hooks.callHook('app:created', vueApp)
for (const plugin of plugins) {
try {
- if (typeof plugin === 'function' && !plugin.toString().includes('definePayloadReviver'))
+ if (
+ typeof plugin === 'function' &&
+ !plugin.toString().includes('definePayloadReviver')
+ )
await vueApp.runWithContext(() => plugin(nuxt))
- }
- catch (e) {
+ } catch (e) {
logger.error('Error in plugin ', plugin)
}
}
@@ -54,7 +63,6 @@ export default defineNuxtPlugin({
},
hooks: {
- 'app:created': function () {
- },
+ 'app:created': function () {},
},
})
diff --git a/packages/storybook-nuxt/src/types.d.ts b/packages/storybook-nuxt/src/types.d.ts
index 57e1b16b..339f3dab 100644
--- a/packages/storybook-nuxt/src/types.d.ts
+++ b/packages/storybook-nuxt/src/types.d.ts
@@ -1,34 +1,40 @@
-import type { BuilderOptions, StorybookConfig as StorybookConfigBase } from '@storybook/types';
import type {
- Preview, StoryFn, StoryObj, VueRenderer, Meta, DecoratorFunction,
-} from '@storybook/vue3';
-
+ BuilderOptions,
+ StorybookConfig as StorybookConfigBase,
+} from '@storybook/types'
+import type {
+ Preview,
+ StoryFn,
+ StoryObj,
+ VueRenderer,
+ Meta,
+ DecoratorFunction,
+} from '@storybook/vue3'
-declare let STORYBOOK_VUE_GLOBAL_PLUGINS: string[];
-declare let STORYBOOK_VUE_GLOBAL_MIXINS: string[];
+declare let STORYBOOK_VUE_GLOBAL_PLUGINS: string[]
+declare let STORYBOOK_VUE_GLOBAL_MIXINS: string[]
-type FrameworkName = '@storybook-vue/nuxt';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = '@storybook-vue/nuxt'
+type BuilderName = '@storybook/builder-vite'
export type FrameworkOptions = NuxtOptions & {
- builder?: BuilderOptions;
-};
+ builder?: BuilderOptions
+}
type StorybookConfigFramework = {
framework: FrameworkName | { name: FrameworkName; options: FrameworkOptions }
core?: StorybookConfigBase['core'] & { builder?: BuilderName }
- typescript?: StorybookConfigBase['typescript'];
- previewAnnotations?: StorybookConfigBase['previewAnnotations'];
- stories?: StorybookConfigBase['stories'];
- addons?: StorybookConfigBase['addons'];
- docs?: StorybookConfigBase['docs'];
-};
+ typescript?: StorybookConfigBase['typescript']
+ previewAnnotations?: StorybookConfigBase['previewAnnotations']
+ stories?: StorybookConfigBase['stories']
+ addons?: StorybookConfigBase['addons']
+ docs?: StorybookConfigBase['docs']
+}
/**
* The interface for Storybook configuration in `main.ts` files.
*/
-export type StorybookConfig = { viteFinal?:Record } & StorybookConfigFramework;
-export interface NuxtOptions {
-}
-export {
- Meta, StoryFn, StoryObj, Preview, VueRenderer, DecoratorFunction,
-};
+export type StorybookConfig = {
+ viteFinal?: Record
+} & StorybookConfigFramework
+export interface NuxtOptions {}
+export { Meta, StoryFn, StoryObj, Preview, VueRenderer, DecoratorFunction }
diff --git a/packages/storybook-nuxt/template/cli/js/MyNuxtWelcome.stories.js b/packages/storybook-nuxt/template/cli/js/MyNuxtWelcome.stories.js
index f3828616..593dcca6 100644
--- a/packages/storybook-nuxt/template/cli/js/MyNuxtWelcome.stories.js
+++ b/packages/storybook-nuxt/template/cli/js/MyNuxtWelcome.stories.js
@@ -6,7 +6,6 @@ const meta = {
component: MyNuxtWelcome,
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
tags: ['autodocs'],
-
}
export default meta
@@ -19,5 +18,5 @@ export default meta
*/
export const NuxtWelcomeStory = {
- args: { },
+ args: {},
}
diff --git a/packages/storybook-nuxt/template/cli/js/MyWelcome.vue b/packages/storybook-nuxt/template/cli/js/MyWelcome.vue
index 9567bb25..bef07044 100644
--- a/packages/storybook-nuxt/template/cli/js/MyWelcome.vue
+++ b/packages/storybook-nuxt/template/cli/js/MyWelcome.vue
@@ -1,4 +1,4 @@
- Welcome Nuxt to Storybook :
+ Welcome Nuxt to Storybook :
diff --git a/packages/storybook-nuxt/template/cli/ts-3-8/MyNuxtWelcome.stories.ts b/packages/storybook-nuxt/template/cli/ts-3-8/MyNuxtWelcome.stories.ts
index 20dc48f3..230d73a2 100644
--- a/packages/storybook-nuxt/template/cli/ts-3-8/MyNuxtWelcome.stories.ts
+++ b/packages/storybook-nuxt/template/cli/ts-3-8/MyNuxtWelcome.stories.ts
@@ -9,7 +9,6 @@ const meta = {
component: MyNuxtWelcome,
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
tags: ['autodocs'],
-
} satisfies Meta
export default meta
diff --git a/packages/storybook-nuxt/template/cli/ts-3-8/MyWelcome.vue b/packages/storybook-nuxt/template/cli/ts-3-8/MyWelcome.vue
index e34bb41e..0619e9dd 100644
--- a/packages/storybook-nuxt/template/cli/ts-3-8/MyWelcome.vue
+++ b/packages/storybook-nuxt/template/cli/ts-3-8/MyWelcome.vue
@@ -1,4 +1,4 @@
- Welcome Nuxt to Storybook
+ Welcome Nuxt to Storybook
diff --git a/packages/storybook-nuxt/template/cli/ts-4-9/MyNuxtWelcome.stories.ts b/packages/storybook-nuxt/template/cli/ts-4-9/MyNuxtWelcome.stories.ts
index 5336248e..3b90fa02 100644
--- a/packages/storybook-nuxt/template/cli/ts-4-9/MyNuxtWelcome.stories.ts
+++ b/packages/storybook-nuxt/template/cli/ts-4-9/MyNuxtWelcome.stories.ts
@@ -9,7 +9,6 @@ const meta = {
component: MyNuxtWelcome,
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
tags: ['autodocs'],
-
} satisfies Meta
export default meta
diff --git a/packages/storybook-nuxt/template/cli/ts-4-9/MyWelcome.vue b/packages/storybook-nuxt/template/cli/ts-4-9/MyWelcome.vue
index 54810cda..d93cabbe 100644
--- a/packages/storybook-nuxt/template/cli/ts-4-9/MyWelcome.vue
+++ b/packages/storybook-nuxt/template/cli/ts-4-9/MyWelcome.vue
@@ -1,30 +1,40 @@
- Welcome Nuxt to Storybook
+ Welcome Nuxt to Storybook
diff --git a/packages/storybook-nuxt/template/cli/ts/MyNuxtWelcome.stories.ts b/packages/storybook-nuxt/template/cli/ts/MyNuxtWelcome.stories.ts
index 5336248e..3b90fa02 100644
--- a/packages/storybook-nuxt/template/cli/ts/MyNuxtWelcome.stories.ts
+++ b/packages/storybook-nuxt/template/cli/ts/MyNuxtWelcome.stories.ts
@@ -9,7 +9,6 @@ const meta = {
component: MyNuxtWelcome,
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
tags: ['autodocs'],
-
} satisfies Meta
export default meta
diff --git a/packages/storybook-nuxt/template/cli/ts/MyWelcome.vue b/packages/storybook-nuxt/template/cli/ts/MyWelcome.vue
index 54810cda..d93cabbe 100644
--- a/packages/storybook-nuxt/template/cli/ts/MyWelcome.vue
+++ b/packages/storybook-nuxt/template/cli/ts/MyWelcome.vue
@@ -1,30 +1,40 @@
- Welcome Nuxt to Storybook
+ Welcome Nuxt to Storybook
diff --git a/packages/storybook-nuxt/tsconfig.json b/packages/storybook-nuxt/tsconfig.json
index c40b8b21..3442be34 100644
--- a/packages/storybook-nuxt/tsconfig.json
+++ b/packages/storybook-nuxt/tsconfig.json
@@ -9,12 +9,8 @@
"resolveJsonModule": true,
"strict": true,
"paths": {
- "#app": [
- "./node_modules/nuxt/dist/app"
- ],
- "#app/entry": [
- "./node_modules/nuxt/dist/app/entry"
- ]
+ "#app": ["./node_modules/nuxt/dist/app"],
+ "#app/entry": ["./node_modules/nuxt/dist/app/entry"]
}
},
"include": ["src/**/*"]