docs: <script setup> changed to <script setup lang="ts"> (#25750)

README.md

@@ -39,7 +39,7 @@ Simple, intuitive and powerful, Nuxt lets you write Vue components in a way that
 Example of an `app.vue`:
 
 ```vue
-<script setup>
+<script setup lang="ts">
 useSeoMeta({
   title: 'Meet Nuxt',
   description: 'The Intuitive Vue Framework.'

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

@@ -63,7 +63,7 @@ This composable is a wrapper around the [`useAsyncData`](/docs/api/composables/u
 Nuxt includes the `ofetch` library, and is auto-imported as the `$fetch` alias globally across your application. It's what `useFetch` uses behind the scenes.
 
 ```vue [pages/todos.vue]
-<script setup>
+<script setup lang="ts">
 async function addTodo() {
   const todo = await $fetch('/api/todos', {
     method: 'POST',
@@ -96,7 +96,7 @@ It's developer experience sugar for the most common use case.
 There are some cases when using the [`useFetch`](/docs/api/composables/use-fetch) composable is not appropriate, for example when a CMS or a third-party provide their own query layer. In this case, you can use [`useAsyncData`](/docs/api/composables/use-async-data) to wrap your calls and still keep the benefits provided by the composable.
 
 ```vue [pages/users.vue]
-<script setup>
+<script setup lang="ts">
 const { data, error } = await useAsyncData('users', () => myGetFunction('users'))
 
 // This is also possible:
@@ -113,7 +113,7 @@ Setting a key can be useful to share the same data between components using [`us
 ::
 
 ```vue [pages/users/[id\\].vue]
-<script setup>
+<script setup lang="ts">
 const { id } = useRoute().params
 
 const { data, error } = await useAsyncData(`user:${id}`, () => {
@@ -125,7 +125,7 @@ const { data, error } = await useAsyncData(`user:${id}`, () => {
 The `useAsyncData` composable is a great way to wrap and wait for multiple `useFetch` to be done, and then retrieve the results of each.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 const { data: discounts, pending } = await useAsyncData('cart-discount', async () => {
   const [coupons, offers] = await Promise.all([
     $fetch('/cart/coupons'),

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

@@ -62,7 +62,7 @@ To globally invalidate cached state, see [`clearNuxtState`](/docs/api/utils/clea
 Most of the time, you will want to initialize your state with data that resolves asynchronously. You can use the [`app.vue`](/docs/guide/directory-structure/app) component with the [`callOnce`](/docs/api/utils/call-once) util to do so.
 
 ```vue [app.vue]
-<script setup>
+<script setup lang="ts">
 const websiteConfig = useState('config')
 
 await callOnce(async () => {
@@ -103,7 +103,7 @@ export const useWebsiteStore = defineStore('websiteStore', {
 })
 ```
 ```vue [app.vue]
-<script setup>
+<script setup lang="ts">
 const website = useWebsiteStore()
 
 await callOnce(website.fetch)

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

@@ -105,8 +105,8 @@ To dynamically import a component (also known as lazy-loading a component) all y
 
 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]
+```vue [pages/index.vue]
-<script setup>
+<script setup lang="ts">
 const show = ref(false)
 </script>
 

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

@@ -15,7 +15,7 @@ Files contained within the `public/` directory are served at the root and are no
 ```
 
 ```vue [app.vue]
-<script setup>
+<script setup lang="ts">
 useSeoMeta({
   ogImage: '/og-image.png'
 })

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

@@ -241,7 +241,7 @@ Alternatively, use `readValidatedBody` with a schema validator such as Zod for r
 You can now universally call this API using:
 
 ```vue [app.vue]
-<script setup>
+<script setup lang="ts">
 async function submit() {
   const { body } = await $fetch('/api/submit', {
     method: 'post',

docs/2.guide/2.directory-structure/3.app-config.md

@@ -34,7 +34,7 @@ export default defineAppConfig({
 When adding `theme` to the `app.config`, Nuxt uses Vite or webpack to bundle the code. We can universally access `theme` both when server-rendering the page and in the browser using [`useAppConfig`](/docs/api/composables/use-app-config) composable.
 
 ```vue [pages/index.vue]
-<script setup>
+<script setup lang="ts">
 const appConfig = useAppConfig()
 
 console.log(appConfig.theme)

docs/3.api/2.composables/use-async-data.md

@@ -17,7 +17,7 @@ Within your pages, components, and plugins you can use useAsyncData to get acces
 ## Usage
 
 ```vue [pages/index.vue]
-<script setup>
+<script setup lang="ts">
 const { data, pending, error, refresh } = await useAsyncData(
   'mountains',
   () => $fetch('https://api.nuxtjs.dev/mountains')
@@ -34,7 +34,7 @@ const { data, pending, error, refresh } = await useAsyncData(
 The built-in `watch` option allows automatically rerunning the fetcher function when any changes are detected.
 
 ```vue [pages/index.vue]
-<script setup>
+<script setup lang="ts">
 const page = ref(1)
 const { data: posts } = await useAsyncData(
   'posts',

docs/3.api/2.composables/use-fetch.md

@@ -18,7 +18,7 @@ It automatically generates a key based on URL and fetch options, provides type h
 ## Usage
 
 ```vue [pages/modules.vue]
-<script setup>
+<script setup lang="ts">
 const { data, pending, error, refresh } = await useFetch('/api/modules', {
   pick: ['title']
 })

docs/3.api/2.composables/use-loading-indicator.md

@@ -47,7 +47,7 @@ Used by `finish()`. Clear all timers and intervals used by the composable.
 
 ## Example
 
-```ts
+```vue
 <script setup lang="ts">
   const { progress, isLoading, start, finish, clear } = useLoadingIndicator({
     duration: 2000,

docs/3.api/2.composables/use-nuxt-data.md

@@ -17,13 +17,14 @@ links:
 The example below shows how you can use cached data as a placeholder while the most recent data is being fetched from the server.
 
 ```vue [pages/posts.vue]
-<script setup>
+<script setup lang="ts">
 // We can access same data later using 'posts' key
 const { data } = await useFetch('/api/posts', { key: 'posts' })
 </script>
 ```
 
-```ts [pages/posts/[id\\].vue]
+```vue [pages/posts/[id\\].vue]
+<script setup lang="ts">
 // Access to the cached value of useFetch in posts.vue (parent route)
 const { id } = useRoute().params
 const { data: posts } = useNuxtData('posts')
@@ -34,6 +35,7 @@ const { data } = useLazyFetch(`/api/posts/${id}`, {
     return posts.value.find(post => post.id === id)
   }
 })
+</script>
 ```
 
 ## Optimistic Updates
@@ -41,14 +43,14 @@ const { data } = useLazyFetch(`/api/posts/${id}`, {
 We can leverage the cache to update the UI after a mutation, while the data is being invalidated in the background.
 
 ```vue [pages/todos.vue]
-<script setup>
+<script setup lang="ts">
 // We can access same data later using 'todos' key
 const { data } = await useAsyncData('todos', () => $fetch('/api/todos'))
 </script>
 ```
 
 ```vue [components/NewTodo.vue]
-<script setup>
+<script setup lang="ts">
 const newTodo = ref('')
 const previousTodos = ref([])
 

docs/3.api/2.composables/use-router.md

@@ -9,7 +9,7 @@ links:
 ---
 
 ```vue [pages/index.vue]
-<script setup>
+<script setup lang="ts">
 const router = useRouter()
 </script>
 ```

docs/3.api/3.utils/call-once.md

@@ -25,7 +25,7 @@ This is useful for code that should be executed only once, such as logging an ev
 ## Usage
 
 ```vue [app.vue]
-<script setup>
+<script setup lang="ts">
 const websiteConfig = useState('config')
 
 await callOnce(async () => {

docs/3.api/3.utils/define-route-rules.md

@@ -15,7 +15,7 @@ This feature is experimental and in order to use it you must enable the `experim
 ## Usage
 
 ```vue [pages/index.vue]
-<script setup>
+<script setup lang="ts">
 defineRouteRules({
   prerender: true
 })