From c1037fd22a968b299d73e4bfafaccd93d788eb76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxtjs.com>
Date: Thu, 6 Oct 2022 17:35:00 +0200
Subject: [PATCH] update

---
 .../1.getting-started/5.transitions.md        | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/docs/content/1.getting-started/5.transitions.md b/docs/content/1.getting-started/5.transitions.md
index 848c96e2b7e..b6bf5bbdf47 100644
--- a/docs/content/1.getting-started/5.transitions.md
+++ b/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>
 ```
 
 ::