diff --git a/docs/1.getting-started/3.configuration.md b/docs/1.getting-started/3.configuration.md
index 21dba96333..c42aa152d8 100644
--- a/docs/1.getting-started/3.configuration.md
+++ b/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>
 ```
diff --git a/docs/1.getting-started/4.styling.md b/docs/1.getting-started/4.styling.md
index 33b9e356b3..9178f331a9 100644
--- a/docs/1.getting-started/4.styling.md
+++ b/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>
 
diff --git a/docs/1.getting-started/5.routing.md b/docs/1.getting-started/5.routing.md
index 8949768911..9209b85255 100644
--- a/docs/1.getting-started/5.routing.md
+++ b/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
diff --git a/docs/1.getting-started/5.seo-meta.md b/docs/1.getting-started/5.seo-meta.md
index c8bf6a110c..5a9a336e67 100644
--- a/docs/1.getting-started/5.seo-meta.md
+++ b/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
diff --git a/docs/1.getting-started/6.data-fetching.md b/docs/1.getting-started/6.data-fetching.md
index 1bf38cb017..3143103f26 100644
--- a/docs/1.getting-started/6.data-fetching.md
+++ b/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>
diff --git a/docs/1.getting-started/7.state-management.md b/docs/1.getting-started/7.state-management.md
index 16f8150fbe..249971fa2b 100644
--- a/docs/1.getting-started/7.state-management.md
+++ b/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>
 
diff --git a/docs/1.getting-started/8.error-handling.md b/docs/1.getting-started/8.error-handling.md
index 559fbf3e71..c7f751f919 100644
--- a/docs/1.getting-started/8.error-handling.md
+++ b/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) {
diff --git a/docs/2.guide/1.concepts/1.auto-imports.md b/docs/2.guide/1.concepts/1.auto-imports.md
index 63c307c46f..3b3c8f1572 100644
--- a/docs/2.guide/1.concepts/1.auto-imports.md
+++ b/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>
 ```
 
diff --git a/docs/2.guide/1.concepts/2.vuejs-development.md b/docs/2.guide/1.concepts/2.vuejs-development.md
index dc48f31179..8209ee832f 100644
--- a/docs/2.guide/1.concepts/2.vuejs-development.md
+++ b/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>
 ```
 
diff --git a/docs/2.guide/2.directory-structure/1.components.md b/docs/2.guide/2.directory-structure/1.components.md
index 23fed003f2..df310e6809 100644
--- a/docs/2.guide/2.directory-structure/1.components.md
+++ b/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
diff --git a/docs/2.guide/2.directory-structure/1.composables.md b/docs/2.guide/2.directory-structure/1.composables.md
index 0131014dc4..102f22e826 100644
--- a/docs/2.guide/2.directory-structure/1.composables.md
+++ b/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"}
diff --git a/docs/2.guide/2.directory-structure/1.layouts.md b/docs/2.guide/2.directory-structure/1.layouts.md
index 6178270b22..f6d961d08b 100644
--- a/docs/2.guide/2.directory-structure/1.layouts.md
+++ b/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]
diff --git a/docs/2.guide/2.directory-structure/1.middleware.md b/docs/2.guide/2.directory-structure/1.middleware.md
index 0bf7036db0..5520b4eaa9 100644
--- a/docs/2.guide/2.directory-structure/1.middleware.md
+++ b/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'
diff --git a/docs/2.guide/2.directory-structure/1.pages.md b/docs/2.guide/2.directory-structure/1.pages.md
index 28970bd44a..b724a62532 100644
--- a/docs/2.guide/2.directory-structure/1.pages.md
+++ b/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);
 
diff --git a/docs/2.guide/2.directory-structure/1.plugins.md b/docs/2.guide/2.directory-structure/1.plugins.md
index 48afc26e72..137b803740 100644
--- a/docs/2.guide/2.directory-structure/1.plugins.md
+++ b/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
diff --git a/docs/2.guide/2.directory-structure/1.server.md b/docs/2.guide/2.directory-structure/1.server.md
index 02b72bcd9e..8a97899438 100644
--- a/docs/2.guide/2.directory-structure/1.server.md
+++ b/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"}
diff --git a/docs/2.guide/3.going-further/10.runtime-config.md b/docs/2.guide/3.going-further/10.runtime-config.md
index ce70095ed9..d9c76dc972 100644
--- a/docs/2.guide/3.going-further/10.runtime-config.md
+++ b/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`.
diff --git a/docs/2.guide/3.going-further/2.hooks.md b/docs/2.guide/3.going-further/2.hooks.md
index 8a36e33111..d850c1d4a8 100644
--- a/docs/2.guide/3.going-further/2.hooks.md
+++ b/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 */
+    })
 })
 ```
 
diff --git a/docs/3.api/1.composables/use-cookie.md b/docs/3.api/1.composables/use-cookie.md
index 4a69032bd7..7cc84dbf26 100644
--- a/docs/3.api/1.composables/use-cookie.md
+++ b/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
diff --git a/docs/3.api/1.composables/use-lazy-async-data.md b/docs/3.api/1.composables/use-lazy-async-data.md
index bb6f14da62..ed96635962 100644
--- a/docs/3.api/1.composables/use-lazy-async-data.md
+++ b/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}
diff --git a/docs/3.api/1.composables/use-lazy-fetch.md b/docs/3.api/1.composables/use-lazy-fetch.md
index 35d9fdaf2b..c79f9be1b5 100644
--- a/docs/3.api/1.composables/use-lazy-fetch.md
+++ b/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}
diff --git a/docs/3.api/1.composables/use-nuxt-app.md b/docs/3.api/1.composables/use-nuxt-app.md
index 4ef42e38e3..f12d562a75 100644
--- a/docs/3.api/1.composables/use-nuxt-app.md
+++ b/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>
 ```
