update

docs/content/1.getting-started/5.transitions.md

@@ -1,6 +1,6 @@
 ---
 navigation.icon: uil:moon-eclipse
-description: Nuxt uses the Transition component under the hood to apply page transitions between routes.
+description: Nuxt leverages Vue's Transition component to apply transitions between pages and layouts.
 ---
 
 # Transitions
@@ -169,18 +169,18 @@ div {
 ```
 
 ```html [pages/about.vue]
+<script setup lang="ts">
+definePageMeta({
+  layout: 'orange'
+})
+</script>
+
 <template>
   <div>
     <h1>About page</h1>
     <NuxtLink to="/">Home page</NuxtLink>
   </div>
 </template>
-
-<script setup>
-definePageMeta({
-  layout: 'orange'
-})
-</script>
 ```
 
 ::
@@ -295,7 +295,7 @@ To apply dynamic transitions using conditional logic, you can leverage inline [m
 ::code-group
 
 ```html [pages/[id].vue]
-<script setup>
+<script setup lang="ts">
 definePageMeta({
   pageTransition: {
     name: 'slide-right',
@@ -338,6 +338,13 @@ definePageMeta({
 ```
 
 ```html [layouts/default.vue]
+<script setup lang="ts">
+const route = useRoute()
+const id = computed(() => Number(route.params.id || 1))
+const prev = computed(() => '/' + (id.value - 1))
+const next = computed(() => '/' + (id.value + 1))
+</script>
+
 <template>
   <div>
     <slot />
@@ -347,13 +354,6 @@ definePageMeta({
     </div>
   </div>
 </template>
-
-<script setup>
-const route = useRoute()
-const id = computed(() => Number(route.params.id || 1))
-const prev = computed(() => '/' + (id.value - 1))
-const next = computed(() => '/' + (id.value + 1))
-</script>
 ```
 
 ::