@nuxt/docs-nightly 4.1.3-29314777.50febbbb → 4.1.3-29316225.304409da

package/1.getting-started/03.configuration.md

@@ -36,16 +36,16 @@ You can configure fully typed, per-environment overrides in your nuxt.config
 export default defineNuxtConfig({
   $production: {
     routeRules: {
-      '/**': { isr: true }
-    }
+      '/**': { isr: true },
+    },
   },
   $development: {
     //
   },
   $env: {
     staging: {
-      // 
-    }
+      //
+    },
   },
 })
 ```
@@ -75,9 +75,9 @@ export default defineNuxtConfig({
     apiSecret: '123',
     // Keys within public are also exposed client-side
     public: {
-      apiBase: '/api'
-    }
-  }
+      apiBase: '/api',
+    },
+  },
 })
 ```
 
@@ -110,9 +110,9 @@ export default defineAppConfig({
   theme: {
     dark: true,
     colors: {
-      primary: '#ff0000'
-    }
-  }
+      primary: '#ff0000',
+    },
+  },
 })
 ```
 
@@ -178,12 +178,12 @@ If you need to pass options to `@vitejs/plugin-vue` or `@vitejs/plugin-vue-jsx`,
 export default defineNuxtConfig({
   vite: {
     vue: {
-      customElement: true
+      customElement: true,
     },
     vueJsx: {
-      mergeProps: true
-    }
-  }
+      mergeProps: true,
+    },
+  },
 })
 ```
 
@@ -199,9 +199,9 @@ export default defineNuxtConfig({
     loaders: {
       vue: {
         hotReload: true,
-      }
-    }
-  }
+      },
+    },
+  },
 })
 ```
 
@@ -214,8 +214,8 @@ You may need to enable experimental features in Vue, such as `propsDestructure`.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   vue: {
-    propsDestructure: true
-  }
+    propsDestructure: true,
+  },
 })
 ```
 

package/1.getting-started/04.views.md

@@ -13,7 +13,7 @@ By default, Nuxt will treat this file as the **entrypoint** and render its conte
 ```vue [app/app.vue]
 <template>
   <div>
-   <h1>Welcome to the homepage</h1>
+    <h1>Welcome to the homepage</h1>
   </div>
 </template>
 ```

package/1.getting-started/05.assets.md

@@ -21,7 +21,10 @@ For example, referencing an image file in the `public/img/` directory, available
 
 ```vue [app/app.vue]
 <template>
-  <img src="/img/nuxt.png" alt="Discover Nuxt" />
+  <img
+    src="/img/nuxt.png"
+    alt="Discover Nuxt"
+  >
 </template>
 ```
 
@@ -39,7 +42,10 @@ For example, referencing an image file that will be processed if a build tool is
 
 ```vue [app/app.vue]
 <template>
-  <img src="~/assets/img/nuxt.png" alt="Discover Nuxt" />
+  <img
+    src="~/assets/img/nuxt.png"
+    alt="Discover Nuxt"
+  >
 </template>
 ```
 

package/1.getting-started/06.styling.md

@@ -41,7 +41,7 @@ The natural place for your stylesheets is the [`app/assets/` directory](/docs/4.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
-  css: ['~/assets/css/main.css']
+  css: ['~/assets/css/main.css'],
 })
 ```
 
@@ -113,7 +113,7 @@ The package can also be referenced as a string in the css property of your Nuxt
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
-  css: ['animate.css']
+  css: ['animate.css'],
 })
 ```
 
@@ -127,9 +127,9 @@ You can manipulate the head with the [`app.head`](/docs/4.x/api/nuxt-config#head
 export default defineNuxtConfig({
   app: {
     head: {
-      link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
-    }
-  }
+      link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }],
+    },
+  },
 })
 ```
 
@@ -141,7 +141,7 @@ You can use the useHead composable to dynamically set a value in your head in yo
 
 ```ts twoslash
 useHead({
-  link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
+  link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }],
 })
 ```
 
@@ -198,7 +198,7 @@ Alternatively, you can use the `css` property of your Nuxt configuration.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
-  css: ['~/assets/scss/main.scss']
+  css: ['~/assets/scss/main.scss'],
 })
 ```
 
@@ -234,11 +234,11 @@ export default defineNuxtConfig({
     css: {
       preprocessorOptions: {
         scss: {
-          additionalData: '@use "~/assets/_colors.scss" as *;'
-        }
-      }
-    }
-  }
+          additionalData: '@use "~/assets/_colors.scss" as *;',
+        },
+      },
+    },
+  },
 })
 ```
 
@@ -248,11 +248,11 @@ export default defineNuxtConfig({
     css: {
       preprocessorOptions: {
         sass: {
-          additionalData: '@use "~/assets/_colors.sass" as *\n'
-        }
-      }
-    }
-  }
+          additionalData: '@use "~/assets/_colors.sass" as *\n',
+        },
+      },
+    },
+  },
 })
 ```
 
