diff --git a/examples/showcase/components/NuxtFonts.stories.ts b/examples/showcase/components/NuxtFonts.stories.ts new file mode 100644 index 00000000..49615ea7 --- /dev/null +++ b/examples/showcase/components/NuxtFonts.stories.ts @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from '@nuxtjs/storybook' + +import NuxtFontsComponent from './NuxtFonts.vue' + +// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction + +const meta = { + title: 'Modules/Nuxt Fonts', + component: NuxtFontsComponent, + // 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 +type Story = StoryObj +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/vue/api/csf + * to learn how to use render functions. + */ + +export const NuxtFonts: Story = { + args: {}, +} diff --git a/examples/showcase/components/NuxtFonts.vue b/examples/showcase/components/NuxtFonts.vue new file mode 100644 index 00000000..1c379cd4 --- /dev/null +++ b/examples/showcase/components/NuxtFonts.vue @@ -0,0 +1,19 @@ + + + diff --git a/examples/showcase/nuxt.config.ts b/examples/showcase/nuxt.config.ts index 39ed8735..85c1b17d 100644 --- a/examples/showcase/nuxt.config.ts +++ b/examples/showcase/nuxt.config.ts @@ -1,7 +1,21 @@ // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ devtools: { enabled: true }, - modules: ['@nuxtjs/storybook', '@nuxt/image', '@pinia/nuxt', '@nuxtjs/i18n'], + modules: [ + '@nuxtjs/storybook', + '@nuxt/image', + '@pinia/nuxt', + '@nuxtjs/i18n', + '@nuxt/fonts', + ], + + fonts: { + families: [ + // { name: 'Roboto', provider: 'google' }, + // { name: 'Manufacturing Consent', provider: 'google' }, + // { name: 'Inter', provider: 'google' }, + ], + }, pinia: { autoImports: ['defineStore', 'acceptHMRUpdate'], diff --git a/examples/showcase/package.json b/examples/showcase/package.json index 4e0cb7fc..10b201f6 100644 --- a/examples/showcase/package.json +++ b/examples/showcase/package.json @@ -11,6 +11,7 @@ "build-storybook": "storybook build" }, "dependencies": { + "@nuxt/fonts": "0.11.4", "@nuxt/image": "1.11.0", "@nuxtjs/i18n": "10.0.6", "@pinia/nuxt": "0.11.2", diff --git a/examples/showcase/pages/modules/fonts.vue b/examples/showcase/pages/modules/fonts.vue new file mode 100644 index 00000000..a9875acc --- /dev/null +++ b/examples/showcase/pages/modules/fonts.vue @@ -0,0 +1,5 @@ + + diff --git a/packages/storybook-addon/src/preset.ts b/packages/storybook-addon/src/preset.ts index d84b64b9..c629463e 100644 --- a/packages/storybook-addon/src/preset.ts +++ b/packages/storybook-addon/src/preset.ts @@ -368,7 +368,8 @@ async function getPackageDir(packageName: string) { export function getNuxtProxyConfig(nuxt: Nuxt) { const port = nuxt.options.runtimeConfig.app.port ?? 3000 - const route = '^/(_nuxt|_ipx|api/_nuxt_icon|__nuxt_devtools__|__nuxt_island)' + const route = + '^/(_nuxt|_fonts|_ipx|api/_nuxt_icon|__nuxt_devtools__|__nuxt_island)' const proxy = { [route]: { target: `http://localhost:${port}`, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5070ee8e..e4d25f23 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -70,7 +70,7 @@ importers: version: 1.2.30 '@nuxt/content': specifier: 3.6.3 - version: 3.6.3(better-sqlite3@12.2.0)(magicast@0.3.5)(vue-component-type-helpers@3.1.0) + version: 3.6.3(better-sqlite3@12.2.0)(magicast@0.3.5)(vue-component-type-helpers@3.1.1) '@nuxt/image': specifier: 1.11.0 version: 1.11.0(@netlify/blobs@9.1.2)(db0@0.3.2(better-sqlite3@12.2.0))(ioredis@5.6.1)(magicast@0.3.5) @@ -111,6 +111,9 @@ importers: examples/showcase: dependencies: + '@nuxt/fonts': + specifier: 0.11.4 + version: 0.11.4(@netlify/blobs@9.1.2)(db0@0.3.2(better-sqlite3@12.2.0))(encoding@0.1.13)(ioredis@5.6.1)(magicast@0.3.5)(vite@7.1.4(@types/node@22.18.1)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.77.7)(terser@5.31.6)(yaml@2.8.0)) '@nuxt/image': specifier: 1.11.0 version: 1.11.0(@netlify/blobs@9.1.2)(db0@0.3.2(better-sqlite3@12.2.0))(ioredis@5.6.1)(magicast@0.3.5) @@ -8230,8 +8233,8 @@ packages: vue-component-type-helpers@2.2.8: resolution: {integrity: sha512-4bjIsC284coDO9om4HPA62M7wfsTvcmZyzdfR0aUlFXqq4tXxM1APyXpNVxPC8QazKw9OhmZNHBVDA6ODaZsrA==} - vue-component-type-helpers@3.1.0: - resolution: {integrity: sha512-cC1pYNRZkSS1iCvdlaMbbg2sjDwxX098FucEjtz9Yig73zYjWzQsnMe5M9H8dRNv55hAIDGUI29hF2BEUA4FMQ==} + vue-component-type-helpers@3.1.1: + resolution: {integrity: sha512-B0kHv7qX6E7+kdc5nsaqjdGZ1KwNKSUQDWGy7XkTYT7wFsOpkEyaJ1Vq79TjwrrtuLRgizrTV7PPuC4rRQo+vw==} vue-demi@0.14.10: resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==} @@ -9630,7 +9633,7 @@ snapshots: transitivePeerDependencies: - magicast - '@nuxt/content@3.6.3(better-sqlite3@12.2.0)(magicast@0.3.5)(vue-component-type-helpers@3.1.0)': + '@nuxt/content@3.6.3(better-sqlite3@12.2.0)(magicast@0.3.5)(vue-component-type-helpers@3.1.1)': dependencies: '@nuxt/kit': 3.19.0(magicast@0.3.5) '@nuxtjs/mdc': 0.17.0(magicast@0.3.5) @@ -9658,7 +9661,7 @@ snapshots: micromatch: 4.0.8 minimark: 0.2.0 minimatch: 10.0.3 - nuxt-component-meta: 0.12.1(magicast@0.3.5)(vue-component-type-helpers@3.1.0) + nuxt-component-meta: 0.12.1(magicast@0.3.5)(vue-component-type-helpers@3.1.1) nypm: 0.6.1 ohash: 2.0.11 pathe: 2.0.3 @@ -10184,7 +10187,7 @@ snapshots: unplugin-auto-import: 19.3.0(@nuxt/kit@4.0.3(magicast@0.3.5))(@vueuse/core@13.8.0(vue@3.5.21(typescript@5.9.2))) unplugin-vue-components: 28.8.0(@babel/parser@7.28.3)(@nuxt/kit@4.0.3(magicast@0.3.5))(vue@3.5.21(typescript@5.9.2)) vaul-vue: 0.4.1(reka-ui@2.5.0(typescript@5.9.2)(vue@3.5.21(typescript@5.9.2)))(vue@3.5.21(typescript@5.9.2)) - vue-component-type-helpers: 3.1.0 + vue-component-type-helpers: 3.1.1 optionalDependencies: vue-router: 4.5.1(vue@3.5.21(typescript@5.9.2)) zod: 3.25.76 @@ -11257,7 +11260,7 @@ snapshots: storybook: 9.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.1.4(@types/node@22.18.1)(jiti@2.5.1)(lightningcss@1.30.1)(sass@1.77.7)(terser@5.31.6)(yaml@2.8.0)) type-fest: 2.19.0 vue: 3.5.21(typescript@5.9.2) - vue-component-type-helpers: 3.1.0 + vue-component-type-helpers: 3.1.1 '@stylistic/eslint-plugin@5.2.3(eslint@9.35.0(jiti@2.5.1))': dependencies: @@ -15417,7 +15420,7 @@ snapshots: dependencies: boolbase: 1.0.0 - nuxt-component-meta@0.12.1(magicast@0.3.5)(vue-component-type-helpers@3.1.0): + nuxt-component-meta@0.12.1(magicast@0.3.5)(vue-component-type-helpers@3.1.1): dependencies: '@nuxt/kit': 3.19.0(magicast@0.3.5) citty: 0.1.6 @@ -15426,7 +15429,7 @@ snapshots: scule: 1.3.0 typescript: 5.9.2 ufo: 1.6.1 - vue-component-meta: 3.0.1(typescript@5.9.2)(vue-component-type-helpers@3.1.0) + vue-component-meta: 3.0.1(typescript@5.9.2)(vue-component-type-helpers@3.1.1) transitivePeerDependencies: - magicast - vue-component-type-helpers @@ -18317,17 +18320,17 @@ snapshots: optionalDependencies: typescript: 5.9.2 - vue-component-meta@3.0.1(typescript@5.9.2)(vue-component-type-helpers@3.1.0): + vue-component-meta@3.0.1(typescript@5.9.2)(vue-component-type-helpers@3.1.1): dependencies: '@volar/typescript': 2.4.17 '@vue/language-core': 3.0.1(typescript@5.9.2) path-browserify: 1.0.1 typescript: 5.9.2 - vue-component-type-helpers: 3.1.0 + vue-component-type-helpers: 3.1.1 vue-component-type-helpers@2.2.8: {} - vue-component-type-helpers@3.1.0: {} + vue-component-type-helpers@3.1.1: {} vue-demi@0.14.10(vue@3.5.21(typescript@5.9.2)): dependencies: