docs: standardize indentation and tag positioning (#22157)

docs/1.getting-started/3.configuration.md

@@ -81,7 +81,7 @@ NUXT_API_SECRET=api_secret_token
 These variables are exposed to the rest of your application using the [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) composable.
 
 ```vue [pages/index.vue]
-<script setup>
+<script setup lang="ts">
 const runtimeConfig = useRuntimeConfig()
 </script>
 ```
@@ -109,7 +109,7 @@ export default defineAppConfig({
 These variables are exposed to the rest of your application using the [`useAppConfig`](/docs/api/composables/use-app-config) composable.
 
 ```vue [pages/index.vue]
-<script setup>
+<script setup lang="ts">
 const appConfig = useAppConfig()
 </script>
 ```

docs/1.getting-started/4.styling.md

@@ -255,7 +255,7 @@ You can leverage Vue SFC features to style your components with class and style
 ::code-group
 
 ```vue [Ref and Reactive]
-<script setup>
+<script setup lang="ts">
 const isActive = ref(true)
 const hasError = ref(false)
 const classObject = reactive({
@@ -263,12 +263,15 @@ const classObject = reactive({
   'text-danger': false
 })
 </script>
-<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
-<div :class="classObject"></div>
+
+<template>
+  <div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
+  <div :class="classObject"></div>
+</template>
 ```
 
 ```vue [Computed]
-<script setup>
+<script setup lang="ts">
 const isActive = ref(true)
 const error = ref(null)
 
@@ -277,13 +280,14 @@ const classObject = computed(() => ({
   'text-danger': error.value && error.value.type === 'fatal'
 }))
 </script>
+
 <template>
   <div :class="classObject"></div>
 </template>
 ```
 
 ```vue [Array]
-<script setup> 
+<script setup lang="ts"> 
 const isActive = ref(true)
 const errorClass = ref('text-danger')
 </script>
@@ -294,7 +298,7 @@ const errorClass = ref('text-danger')
 ```
 
 ```vue [Style]
-<script setup>
+<script setup lang="ts">
 const activeColor = ref('red')
 const fontSize = ref(30)
 const styleObject = reactive({ color: 'red', fontSize: '13px' })
@@ -317,7 +321,7 @@ You can reference JavaScript variable and expression within your style blocks wi
 The binding will be dynamic, meaning that if the variable value changes, the style will be updated.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 const color = ref("red")
 </script>
 

docs/1.getting-started/5.routing.md

@@ -72,7 +72,7 @@ When a `<NuxtLink>` enters the viewport on the client side, Nuxt will automatica
 The `useRoute()` composable can be used in a `<script setup>` block or a `setup()` method of a Vue component to access the current route details.
 
 ```vue [pages/posts/[id].vue]
-<script setup>
+<script setup lang="ts">
 const route = useRoute()
 
 // When accessing /posts/1, route.params.id will be 1
@@ -110,7 +110,7 @@ export default defineNuxtRouteMiddleware((to, from) => {
 ```
 
 ```html [pages/dashboard.vue]
-<script setup>
+<script setup lang="ts">
 definePageMeta({
   middleware: 'auth'
 })
@@ -134,7 +134,7 @@ The `validate` property accepts the `route` as an argument. You can return a boo
 If you have a more complex use case, then you can use anonymous route middleware instead.
 
 ```vue [pages/posts/[id].vue]
-<script setup>
+<script setup lang="ts">
 definePageMeta({
   validate: async (route) => {
     // Check if the id is made up of digits

docs/1.getting-started/5.seo-meta.md

@@ -89,7 +89,7 @@ Because these component names match native HTML elements, it is very important t
 <!-- @case-police-ignore html -->
 
 ```vue [app.vue]
-<script setup>
+<script setup lang="ts">
 const title = ref('Hello World')
 </script>
 
@@ -161,7 +161,7 @@ It's recommended to use getters (`() => value`) over computed (`computed(() => v
   ```
 
   ```vue [Components]
-  <script setup>
+  <script setup lang="ts">
   const description = ref('My amazing site.')
   </script>
   
@@ -227,7 +227,7 @@ Within your [`pages/` directory](/docs/guide/directory-structure/pages), you can
 For example, you can first set the current page title (this is extracted at build time via a macro, so it can't be set dynamically):
 
 ```vue{}[pages/some-page.vue]
-<script setup>
+<script setup lang="ts">
 definePageMeta({
   title: 'Some Page'
 })
@@ -237,7 +237,7 @@ definePageMeta({
 And then in your layout file, you might use the route's metadata you have previously set:
 
 ```vue{}[layouts/default.vue]
-<script setup>
+<script setup lang="ts">
 const route = useRoute()
 
 useHead({
@@ -255,7 +255,7 @@ useHead({
 In the example below, `titleTemplate` is set either as a string with the `%s` placeholder or as a `function`, which allows greater flexibility in setting the page title dynamically for each route of your Nuxt app:
 
 ```vue [app.vue]
-<script setup>
+<script setup lang="ts">
 useHead({
   // as a string,
   // where `%s` is replaced with the title

docs/1.getting-started/6.data-fetching.md

@@ -46,7 +46,7 @@ These composables are auto-imported and can be used in `setup` functions or life
 [`useFetch`](/docs/api/composables/use-fetch) is the most straightforward way to perform data fetching. It is a wrapper around the [`useAsyncData`](/docs/api/composables/use-async-data) composable and `$fetch` utility.
 
 ```vue [app.vue]
-<script setup>
+<script setup lang="ts">
 const { data: count } = await useFetch('/api/count')
 </script>
 
@@ -116,6 +116,12 @@ The first argument of [`useAsyncData`](/docs/api/composables/use-async-data) is
 By default, data fetching composables will wait for the resolution of their asynchronous function before navigating to a new page by using Vue’s Suspense. This feature can be ignored on client-side navigation with the `lazy` option. In that case, you will have to manually handle loading state using the `pending` value.
 
 ```vue [app.vue]
+<script setup lang="ts">
+const { pending, data: posts } = useFetch('/api/posts', {
+  lazy: true
+})
+</script>
+
 <template>
   <!-- you will need to handle a loading state -->
   <div v-if="pending">
@@ -127,11 +133,6 @@ By default, data fetching composables will wait for the resolution of their asyn
     </div>
   </div>
 </template>
-<script setup>
-const { pending, data: posts } = useFetch('/api/posts', {
-  lazy: true
-})
-</script>
 ```
 
 You can alternatively use [`useLazyFetch`](/docs/api/composables/use-lazy-fetch) and `useLazyAsyncData` as convenient methods to perform the same.
@@ -163,7 +164,7 @@ const { pending, data: posts } = useFetch('/api/comments', {
 The `pick` option helps you to minimize the payload size stored in your HTML document by only selecting the fields that you want returned from the composables.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 /* only pick the fields used in your template */
 const { data: mountain } = await useFetch('/api/mountains/everest', { pick: ['title', 'description'] })
 </script>
@@ -202,15 +203,15 @@ To get the cached data by key, you can use [`useNuxtData`](/docs/api/composables
 If you want to fetch or refresh data manually, use the `execute` or `refresh` function provided by the composables. (`execute` is an alias for `refresh` that works in exactly the same way but is more semantic for cases when `immediate: false`).
 
 ```vue
-<script setup>
+<script setup lang="ts">
 const { data, error, execute, refresh } = await useFetch('/api/users')
 </script>
 
 <template>
-<div>
-  <p>{{ data }}</p>
-  <button @click="refresh">Refresh data</button>
-</div>
+  <div>
+    <p>{{ data }}</p>
+    <button @click="refresh">Refresh data</button>
+  </div>
 </template>
 ```
 
@@ -242,7 +243,7 @@ We can use [`useRequestHeaders`](/docs/api/composables/use-request-headers) to a
 The example below adds the request headers to an isomorphic `$fetch` call to ensure that the API endpoint has access to the same `cookie` header originally sent by the user.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 const headers = useRequestHeaders(['cookie'])
 const { data } = await useFetch('/api/me', { headers })
 </script>

docs/1.getting-started/7.state-management.md

@@ -36,7 +36,7 @@ Instead use `const useX = () => useState('x')`
 In this example, we use a component-local counter state. Any other component that uses `useState('counter')` shares the same reactive state.
 
 ```vue [app.vue]
-<script setup>
+<script setup lang="ts">
 const counter = useState('counter', () => Math.round(Math.random() * 1000))
 </script>
 
@@ -108,7 +108,7 @@ export const useLocaleDate = (date: Ref<Date> | Date, locale = useLocale()) => {
 ```
 
 ```vue [app.vue]
-<script setup>
+<script setup lang="ts">
 const locales = useLocales()
 const locale = useLocale()
 const date = useLocaleDate(new Date('2016-10-26'))
@@ -141,7 +141,7 @@ export const useColor = () => useState<string>('color', () => 'pink')
 ```
 
 ```vue [app.vue]
-<script setup>
+<script setup lang="ts">
 const color = useColor() // Same as useState('color')
 </script>
 

docs/1.getting-started/8.error-handling.md

@@ -74,17 +74,17 @@ If you are running on Node 16 and you set any cookies when rendering your error
 ### Example
 
 ```vue [error.vue]
-<template>
-  <button @click="handleError">Clear errors</button>
-</template>
-
-<script setup>
+<script setup lang="ts">
 const props = defineProps({
   error: Object
 })
 
 const handleError = () => clearError({ redirect: '/' })
 </script>
+
+<template>
+  <button @click="handleError">Clear errors</button>
+</template>
 ```
 
 ## Error Helper Methods
@@ -112,7 +112,7 @@ If you throw an error created with `createError`:
 ### Example
 
 ```vue [pages/movies/[slug].vue]
-<script setup>
+<script setup lang="ts">
 const route = useRoute()
 const { data } = await useFetch(`/api/movies/${route.params.slug}`)
 if (!data.value) {

docs/2.guide/1.concepts/1.auto-imports.md

@@ -30,9 +30,9 @@ You can also auto-import functions exported from custom folders or third-party p
 Nuxt auto-imports functions and composables to perform [data fetching](/docs/getting-started/data-fetching), get access to the [app context](/docs/api/composables/use-nuxt-app) and [runtime config](/docs/guide/going-further/runtime-config), manage [state](/docs/getting-started/state-management) or define components and plugins.
 
 ```vue
-<script setup>
-  /* useAsyncData() and $fetch() are auto-imported */
-  const { data, refresh, pending } = await useAsyncData('/api/hello', () => $fetch('/api/hello'))
+<script setup lang="ts">
+/* useAsyncData() and $fetch() are auto-imported */
+const { data, refresh, pending } = await useAsyncData('/api/hello', () => $fetch('/api/hello'))
 </script>
 ```
 
@@ -41,10 +41,10 @@ Nuxt auto-imports functions and composables to perform [data fetching](/docs/get
 Vue 3 exposes Reactivity APIs like `ref` or `computed`, as well as lifecycle hooks and helpers that are auto-imported by Nuxt.
 
 ```vue
-<script setup>
-  /* ref() and computed() are auto-imported */
-  const count = ref(1)
-  const double = computed(() => count.value * 2)
+<script setup lang="ts">
+/* ref() and computed() are auto-imported */
+const count = ref(1)
+const double = computed(() => count.value * 2)
 </script>
 ```
 
@@ -103,11 +103,11 @@ Nuxt directly auto-imports files created in defined directories:
 Nuxt exposes every auto-import with the `#imports` alias that can be used to make the import explicit if needed:
 
 ```vue
-<script setup>
-  import { ref, computed } from '#imports'
+<script setup lang="ts">
+import { ref, computed } from '#imports'
 
-  const count = ref(1)
-  const double = computed(() => count.value * 2)
+const count = ref(1)
+const double = computed(() => count.value * 2)
 </script>
 ```
 

docs/2.guide/1.concepts/2.vuejs-development.md

@@ -94,9 +94,9 @@ The [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html) i
 Used with the `setup` keyword in the `<script>` definition, here is the above component rewritten with Composition API and Nuxt 3’s auto-imported Reactivity APIs:
 
 ```vue
-<script setup>
-  const count = ref(0);
-  const increment = () => count.value++;
+<script setup lang="ts">
+const count = ref(0);
+const increment = () => count.value++;
 </script>
 ```
 

docs/2.guide/2.directory-structure/1.components.md

@@ -103,13 +103,13 @@ If you want to use the Vue `<component :is="someComputedComponent">` syntax, the
 For example:
 
 ```vue
+<script setup lang="ts">
+const MyButton = resolveComponent('MyButton')
+</script>
+
 <template>
   <component :is="clickable ? MyButton : 'div'" />
 </template>
-
-<script setup>
-const MyButton = resolveComponent('MyButton')
-</script>
 ```
 
 ::alert{type=warning}
@@ -150,14 +150,6 @@ To dynamically import a component (also known as lazy-loading a component) all y
 This is particularly useful if the component is not always needed. By using the `Lazy` prefix you can delay loading the component code until the right moment, which can be helpful for optimizing your JavaScript bundle size.
 
 ```html [pages/index.vue]
-<template>
-  <div>
-    <h1>Mountains</h1>
-    <LazyMountainsList v-if="show" />
-    <button v-if="!show" @click="show = true">Show List</button>
-  </div>
-</template>
-
 <script>
 export default {
   data() {
@@ -167,6 +159,14 @@ export default {
   }
 }
 </script>
+
+<template>
+  <div>
+    <h1>Mountains</h1>
+    <LazyMountainsList v-if="show" />
+    <button v-if="!show" @click="show = true">Show List</button>
+  </div>
+</template>
 ```
 
 ## Direct Imports
@@ -174,6 +174,11 @@ export default {
 You can also explicitly import components from `#components` if you want or need to bypass Nuxt's auto-importing functionality.
 
 ```html [pages/index.vue]
+<script setup lang="ts">
+import { NuxtLink, LazyMountainsList } from '#components'
+const show = ref(false)
+</script>
+
 <template>
   <div>
     <h1>Mountains</h1>
@@ -182,11 +187,6 @@ You can also explicitly import components from `#components` if you want or need
     <NuxtLink to="/">Home</NuxtLink>
   </div>
 </template>
-
-<script setup>
-  import { NuxtLink, LazyMountainsList } from '#components'
-  const show = ref(false)
-</script>
 ```
 
 ## `<ClientOnly>` Component

docs/2.guide/2.directory-structure/1.composables.md

@@ -35,15 +35,15 @@ export default function () {
 **Usage:** You can now use auto imported composable in `.js`, `.ts` and `.vue` files
 
 ```vue [app.vue]
+<script setup lang="ts">
+const foo = useFoo()
+</script>
+
 <template>
   <div>
     {{ foo }}
   </div>
 </template>
-
-<script setup>
-const foo = useFoo()
-</script>
 ```
 
 ::LinkExample{link="/docs/examples/features/auto-imports"}

docs/2.guide/2.directory-structure/1.layouts.md

@@ -53,16 +53,16 @@ If you use a `app.vue` you will also need to add `<NuxtLayout>`:
 You can directly override the default layout like this:
 
 ```vue{}[app.vue]
+<script setup lang="ts">
+// You might choose this based on an API call or logged-in status
+const layout = "custom";
+</script>
+
 <template>
   <NuxtLayout :name="layout">
     <NuxtPage />
   </NuxtLayout>
 </template>
-
-<script setup>
-// You might choose this based on an API call or logged-in status
-const layout = "custom";
-</script>
 ```
 
 Alternatively, you can override the default layout per-page like this:
@@ -115,13 +115,7 @@ Learn more about [defining page meta](/docs/guide/directory-structure/pages#page
 You can also use a ref or computed property for your layout.
 
 ```vue
-<template>
-  <div>
-    <button @click="enableCustomLayout">Update layout</button>
-  </div>
-</template>
-
-<script setup>
+<script setup lang="ts">
 function enableCustomLayout () {
   setPageLayout('custom')
 }
@@ -129,6 +123,12 @@ definePageMeta({
   layout: false,
 });
 </script>
+
+<template>
+  <div>
+    <button @click="enableCustomLayout">Update layout</button>
+  </div>
+</template>
 ```
 
 ::LinkExample{link="/docs/examples/features/layouts"}
@@ -141,6 +141,12 @@ If you are using the `~/pages` integration, you can take full control by setting
 ::code-group
 
 ```vue [pages/index.vue]
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+</script>
+
 <template>
   <div>
     <NuxtLayout name="custom">
@@ -150,12 +156,6 @@ If you are using the `~/pages` integration, you can take full control by setting
     </NuxtLayout>
   </div>
 </template>
-
-<script setup>
-definePageMeta({
-  layout: false,
-});
-</script>
 ```
 
 ```vue [layouts/custom.vue]

docs/2.guide/2.directory-structure/1.middleware.md

@@ -80,7 +80,7 @@ middleware/
 ```
 
 ```vue [pages/profile.vue]
-<script setup>
+<script setup lang="ts">
 definePageMeta({
   middleware: [
     function (to, from) {
@@ -160,7 +160,7 @@ export default defineNuxtPlugin(() => {
 In your page file, you can reference this route middleware
 
 ```vue
-<script setup>
+<script setup lang="ts">
 definePageMeta({
   middleware: ["auth"]
   // or middleware: 'auth'

docs/2.guide/2.directory-structure/1.pages.md

@@ -125,7 +125,7 @@ Navigating to `/users-admins/123` would render:
 If you want to access the route using Composition API, there is a global [`useRoute`](/docs/api/composables/use-route) function that will allow you to access the route just like `this.$route` in the Options API.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 const route = useRoute()
 
 if (route.params.group === 'admins' && !route.params.id) {
@@ -209,7 +209,7 @@ If you want more control over when the `<NuxtPage>` component is re-rendered (fo
 Or alternatively:
 
 ```html{}[pages/child.vue]
-<script setup>
+<script setup lang="ts">
 definePageMeta({
   key: route => route.fullPath
 })
@@ -224,7 +224,7 @@ definePageMeta({
 You might want to define metadata for each route in your app. You can do this using the `definePageMeta` macro, which will work both in `<script>` and in `<script setup>`:
 
 ```vue
-<script setup>
+<script setup lang="ts">
 definePageMeta({
   title: 'My home page'
 })
@@ -234,7 +234,7 @@ definePageMeta({
 This data can then be accessed throughout the rest of your app from the `route.meta` object.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 const route = useRoute()
 
 console.log(route.meta.title) // My home page
@@ -246,7 +246,7 @@ If you are using nested routes, the page metadata from all these routes will be
 Much like `defineEmits` or `defineProps` (see [Vue docs](https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits)), `definePageMeta` is a **compiler macro**. It will be compiled away so you cannot reference it within your component. Instead, the metadata passed to it will be hoisted out of the component. Therefore, the page meta object cannot reference the component (or values defined on the component). However, it can reference imported bindings.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 import { someData } from '~/utils/example'
 
 const title = ref('')
@@ -340,7 +340,7 @@ Nuxt 3 allows programmatic navigation through the `navigateTo()` utility method.
 **Note:** Ensure to always `await` on `navigateTo` or chain its result by returning from functions.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 const name = ref('');
 const type = ref(1);
 

docs/2.guide/2.directory-structure/1.plugins.md

@@ -136,16 +136,16 @@ export default defineNuxtPlugin(() => {
 In another file you can use this:
 
 ```vue
+<script setup lang="ts">
+// alternatively, you can also use it here
+const { $hello } = useNuxtApp()
+</script>
+
 <template>
   <div>
     {{ $hello('world') }}
   </div>
 </template>
-
-<script setup lang="ts">
-// alternatively, you can also use it here
-const { $hello } = useNuxtApp()
-</script>
 ```
 
 ## Typing Plugins

docs/2.guide/2.directory-structure/1.server.md

@@ -29,7 +29,7 @@ export default defineEventHandler((event) => {
 You can now universally call this API in your pages and components:
 
 ```vue [pages/index.vue]
-<script setup>
+<script setup lang="ts">
 const { data } = await useFetch('/api/hello')
 </script>
 
@@ -424,13 +424,6 @@ export default defineEventHandler(async (event) => {
 Create a new file in `app.vue`:
 
 ```vue [app.vue]
-<template>
-  <div>
-    <div>Post state: {{ resDataSuccess }}</div>
-    <div>Get Data: {{ resData.text }}</div>
-  </div>
-</template>
-
 <script setup lang="ts">
   const { data: resDataSuccess } = await useFetch('/api/test', {
       method: 'post',
@@ -438,6 +431,13 @@ Create a new file in `app.vue`:
   })
   const { data: resData } = await useFetch('/api/test')
 </script>
+
+<template>
+  <div>
+    <div>Post state: {{ resDataSuccess }}</div>
+    <div>Get Data: {{ resData.text }}</div>
+  </div>
+</template>
 ```
 
 ::ReadMore{link="/docs/guide/directory-structure/server"}

docs/2.guide/3.going-further/10.runtime-config.md

@@ -91,19 +91,19 @@ Within the Vue part of your Nuxt app, you will need to call `useRuntimeConfig()`
 The entire runtime config is available on the server-side, but it is read-only to avoid context sharing.
 
 ```vue
-<template>
-  <div>
-    <div>Check developer console!</div>
-  </div>
-</template>
-
-<script setup>
+<script setup lang="ts">
 const config = useRuntimeConfig()
 console.log('Runtime config:', config)
 if (process.server) {
   console.log('API secret:', config.apiSecret)
 }
 </script>
+
+<template>
+  <div>
+    <div>Check developer console!</div>
+  </div>
+</template>
 ```
 
 **🛑 Security note:** Be careful not to expose runtime config keys to the client-side by either rendering them or passing them to `useState`.

docs/2.guide/3.going-further/2.hooks.md

@@ -41,9 +41,9 @@ App hooks can be mainly used by [Nuxt Plugins](/docs/guide/directory-structure/p
 
 ```js [plugins/test.ts]
 export default defineNuxtPlugin((nuxtApp) => {
-    nuxtApp.hook('page:start', () => {
-        /* your code goes here */
-     })
+  nuxtApp.hook('page:start', () => {
+      /* your code goes here */
+    })
 })
 ```
 

docs/3.api/1.composables/use-cookie.md

@@ -23,6 +23,11 @@ const cookie = useCookie(name, options)
 The example below creates a cookie called `counter`. If the cookie doesn't exist, it is initially set to a random value. Whenever we update the `counter` variable, the cookie will be updated accordingly.
 
 ```vue
+<script setup lang="ts">
+const counter = useCookie('counter')
+counter.value = counter.value || Math.round(Math.random() * 1000)
+</script>
+
 <template>
   <div>
     <h1>Counter: {{ counter || '-' }}</h1>
@@ -31,11 +36,6 @@ The example below creates a cookie called `counter`. If the cookie doesn't exist
     <button @click="counter++">+</button>
   </div>
 </template>
-
-<script setup>
-const counter = useCookie('counter')
-counter.value = counter.value || Math.round(Math.random() * 1000)
-</script>
 ```
 
 :button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/examples/tree/main/advanced/use-cookie?terminal=dev&file=app.vue" blank}
@@ -143,11 +143,7 @@ Specifies the `boolean` or `string` value for [watch](https://vuejs.org/api/reac
 **Example 1:**
 
 ```vue
-<template>
-  <div>User score: {{ user?.score }}</div>
-</template>
-
-<script setup>
+<script setup lang="ts">
 const user = useCookie(
   'userInfo',
   {
@@ -160,21 +156,16 @@ if (user.value && user.value !== null) {
   user.value.score++; // userInfo cookie not update with this change
 }
 </script>
+
+<template>
+  <div>User score: {{ user?.score }}</div>
+</template>
 ```
 
 **Example 2:**
 
 ```vue
-<template>
-  <div>
-    <h1>List</h1>
-    <pre>{{ list }}</pre>
-    <button @click="add">Add</button>
-    <button @click="save">Save</button>
-  </div>
-</template>
-
-<script setup>
+<script setup lang="ts">
 const list = useCookie(
   'list',
   {
@@ -195,6 +186,15 @@ function save() {
   }
 }
 </script>
+
+<template>
+  <div>
+    <h1>List</h1>
+    <pre>{{ list }}</pre>
+    <button @click="add">Add</button>
+    <button @click="save">Save</button>
+  </div>
+</template>
 ```
 
 ## Handling Cookies in API Routes

docs/3.api/1.composables/use-lazy-async-data.md

@@ -17,13 +17,7 @@ By default, [useAsyncData](/docs/api/composables/use-async-data) blocks navigati
 ## Example
 
 ```vue
-<template>
-  <div>
-    {{ pending ? 'Loading' : count }}
-  </div>
-</template>
-
-<script setup>
+<script setup lang="ts">
 /* Navigation will occur before fetching is complete.
   Handle pending and error states directly within your component's template
 */
@@ -34,6 +28,12 @@ watch(count, (newCount) => {
   // to its contents immediately, but you can watch it.
 })
 </script>
+
+<template>
+  <div>
+    {{ pending ? 'Loading' : count }}
+  </div>
+</template>
 ```
 
 ::alert{type=warning}

docs/3.api/1.composables/use-lazy-fetch.md

@@ -17,6 +17,17 @@ By default, [useFetch](/docs/api/composables/use-fetch) blocks navigation until
 ## Example
 
 ```vue
+<script setup lang="ts">
+/* Navigation will occur before fetching is complete.
+  Handle pending and error states directly within your component's template
+*/
+const { pending, data: posts } = await useLazyFetch('/api/posts')
+watch(posts, (newPosts) => {
+  // Because posts might start out null, you won't have access
+  // to its contents immediately, but you can watch it.
+})
+</script>
+
 <template>
   <div v-if="pending">
     Loading ...
@@ -27,17 +38,6 @@ By default, [useFetch](/docs/api/composables/use-fetch) blocks navigation until
     </div>
   </div>
 </template>
-
-<script setup>
-/* Navigation will occur before fetching is complete.
-  Handle pending and error states directly within your component's template
-*/
-const { pending, data: posts } = await useLazyFetch('/api/posts')
-watch(posts, (newPosts) => {
-  // Because posts might start out null, you won't have access
-  // to its contents immediately, but you can watch it.
-})
-</script>
 ```
 
 ::alert{type=warning}

docs/3.api/1.composables/use-nuxt-app.md

@@ -5,8 +5,8 @@
 You can use `useNuxtApp()` within composables, plugins and components.
 
 ```vue [app.vue]
-<script setup>
-  const nuxtApp = useNuxtApp()
+<script setup lang="ts">
+const nuxtApp = useNuxtApp()
 </script>
 ```
 
@@ -90,7 +90,7 @@ await nuxtApp.callHook('my-plugin:init')
 - **data** (object) - When you fetch the data from an API endpoint using either [`useFetch`](/docs/api/composables/use-fetch) or [`useAsyncData`](/docs/api/composables/use-async-data) , resulting payload can be accessed from the `payload.data`. This data is cached and helps you prevent fetching the same data in case an identical request is made more than once.
 
 ```vue [app.vue]
-<script setup>
+<script setup lang="ts">
 const { data } = await useAsyncData('count', () => $fetch('/api/count'))
 </script>
 ```

docs/3.api/1.composables/use-request-headers.md

@@ -26,7 +26,7 @@ We can use [`useRequestHeaders`](/docs/api/composables/use-request-headers) to a
 The example below adds the `authorization` request header to an isomorphic `$fetch` call.
 
 ```vue [pages/some-page.vue]
-<script setup>
+<script setup lang="ts">
 const { data } = await useFetch('/api/confidential', {
   headers: useRequestHeaders(['authorization'])
 })

docs/3.api/1.composables/use-request-url.md

@@ -5,7 +5,7 @@
 ::code-group
 
 ```vue [pages/about.vue]
-<script setup>
+<script setup lang="ts">
 const url = useRequestURL()
 </script>
 

docs/3.api/1.composables/use-route.md

@@ -14,7 +14,7 @@ Within the template of a Vue component, you can access the route using `$route`.
 In the following example, we call an API via [`useFetch`](/docs/api/composables/use-fetch) using a dynamic page parameter - `slug` - as part of the URL.
 
 ```html [~/pages/[slug].vue]
-<script setup>
+<script setup lang="ts">
 const route = useRoute()
 const { data: mountain } = await useFetch(`https://api.nuxtjs.dev/mountains/${route.params.slug}`)
 </script>

docs/3.api/2.components/2.nuxt-page.md

@@ -37,7 +37,7 @@ For example, passing `static` key, `NuxtPage` component is rendered only once wh
 Alternatively, `pageKey` can be passed as a `key` value via `definePageMeta` from the `<script>` section of your Vue component in the `/pages` directory.
 
 ```js
-<script setup>
+<script setup lang="ts">
 definePageMeta({
   key: route => route.fullPath
 })
@@ -51,16 +51,16 @@ definePageMeta({
 To get the ref of a page component, access it through `ref.value.pageRef`
 
 ````html
-<template>
-    <NuxtPage ref="page" />
-</template>
-
 <script setup lang="ts">
 const page = ref()
 function logFoo () {
   page.value.pageRef.foo()
 }
 </script>
+
+<template>
+  <NuxtPage ref="page" />
+</template>
 ````
 
 ## Custom Props

docs/3.api/2.components/3.nuxt-layout.md

@@ -23,16 +23,16 @@ You can use `<NuxtLayout />` component to activate `default` layout on `app.vue`
 ### Examples
 
 ```vue [pages/index.vue]
+<script setup lang="ts">
+// layouts/custom.vue
+const layout = 'custom'
+</script>
+
 <template>
   <NuxtLayout :name="layout">
     <NuxtPage />
   </NuxtLayout>
 </template>
-
-<script setup>
-// layouts/custom.vue
-const layout = 'custom'
-</script>
 ```
 
 ::alert{icon=👉}
@@ -66,16 +66,16 @@ Please note the layout name is normalized to kebab-case, so if your layout file
 To get the ref of a layout component, access it through `ref.value.layoutRef`
 
 ````html
-<template>
-    <NuxtLayout ref="layout" />
-</template>
-
 <script setup lang="ts">
 const layout = ref()
 function logFoo () {
   layout.value.layoutRef.foo()
 }
 </script>
+
+<template>
+  <NuxtLayout ref="layout" />
+</template>
 ````
 
 ::ReadMore{link="/docs/guide/directory-structure/layouts"}

docs/3.api/3.utils/$fetch.md

@@ -14,7 +14,7 @@ However, using `$fetch` in components without wrapping it with [`useAsyncData`](
 We recommend to use [`useFetch`](https://nuxt.com/docs/api/composables/use-fetch) or [`useAsyncData`](https://nuxt.com/docs/api/composables/use-async-data) + `$fetch` to prevent double data fetching when fetching the component data.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 // During SSR data is fetched twice, once on the server and once on the client.
 const dataTwice = await $fetch('/api/item')
 
@@ -31,7 +31,7 @@ const { data } = await useFetch('/api/item')
 You can use `$fetch` for any method that are executed only on client-side.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 function contactForm() {
   $fetch('/api/contact', {
     method: 'POST',

docs/3.api/3.utils/create-error.md

@@ -20,7 +20,7 @@ If you throw an error created with `createError`:
 ### Example
 
 ```vue [pages/movies/[slug].vue]
-<script setup>
+<script setup lang="ts">
 const route = useRoute()
 const { data } = await useFetch(`/api/movies/${route.params.slug}`)
 if (!data.value) {

docs/3.api/3.utils/define-page-meta.md

@@ -7,10 +7,10 @@ title: "definePageMeta"
 `definePageMeta` is a compiler macro that you can use to set metadata for your **page** components located in the [`pages/` directory](/docs/guide/directory-structure/pages) (unless [set otherwise](/docs/api/configuration/nuxt-config#pages)). This way you can set custom metadata for each static or dynamic route of your Nuxt application.
 
 ```vue [pages/some-page.vue]
-<script setup>
-  definePageMeta({
-    layout: 'default'
-  })
+<script setup lang="ts">
+definePageMeta({
+  layout: 'default'
+})
 </script>
 ```
 
@@ -115,16 +115,16 @@ The example below demonstrates:
 - adding `pageType` as a custom property:
 
 ```vue [pages/some-page.vue]
-<script setup>
-  definePageMeta({
-    key: (route) => route.fullPath,
+<script setup lang="ts">
+definePageMeta({
+  key: (route) => route.fullPath,
 
-    keepalive: {
-      exclude: ['modal']
-    },
+  keepalive: {
+    exclude: ['modal']
+  },
 
-    pageType: 'Checkout'
-  })
+  pageType: 'Checkout'
+})
 </script>
 ```
 
@@ -133,28 +133,28 @@ The example below demonstrates:
 The example below shows how the middleware can be defined using a `function` directly within the `definePageMeta` or set as a `string` that matches the middleware file name located in the `middleware/` directory:
 
 ```vue [pages/some-page.vue]
-<script setup>
-  definePageMeta({
-    // define middleware as a function
-    middleware: [
-      function (to, from) {
-        const auth = useState('auth')
+<script setup lang="ts">
+definePageMeta({
+  // define middleware as a function
+  middleware: [
+    function (to, from) {
+      const auth = useState('auth')
 
-        if (!auth.value.authenticated) {
-            return navigateTo('/login')
-        }
-
-        if (to.path !== '/checkout') {
-          return navigateTo('/checkout')
-        }
+      if (!auth.value.authenticated) {
+          return navigateTo('/login')
       }
-    ],
 
-    // ... or a string
-    middleware: 'auth'
+      if (to.path !== '/checkout') {
+        return navigateTo('/checkout')
+      }
+    }
+  ],
 
-    // ... or multiple strings
-    middleware: ['auth', 'another-named-middleware']
+  // ... or a string
+  middleware: 'auth'
+
+  // ... or multiple strings
+  middleware: ['auth', 'another-named-middleware']
 })
 </script>
 ```
@@ -164,13 +164,13 @@ The example below shows how the middleware can be defined using a `function` dir
 You can define the layout that matches the layout's file name located (by default) in the [`layouts/` directory](/docs/guide/directory-structure/layouts). You can also disable the layout by setting the `layout` to `false`:
 
 ```vue [pages/some-page.vue]
-<script setup>
-  definePageMeta({
-    // set custom layout
-    layout: 'admin'
+<script setup lang="ts">
+definePageMeta({
+  // set custom layout
+  layout: 'admin'
 
-    // ... or disable a default layout
-    layout: false
-  })
+  // ... or disable a default layout
+  layout: false
+})
 </script>
 ```

docs/3.api/3.utils/navigate-to.md

@@ -127,7 +127,7 @@ An object accepting the following properties:
 ### Navigating Within a Vue Component
 
 ```vue
-<script setup>
+<script setup lang="ts">
 // passing 'to' as a string
 await navigateTo('/search')
 
@@ -162,7 +162,7 @@ export default defineNuxtRouteMiddleware((to, from) => {
 ### Navigating to an External URL
 
 ```vue
-<script setup>
+<script setup lang="ts">
 // will throw an error;
 // navigating to an external URL is not allowed by default
 await navigateTo('https://nuxt.com')
@@ -177,7 +177,7 @@ await navigateTo('https://nuxt.com', {
 ### Navigating using open()
 
 ```vue
-<script setup>
+<script setup lang="ts">
 // will open 'https://nuxt.com' in a new tab
 await navigateTo('https://nuxt.com', {  
   open: {

docs/3.api/3.utils/refresh-nuxt-data.md

@@ -28,15 +28,7 @@ refreshNuxtData(keys?: string | string[])
 This example below refreshes all data being fetched using [`useAsyncData`](/docs/api/composables/use-async-data) and [`useFetch`](/docs/api/composables/use-fetch) on the current page.
 
 ```vue [pages/some-page.vue]
-<template>
-  <div>
-    <button :disabled="refreshing" @click="refreshAll">
-      Refetch All Data
-    </button>
-  </div>
-</template>
-
-<script setup>
+<script setup lang="ts">
 const refreshing = ref(false)
 const refreshAll = async () => {
   refreshing.value = true
@@ -47,6 +39,14 @@ const refreshAll = async () => {
   }
 }
 </script>
+
+<template>
+  <div>
+    <button :disabled="refreshing" @click="refreshAll">
+      Refetch All Data
+    </button>
+  </div>
+</template>
 ```
 
 ### Refresh Specific Data
@@ -54,17 +54,17 @@ const refreshAll = async () => {
 This example below refreshes only data where the key matches to `count`.
 
 ```vue [pages/some-page.vue]
+<script setup lang="ts">
+const { pending, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
+const refresh = () => refreshNuxtData('count')
+</script>
+
 <template>
   <div>
     {{ pending ? 'Loading' : count }}
   </div>
   <button @click="refresh">Refresh</button>
 </template>
-
-<script setup>
-const { pending, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
-const refresh = () => refreshNuxtData('count')
-</script>
 ```
 
 ::ReadMore{link="/docs/getting-started/data-fetching"}

docs/6.bridge/1.overview.md

@@ -260,7 +260,7 @@ Nuxt Bridge does not support `definePageMeta`.
 Nuxt Bridge provides a new Nuxt 3 meta API that can be accessed with a new [`useHead`](/docs/api/composables/use-head) composable.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 useHead({
   title: 'My Nuxt App',
 })

docs/7.migration/4.meta.md

@@ -46,7 +46,7 @@ export default {
 ```
 
 ```vue [Nuxt 3]
-<script setup>
+<script setup lang="ts">
 const title = ref('My App')
 const description = ref('My App Description')
 

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

@@ -160,7 +160,7 @@ export default {
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 // This compiler macro works in both <script> and <script setup>
 definePageMeta({
   // you can also pass a string or a computed property
@@ -210,7 +210,7 @@ export default {
 ```
 
 ```vue [Nuxt 3]
-<script setup>
+<script setup lang="ts">
 const router = useRouter();
 
 function navigate(){

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

@@ -43,11 +43,11 @@ Within your methods and templates, you could use the `post` variable similar how
 With Nuxt 3, you can perform this data fetching using composables in your `setup()` method or `<script setup>` tag:
 
 ```vue
-<script setup>
-  // Define params wherever, through `defineProps()`, `useRoute()`, etc.
-  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 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}`) )
+// 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>
 ```
 
@@ -136,7 +136,7 @@ The validate hook in Nuxt 3 only accepts a single argument, the `route`. Just as
 This is not supported in Nuxt 3. Instead, you can directly use a watcher to trigger refetching data.
 
 ```vue [pages/users/[id].vue]
-<script setup>
+<script setup lang="ts">
 const route = useRoute()
 const { data, refresh } = await useFetch('/api/user')
 watch(() => route.query, () => refresh())

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

@@ -31,11 +31,11 @@ export default defineNuxtConfig({
 ```
 
 ```vue [pages/index.vue]
-<script setup>
-  const config = useRuntimeConfig()
+<script setup lang="ts">
+const config = useRuntimeConfig()
 
-  // instead of process.env you will now access config.public.apiBase
-  console.log(config.public.apiBase)
+// instead of process.env you will now access config.public.apiBase
+console.log(config.public.apiBase)
 </script>
 ```