feat: add story for @nuxt/fonts module

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<typeof NuxtFontsComponent>
+
+export default meta
+type Story = StoryObj<typeof meta>
+/*
+ *👇 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: {},
+}

examples/showcase/components/NuxtFonts.vue

@@ -0,0 +1,19 @@
+<template>
+  <div style="font-size: 4rem; line-height: 1">
+    <p class="font-roboto">Hamburgefonstiv</p>
+    <p class="font-manufacturing-consent">Hamburgefonstiv</p>
+    <p class="font-inter">Hamburgefonstiv</p>
+  </div>
+</template>
+
+<style scoped>
+.font-roboto {
+  font-family: 'Roboto', sans-serif;
+}
+.font-manufacturing-consent {
+  font-family: 'Manufacturing Consent', serif;
+}
+.font-inter {
+  font-family: 'Inter', sans-serif;
+}
+</style>

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'],

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",

examples/showcase/pages/modules/fonts.vue

@@ -0,0 +1,5 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <h1>@nuxt/fonts demo</h1>
+  <NuxtFonts />
+</template>

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}`,