docs: standardize indentation and tag positioning

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,20 +255,23 @@ 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({
   active: true,
   '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>
 ```