@nuxt/docs-nightly 4.1.3-29314777.50febbbb → 4.1.3-29316215.910d159d

package/6.bridge/1.overview.md

@@ -86,7 +86,7 @@ You can use static `import`, dynamic `import()` and `export default` instead. Us
 import { defineNuxtConfig } from '@nuxt/bridge'
 
 export default defineNuxtConfig({
-  bridge: false
+  bridge: false,
 })
 ```
 

package/6.bridge/10.configuration.md

@@ -11,6 +11,7 @@ You can check [bridge/src/module.ts](https://github.com/nuxt/bridge/blob/main/pa
 
 ```ts [nuxt.config.ts]
 import { defineNuxtConfig } from '@nuxt/bridge'
+
 export default defineNuxtConfig({
   bridge: {
 
@@ -63,7 +64,7 @@ export default defineNuxtConfig({
 
   vite: {
     // Config for Vite
-  }
+  },
 })
 ```
 

package/6.bridge/2.typescript.md

@@ -16,8 +16,8 @@ import { defineNuxtConfig } from '@nuxt/bridge'
 export default defineNuxtConfig({
   bridge: {
     typescript: true,
-    nitro: false // If migration to Nitro is complete, set to true
-  }
+    nitro: false, // If migration to Nitro is complete, set to true
+  },
 })
 ```
 

package/6.bridge/3.bridge-composition-api.md

@@ -47,8 +47,8 @@ import { defineNuxtConfig } from '@nuxt/bridge'
 export default defineNuxtConfig({
   bridge: {
     capi: true,
-    nitro: false // If migration to Nitro is complete, set to true
-  }
+    nitro: false, // If migration to Nitro is complete, set to true
+  },
 })
 ```
 

package/6.bridge/4.plugins-and-middleware.md

@@ -9,8 +9,8 @@ You can now migrate to the Nuxt 3 plugins API, which is slightly different in fo
 
 Plugins now take only one argument (`nuxtApp`). You can find out more in [the docs](/docs/4.x/guide/directory-structure/plugins).
 
-```js [app/plugins/hello.ts]
-export default defineNuxtPlugin(nuxtApp => {
+```ts [app/plugins/hello.ts]
+export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.provide('injected', () => 'my injected function')
   // now available on `nuxtApp.$injected`
 })
@@ -54,9 +54,9 @@ import { defineNuxtConfig } from '@nuxt/bridge'
 export default defineNuxtConfig({
   bridge: {
     macros: {
-      pageMeta: true
-    }
-  }
+      pageMeta: true,
+    },
+  },
 })
 ```
 

package/6.bridge/5.nuxt3-compatible-api.md

@@ -73,8 +73,10 @@ You can access injected helpers using `useNuxtApp`.
 
 This helper function is not provided any more but you can replace it with the following code:
 
-```js
-const wrapProperty = (property, makeComputed = true) => () => {
+```ts
+import { computed, getCurrentInstance } from 'vue'
+
+const wrapProperty = (property: string, makeComputed = true) => () => {
   const vm = getCurrentInstance().proxy
   return makeComputed ? computed(() => vm[property]) : vm[property]
 }
@@ -136,7 +138,7 @@ In order to interact with `vue-meta`, you may use `useNuxt2Meta`, which will wor
 
 You can also pass in computed values or refs, and the meta values will be updated reactively:
 
-```ts
+```vue
 <script setup>
 const title = ref('my title')
 useNuxt2Meta({
@@ -165,10 +167,11 @@ You will also need to enable it explicitly in your `nuxt.config`:
 
 ```js
 import { defineNuxtConfig } from '@nuxt/bridge'
+
 export default defineNuxtConfig({
   bridge: {
-    meta: true
-  }
+    meta: true,
+  },
 })
 ```
 
@@ -182,7 +185,7 @@ Nuxt exposes every auto-import with the `#imports` alias that can be used to mak
 
 ```vue
 <script setup lang="ts">
-import { ref, computed } from '#imports'
+import { computed, ref } from '#imports'
 
 const count = ref(1)
 const double = computed(() => count.value * 2)
@@ -196,8 +199,8 @@ If you want to disable auto-importing composables and utilities, you can set `im
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   imports: {
-    autoImport: false
-  }
+    autoImport: false,
+  },
 })
 ```
 

package/6.bridge/6.meta.md

@@ -13,11 +13,12 @@ If you need to use the Options API, there is a `head()` method you can use when
 
 ```js
 import { defineNuxtConfig } from '@nuxt/bridge'
+
 export default defineNuxtConfig({
   bridge: {
     meta: true,
-    nitro: false // If migration to Nitro is complete, set to true
-  }
+    nitro: false, // If migration to Nitro is complete, set to true
+  },
 })
 ```
 
@@ -34,9 +35,9 @@ export default {
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: 'Meta description' }
-    ]
-  }
+      { hid: 'description', name: 'description', content: 'Meta description' },
+    ],
+  },
 }
 ```
 
@@ -48,10 +49,10 @@ export default defineNuxtConfig({
       meta: [
         { charset: 'utf-8' },
         { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-        { name: 'description', content: 'Meta description' }
-      ]
-    }
-  }
+        { name: 'description', content: 'Meta description' },
+      ],
+    },
+  },
 })
 ```
 
@@ -90,10 +91,10 @@ export default defineNuxtComponent({
     return {
       meta: [{
         name: 'description',
-        content: 'This is my page description.'
-      }]
+        content: 'This is my page description.',
+      }],
     }
-  }
+  },
 })
 </script>
 ```
