From 64bccf37a51cbcee1d1f7258f81e9756907576c7 Mon Sep 17 00:00:00 2001
From: Bruno Braga <45981620+brunobragaw8t@users.noreply.github.com>
Date: Sat, 17 Jun 2023 22:34:31 +0100
Subject: [PATCH] docs: reorder sfc blocks and add initial slash in link
 (#21618)

---
 docs/1.getting-started/4.styling.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/1.getting-started/4.styling.md b/docs/1.getting-started/4.styling.md
index d675f07da6..ed6ba2c6c2 100644
--- a/docs/1.getting-started/4.styling.md
+++ b/docs/1.getting-started/4.styling.md
@@ -313,14 +313,14 @@ 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
-<template>
-  <div class="text">hello</div>
-</template>
-
 <script setup>
 const color = ref("red")
 </script>
 
+<template>
+  <div class="text">hello</div>
+</template>
+
 <style>
 .text {
   color: v-bind(color);
@@ -333,15 +333,15 @@ const color = ref("red")
 The scoped attribute allows you to style component in insolation. The styles declared with this attribute will only apply to this component.
 
 ```vue
+<template>
+  <div class="example">hi</div>
+</template>
+
 <style scoped>
 .example {
   color: red;
 }
 </style>
-
-<template>
-  <div class="example">hi</div>
-</template>
 ```
 
 ### CSS Modules
@@ -474,7 +474,7 @@ If you are using [UnoCSS](https://unocss.dev/integrations/nuxt), note that it co
 
 ### Transitions
 
-Nuxt comes with the same `<Transition>` element that Vue has, and also has support for the experimental [View Transitions API](docs/getting-started/transitions#view-transitions-api-experimental).
+Nuxt comes with the same `<Transition>` element that Vue has, and also has support for the experimental [View Transitions API](/docs/getting-started/transitions#view-transitions-api-experimental).
 
 ::ReadMore{link="docs/features/transitions"}
 ::