@@ -267,13 +267,12 @@ Vite has made available an [experimental option](https://vite.dev/config/shared-
 You can enable this in your `nuxt.config`:
 
 ```ts
-
 export default defineNuxtConfig({
   vite: {
     css: {
-      preprocessorMaxWorkers: true // number of CPUs minus 1
-    }
-  }
+      preprocessorMaxWorkers: true, // number of CPUs minus 1
+    },
+  },
 })
 ```
 
@@ -298,14 +297,17 @@ You can leverage Vue SFC features to style your components with class and style
 const isActive = ref(true)
 const hasError = ref(false)
 const classObject = reactive({
-  active: true,
-  'text-danger': false
+  'active': true,
+  'text-danger': false,
 })
 </script>
 
 <template>
-  <div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
-  <div :class="classObject"></div>
+  <div
+    class="static"
+    :class="{ 'active': isActive, 'text-danger': hasError }"
+  />
+  <div :class="classObject" />
 </template>
 ```
 
@@ -315,13 +317,13 @@ const isActive = ref(true)
 const error = ref(null)
 
 const classObject = computed(() => ({
-  active: isActive.value && !error.value,
-  'text-danger': error.value && error.value.type === 'fatal'
+  'active': isActive.value && !error.value,
+  'text-danger': error.value && error.value.type === 'fatal',
 }))
 </script>
 
 <template>
-  <div :class="classObject"></div>
+  <div :class="classObject" />
 </template>
 ```
 
@@ -332,7 +334,7 @@ const errorClass = ref('text-danger')
 </script>
 
 <template>
-  <div :class="[{ active: isActive }, errorClass]"></div>
+  <div :class="[{ active: isActive }, errorClass]" />
 </template>
 ```
 
@@ -344,9 +346,9 @@ const styleObject = reactive({ color: 'red', fontSize: '13px' })
 </script>
 
 <template>
-  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
-  <div :style="[baseStyles, overridingStyles]"></div>
-  <div :style="styleObject"></div>
+  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }" />
+  <div :style="[baseStyles, overridingStyles]" />
+  <div :style="styleObject" />
 </template>
 ```
 
@@ -361,11 +363,13 @@ The binding will be dynamic, meaning that if the variable value changes, the sty
 
 ```vue
 <script setup lang="ts">
-const color = ref("red")
+const color = ref('red')
 </script>
 
 <template>
-  <div class="text">hello</div>
+  <div class="text">
+    hello
+  </div>
 </template>
 
 <style>
@@ -381,7 +385,9 @@ The scoped attribute allows you to style components in isolation. The styles dec
 
 ```vue
 <template>
-  <div class="example">hi</div>
+  <div class="example">
+    hi
+  </div>
 </template>
 
 <style scoped>
@@ -397,7 +403,9 @@ You can use [CSS Modules](https://github.com/css-modules/css-modules) with the m
 
 ```vue
 <template>
-  <p :class="$style.red">This should be red</p>
+  <p :class="$style.red">
+    This should be red
+  </p>
 </template>
 
 <style module>
@@ -451,9 +459,9 @@ export default defineNuxtConfig({
   postcss: {
     plugins: {
       'postcss-nested': {},
-      'postcss-custom-media': {}
-    }
-  }
+      'postcss-custom-media': {},
+    },
+  },
 })
 ```
 
@@ -558,7 +566,9 @@ export default defineNuxtConfig({
         // start from the end of the array and go to the beginning
         for (let i = css.length - 1; i >= 0; i--) {
           // if it starts with 'entry', remove it from the list
-          if (css[i].startsWith('entry')) css.splice(i, 1)
+          if (css[i].startsWith('entry')) {
+            css.splice(i, 1)
+          }
         }
       }
     },

package/1.getting-started/07.routing.md

@@ -101,7 +101,7 @@ Example of an `auth` middleware protecting the `/dashboard` page:
 ::code-group
 
 ```ts twoslash [middleware/auth.ts]
-function isAuthenticated(): boolean { return false }
+function isAuthenticated (): boolean { return false }
 // ---cut---
 export default defineNuxtRouteMiddleware((to, from) => {
   // isAuthenticated() is an example method verifying if a user is authenticated
@@ -114,7 +114,7 @@ export default defineNuxtRouteMiddleware((to, from) => {
 ```vue twoslash [pages/dashboard.vue]
 <script setup lang="ts">
 definePageMeta({
-  middleware: 'auth'
+  middleware: 'auth',
 })
 </script>
 
@@ -138,10 +138,10 @@ If you have a more complex use case, then you can use anonymous route middleware
 ```vue twoslash [pages/posts/[id\\].vue]
 <script setup lang="ts">
 definePageMeta({
-  validate: async (route) => {
+  validate (route) {
     // Check if the id is made up of digits
     return typeof route.params.id === 'string' && /^\d+$/.test(route.params.id)
-  }
+  },
 })
 </script>
 ```

package/1.getting-started/08.seo-meta.md

@@ -27,9 +27,9 @@ export default defineNuxtConfig({
       },
       link: [
         { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-      ]
-    }
-  }
+      ],
+    },
+  },
 })
 ```
 
@@ -51,8 +51,8 @@ export default defineNuxtConfig({
       // update Nuxt defaults
       charset: 'utf-16',
       viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
-    }
-  }
+    },
+  },
 })
 ```
 