@@ -110,8 +111,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>
 ```

package/6.bridge/8.nitro.md

@@ -14,8 +14,8 @@ import { defineNuxtConfig } from '@nuxt/bridge'
 
 export default defineNuxtConfig({
   bridge: {
-    nitro: true
-  }
+    nitro: true,
+  },
 })
 ```
 

package/6.bridge/9.vite.md

@@ -19,8 +19,8 @@ import { defineNuxtConfig } from '@nuxt/bridge'
 export default defineNuxtConfig({
   bridge: {
     vite: true,
-    nitro: true
-  }
+    nitro: true,
+  },
 })
 ```
 
@@ -32,6 +32,6 @@ import { defineNuxtConfig } from '@nuxt/bridge'
 export default defineNuxtConfig({
   vite: {
     // Config for Vite
-  }
+  },
 })
 ```

package/7.migration/2.configuration.md

@@ -40,8 +40,8 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
      router: {
        extendRoutes (routes) {
          //
-       }
-     }
+       },
+     },
    }
    ```
 
@@ -50,8 +50,8 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
      hooks: {
        'pages:extend' (routes) {
          //
-       }
-     }
+       },
+     },
    })
    ```
 
@@ -64,8 +64,8 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
    ```ts [Nuxt 2]
    export default {
      router: {
-       routeNameSplitter: '/'
-     }
+       routeNameSplitter: '/',
+     },
    }
    ```
 
@@ -78,8 +78,10 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
          const routeNameSplitter = '/'
          const root = createResolver(import.meta.url).resolve('./pages')
 
-         function updateName(routes) {
-           if (!routes) return
+         function updateName (routes) {
+           if (!routes) {
+             return
+           }
 
            for (const route of routes) {
              const relativePath = route.file.substring(root.length + 1)
@@ -200,10 +202,10 @@ yarn add pinia @pinia/nuxt
 Enable the module in your nuxt configuration:
 
 ```ts [nuxt.config.ts]
-import { defineNuxtConfig } from 'nuxt/config';
+import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
-  modules: ['@pinia/nuxt']
+  modules: ['@pinia/nuxt'],
 })
 ```
 
@@ -217,7 +219,7 @@ export const useMainStore = defineStore('main', {
     counter: 0,
   }),
   actions: {
-    increment() {
+    increment () {
       // `this` is the store instance
       this.counter++
     },
@@ -233,8 +235,8 @@ import { useMainStore } from '~/store'
 export default defineNuxtPlugin(({ $pinia }) => {
   return {
     provide: {
-      store: useMainStore($pinia)
-    }
+      store: useMainStore($pinia),
+    },
   }
 })
 ```
@@ -246,8 +248,8 @@ Once it's done you will need to add the following plugin to your Nuxt app:
 ```ts [app/plugins/vuex.ts]
 import store from '~/store'
 
-export default defineNuxtPlugin(nuxtApp => {
-  nuxtApp.vueApp.use(store);
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(store)
 })
 ```
 

package/7.migration/4.meta.md

@@ -31,18 +31,18 @@ Nuxt currently uses [`Unhead`](https://github.com/unjs/unhead) to manage your me
 export default {
   data: () => ({
     title: 'My App',
-    description: 'My App Description'
-  })
+    description: 'My App Description',
+  }),
   head () {
     return {
       title: this.title,
       meta: [{
         hid: 'description',
         name: 'description',
-        content: this.description
-      }]
+        content: this.description,
+      }],
     }
-  }
+  },
 }
 </script>
 ```
@@ -57,8 +57,8 @@ useHead({
   title,
   meta: [{
     name: 'description',
-    content: description
-  }]
+    content: description,
+  }],
 })
 </script>
 ```
@@ -80,10 +80,10 @@ export default {
       meta: [{
         hid: 'description',
         name: 'description',
-        content: 'My App Description'
-      }]
+        content: 'My App Description',
+      }],
     }
-  }
+  },
 }
 </script>
 ```
@@ -93,7 +93,10 @@ export default {
   <div>
     <Head>
       <Title>My App</Title>
-      <Meta name="description" content="My app description"/>
+      <Meta
+        name="description"
+        content="My app description"
+      />
     </Head>
     <!-- -->
   </div>
@@ -118,10 +121,10 @@ export default defineNuxtComponent({
     return {
       meta: [{
         name: 'description',
-        content: 'This is my page description.'
-      }]
+        content: 'This is my page description.',
+      }],
     }
-  }
+  },
 })
 </script>
 ```

package/7.migration/5.plugins-and-middleware.md

@@ -9,22 +9,22 @@ Plugins now have a different format, and take only one argument (`nuxtApp`).
 
 ::code-group
 
-```js [Nuxt 2]
+```ts [Nuxt 2]
 export default (ctx, inject) => {
   inject('injected', () => 'my injected function')
-})
+}
 ```
 
 ```ts [Nuxt 3]
-export default defineNuxtPlugin(nuxtApp => {
+export default defineNuxtPlugin((nuxtApp) => {
   // now available on `nuxtApp.$injected`
   nuxtApp.provide('injected', () => 'my injected function')
 
   // You can alternatively use this format, which comes with automatic type support
   return {
     provide: {
-      injected: () => 'my injected function'
-    }
+      injected: () => 'my injected function',
+    },
   }
 })
 ```