diff --git a/docs/3.api/1.composables/use-request-headers.md b/docs/3.api/1.composables/use-request-headers.md
index ecd4e5448d..7a89b69f07 100644
--- a/docs/3.api/1.composables/use-request-headers.md
+++ b/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'])
 })
diff --git a/docs/3.api/1.composables/use-request-url.md b/docs/3.api/1.composables/use-request-url.md
index 1efe2cf0fc..ff2b497523 100644
--- a/docs/3.api/1.composables/use-request-url.md
+++ b/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>
 
diff --git a/docs/3.api/1.composables/use-route.md b/docs/3.api/1.composables/use-route.md
index 1dab49fd34..bdfa19b143 100644
--- a/docs/3.api/1.composables/use-route.md
+++ b/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>
diff --git a/docs/3.api/2.components/2.nuxt-page.md b/docs/3.api/2.components/2.nuxt-page.md
index 6a89caeff2..19b5878b7b 100644
--- a/docs/3.api/2.components/2.nuxt-page.md
+++ b/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
diff --git a/docs/3.api/2.components/3.nuxt-layout.md b/docs/3.api/2.components/3.nuxt-layout.md
index 607d272408..f408d0da5d 100644
--- a/docs/3.api/2.components/3.nuxt-layout.md
+++ b/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"}
diff --git a/docs/3.api/3.utils/$fetch.md b/docs/3.api/3.utils/$fetch.md
index dbe5df6a69..c780897eee 100644
--- a/docs/3.api/3.utils/$fetch.md
+++ b/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',
diff --git a/docs/3.api/3.utils/create-error.md b/docs/3.api/3.utils/create-error.md
index b74988cf8f..51a3971ffa 100644
--- a/docs/3.api/3.utils/create-error.md
+++ b/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) {
diff --git a/docs/3.api/3.utils/define-page-meta.md b/docs/3.api/3.utils/define-page-meta.md
index 19280b9928..3380d66479 100644
--- a/docs/3.api/3.utils/define-page-meta.md
+++ b/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>
 ```
diff --git a/docs/3.api/3.utils/navigate-to.md b/docs/3.api/3.utils/navigate-to.md
index 4249df62bd..e2dc246e91 100644
--- a/docs/3.api/3.utils/navigate-to.md
+++ b/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: {
diff --git a/docs/3.api/3.utils/refresh-nuxt-data.md b/docs/3.api/3.utils/refresh-nuxt-data.md
index 0037c2d422..2150d61670 100644
--- a/docs/3.api/3.utils/refresh-nuxt-data.md
+++ b/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"}
diff --git a/docs/6.bridge/1.overview.md b/docs/6.bridge/1.overview.md
index 4331447419..704fe3717b 100644
--- a/docs/6.bridge/1.overview.md
+++ b/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',
 })
diff --git a/docs/7.migration/4.meta.md b/docs/7.migration/4.meta.md
index 2d9bebda1b..cc59864230 100644
--- a/docs/7.migration/4.meta.md
+++ b/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')
 
diff --git a/docs/7.migration/6.pages-and-layouts.md b/docs/7.migration/6.pages-and-layouts.md
index 8c029b3f0a..0169e6737b 100644
--- a/docs/7.migration/6.pages-and-layouts.md
+++ b/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(){
diff --git a/docs/7.migration/7.component-options.md b/docs/7.migration/7.component-options.md
index 52a36d1430..cdfaac56f6 100644
--- a/docs/7.migration/7.component-options.md
+++ b/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())
diff --git a/docs/7.migration/8.runtime-config.md b/docs/7.migration/8.runtime-config.md
index 8c75d48569..ce75cc62e8 100644
--- a/docs/7.migration/8.runtime-config.md
+++ b/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>
 ```