@@ -65,12 +65,12 @@ The [`useHead`](/docs/4.x/api/composables/use-head) composable function supports
 useHead({
   title: 'My App',
   meta: [
-    { name: 'description', content: 'My amazing site.' }
+    { name: 'description', content: 'My amazing site.' },
   ],
   bodyAttrs: {
-    class: 'test'
+    class: 'test',
   },
-  script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
+  script: [{ innerHTML: 'console.log(\'Hello world\')' }],
 })
 </script>
 ```
@@ -118,9 +118,12 @@ const title = ref('Hello World')
   <div>
     <Head>
       <Title>{{ title }}</Title>
-      <Meta name="description" :content="title" />
+      <Meta
+        name="description"
+        :content="title"
+      />
       <Style>
-      body { background-color: green; }
+        body { background-color: green; }
       </Style>
     </Head>
 
@@ -145,9 +148,9 @@ interface MetaObject {
   meta?: Meta[]
   style?: Style[]
   script?: Script[]
-  noscript?: Noscript[];
-  htmlAttrs?: HtmlAttributes;
-  bodyAttrs?: BodyAttributes;
+  noscript?: Noscript[]
+  htmlAttrs?: HtmlAttributes
+  bodyAttrs?: BodyAttributes
 }
 ```
 
@@ -167,7 +170,7 @@ Reactivity is supported on all properties, by providing a computed value, a gett
 
   useHead({
     meta: [
-      { name: 'description', content: description }
+      { name: 'description', content: description },
     ],
   })
   </script>
@@ -178,7 +181,7 @@ Reactivity is supported on all properties, by providing a computed value, a gett
   const description = ref('My amazing site.')
 
   useSeoMeta({
-    description
+    description,
   })
   </script>
   ```
@@ -190,7 +193,10 @@ Reactivity is supported on all properties, by providing a computed value, a gett
 
   <template>
     <div>
-      <Meta name="description" :content="description" />
+      <Meta
+        name="description"
+        :content="description"
+      />
     </div>
   </template>
   ```
@@ -211,8 +217,8 @@ If you want to use a function (for full control), then this cannot be set in you
   <script setup lang="ts">
   useHead({
     titleTemplate: (titleChunk) => {
-      return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
-    }
+      return titleChunk ? `${titleChunk} - Site Title` : 'Site Title'
+    },
   })
   </script>
   ```
@@ -231,12 +237,12 @@ You can use `templateParams` to provide additional placeholders in your `titleTe
   <script setup lang="ts">
   useHead({
     titleTemplate: (titleChunk) => {
-      return titleChunk ? `${titleChunk} %separator %siteName` : '%siteName';
+      return titleChunk ? `${titleChunk} %separator %siteName` : '%siteName'
     },
     templateParams: {
       siteName: 'Site Title',
-      separator: '-'
-    }
+      separator: '-',
+    },
   })
   </script>
   ```
@@ -256,9 +262,9 @@ useHead({
     {
       src: 'https://third-party-script.com',
       // valid options are: 'head' | 'bodyClose' | 'bodyOpen'
-      tagPosition: 'bodyClose'
-    }
-  ]
+      tagPosition: 'bodyClose',
+    },
+  ],
 })
 </script>
 ```
@@ -274,7 +280,7 @@ For example, you can first set the current page title (this is extracted at buil
 ```vue twoslash [pages/some-page.vue]
 <script setup lang="ts">
 definePageMeta({
-  title: 'Some Page'
+  title: 'Some Page',
 })
 </script>
 ```
@@ -286,7 +292,7 @@ And then in your layout file, you might use the route's metadata you have previo
 const route = useRoute()
 
 useHead({
-  meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }]
+  meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }],
 })
 </script>
 ```
@@ -317,7 +323,7 @@ useHead({
     return productCategory
       ? `${productCategory} - Site Title`
       : 'Site Title'
-  }
+  },
 })
 </script>
 ```
@@ -336,14 +342,14 @@ The example below shows how you might enable Google Fonts using either the `link
     link: [
       {
         rel: 'preconnect',
-        href: 'https://fonts.googleapis.com'
+        href: 'https://fonts.googleapis.com',
       },
       {
         rel: 'stylesheet',
         href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
-        crossorigin: ''
-      }
-    ]
+        crossorigin: '',
+      },
+    ],
   })
   </script>
   ```
@@ -351,8 +357,15 @@ The example below shows how you might enable Google Fonts using either the `link
   ```vue [app/Components]
   <template>
     <div>
-      <Link rel="preconnect" href="https://fonts.googleapis.com" />
-      <Link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" crossorigin="" />
+      <Link
+        rel="preconnect"
+        href="https://fonts.googleapis.com"
+      />
+      <Link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
+        crossorigin=""
+      />
     </div>
   </template>
   ```