package/7.migration/6.pages-and-layouts.md

@@ -145,13 +145,17 @@ If you have been defining transitions for your page or layout directly in your c
 ```vue [Nuxt 2]
 <template>
   <div>
-    <NuxtChild keep-alive :keep-alive-props="{ exclude: ['modal'] }" :nuxt-child-key="$route.slug" />
+    <NuxtChild
+      keep-alive
+      :keep-alive-props="{ exclude: ['modal'] }"
+      :nuxt-child-key="$route.slug"
+    />
   </div>
 </template>
 
 <script>
 export default {
-  transition: 'page' // or { name: 'page' }
+  transition: 'page', // or { name: 'page' }
 }
 </script>
 ```
@@ -172,7 +176,7 @@ definePageMeta({
     name: 'page',
   },
   keepalive: {
-    exclude: ['modal']
+    exclude: ['modal'],
   },
 })
 </script>
@@ -202,29 +206,29 @@ Make sure to always `await` on [`navigateTo`](/docs/4.x/api/utils/navigate-to) o
 <script>
 export default {
   methods: {
-    navigate(){
+    navigate () {
       this.$router.push({
         path: '/search',
         query: {
           name: 'first name',
-          type: '1'
-        }
+          type: '1',
+        },
       })
-    }
-  }
+    },
+  },
 }
 </script>
 ```
 
 ```vue [Nuxt 3]
 <script setup lang="ts">
-function navigate(){
+function navigate () {
   return navigateTo({
     path: '/search',
     query: {
       name: 'first name',
-      type: '1'
-    }
+      type: '1',
+    },
   })
 }
 </script>

package/7.migration/7.component-options.md

@@ -30,14 +30,14 @@ In Nuxt 2, you'd fetch your data in your component using a syntax similar to:
 
 ```ts
 export default {
-  async asyncData({ params, $http }) {
+  async asyncData ({ params, $http }) {
     const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
     return { post }
   },
   // or alternatively
   fetch () {
     this.post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
-  }
+  },
 }
 ```
 
@@ -48,7 +48,7 @@ With Nuxt 3, you can perform this data fetching using composables in your `setup
 ```vue
 <script setup lang="ts">
 // Define params wherever, through `defineProps()`, `useRoute()`, etc.
-const { data: post, refresh } = await useAsyncData('post', () => $fetch(`https://api.nuxtjs.dev/posts/${params.id}`) )
+const { data: post, refresh } = await useAsyncData('post', () => $fetch(`https://api.nuxtjs.dev/posts/${params.id}`))
 // Or instead - useFetch is a convenience wrapper around useAsyncData when you're just performing a simple fetch
 const { data: post, refresh } = await useFetch(`https://api.nuxtjs.dev/posts/${params.id}`)
 </script>

package/7.migration/8.runtime-config.md

@@ -25,9 +25,9 @@ export default defineNuxtConfig({
     apiSecret: '123',
     // Config within public will be also exposed to the client
     public: {
-      apiBase: '/api'
-    }
-  }
+      apiBase: '/api',
+    },
+  },
 })
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/docs-nightly",
-  "version": "4.1.3-29314777.50febbbb",
+  "version": "4.1.3-29316215.910d159d",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",