inverse script setup and template

src/routes/docs/tutorials/nuxt/step-4/+page.markdoc

@@ -76,23 +76,6 @@ We will also show buttons to toggle between the two different types of forms.
 
 ```vue
 <!-- pages/login.vue -->
-
-<template>
-  <div class="u-max-width-650" style="margin: 0 auto;">
-    <section class="card u-margin-32">
-      <h2 class="eyebrow-heading-2">Login/Register</h2>
-      <AuthForm v-if="isSignUp" :handle-submit="handleRegistration" submit-type="Sign Up"></AuthForm>
-      <AuthForm v-else :handle-submit="handleLogin" submit-type="Log In"></AuthForm>
-      <button v-if="isSignUp" @click="isSignUp = false" class="u-margin-block-start-16">
-        Already have an account? Log in
-      </button>
-      <button v-else @click="isSignUp = true" class="u-margin-block-start-16">
-        Don't have an account? Sign up
-      </button>
-    </section>
-  </div>
-</template>
-
 <script setup>
 import { ref } from 'vue';
 
@@ -120,6 +103,22 @@ const handleRegistration = async (event) => {
   form.reset(); // Clear the form
 };
 </script>
+
+<template>
+  <div class="u-max-width-650" style="margin: 0 auto;">
+    <section class="card u-margin-32">
+      <h2 class="eyebrow-heading-2">Login/Register</h2>
+      <AuthForm v-if="isSignUp" :handle-submit="handleRegistration" submit-type="Sign Up"></AuthForm>
+      <AuthForm v-else :handle-submit="handleLogin" submit-type="Log In"></AuthForm>
+      <button v-if="isSignUp" @click="isSignUp = false" class="u-margin-block-start-16">
+        Already have an account? Log in
+      </button>
+      <button v-else @click="isSignUp = true" class="u-margin-block-start-16">
+        Don't have an account? Sign up
+      </button>
+    </section>
+  </div>
+</template>
 ```
 
 # Authentication forms {% #auth-forms %}

src/routes/docs/tutorials/nuxt/step-5/+page.markdoc

@@ -14,7 +14,11 @@ We will also put the user's e-mail address next to the logout button.
 From the `components` directory, create the file `navbar.vue` and add the code below.
 
 ```vue
-  <!-- components/navbar.vue -->
+<!-- components/navbar.vue -->
+<script setup>
+// Access user composable function
+const user = useUserSession();
+</script>
 
 <template>
   <div>
@@ -38,11 +42,6 @@ From the `components` directory, create the file `navbar.vue` and add the code b
     </nav>
   </div>
 </template>
-
-<script setup>
-// Access user composable function
-const user = useUserSession();
-</script>
 ```
 
 Open `app.vue` from the root directory and add the navigation bar.

src/routes/docs/tutorials/nuxt/step-7/+page.markdoc

@@ -18,6 +18,26 @@ From the `components` directory, add the file `IdeasForm.vue` and add the follow
 
 ```vue
 <!-- components/IdeasForm.vue -->
+<script setup>
+const ideas = useIdeas();
+const user = useUserSession();
+
+const handleAddIdea = async (event) => {
+  const form = event.target;
+  const formData = new FormData(form);
+
+  // Extract the values from the FormData object and add userId
+  const postIdeaData = {
+    userId: user.current.value.userId,
+    title: formData.get('title'),
+    description: formData.get('description'),
+  };
+
+  await ideas.add(postIdeaData);
+
+  form.reset(); // Clear the form
+};
+</script>
 
 <template>
   <div>
@@ -48,27 +68,6 @@ From the `components` directory, add the file `IdeasForm.vue` and add the follow
     </article>
   </div>
 </template>
-
-<script setup>
-const ideas = useIdeas();
-const user = useUserSession();
-
-const handleAddIdea = async (event) => {
-  const form = event.target;
-  const formData = new FormData(form);
-
-  // Extract the values from the FormData object and add userId
-  const postIdeaData = {
-    userId: user.current.value.userId,
-    title: formData.get('title'),
-    description: formData.get('description'),
-  };
-
-  await ideas.add(postIdeaData);
-
-  form.reset(); // Clear the form
-};
-</script>
 ```
 
 Next, add the component to the page `pages/index.vue` by auto-importing it in the `<template>` tag.
@@ -83,6 +82,9 @@ Overwrite the contents of `pages/index.vue` with the following code.
 
 ```vue
 <!-- pages/index.vue -->
+<script setup>
+const user = useUserSession();
+</script>
 
 <template>
   <div class="u-max-width-650" style="margin-inline: auto;">
@@ -102,10 +104,6 @@ Overwrite the contents of `pages/index.vue` with the following code.
   </div>
 </template>
   
-<script setup>
-const user = useUserSession();
-</script>
-  
 <style>
 article.box {
   background-color: hsl(var(--color-neutral-0));
@@ -127,6 +125,19 @@ Add the file `IdeasList` from the `componenents` directory and insert the follow
 
 ```vue
 <!-- componenents/IdeasList.vue -->
+<script setup>
+import { onMounted } from 'vue';
+
+const ideas = useIdeas();
+const user = useUserSession();
+
+console.log(ideas.current.value);
+
+// Get ideas on page load
+onMounted(() => {
+    ideas.fetch();
+});
+</script>
 
 <template>
     <section class="u-margin-32">
@@ -155,20 +166,6 @@ Add the file `IdeasList` from the `componenents` directory and insert the follow
         </article>
     </section>
 </template>
-
-<script setup>
-import { onMounted } from 'vue';
-
-const ideas = useIdeas();
-const user = useUserSession();
-
-console.log(ideas.current.value);
-
-// Get ideas on page load
-onMounted(() => {
-    ideas.fetch();
-});
-</script>
 ```
 
 Return to the file `pages/index.vue` once more to import the list of ideas.