Merge pull request #8694 from larbish/docs/nuxt3-quickstart-update

docs(nuxt3): update to use user composable from module

apps/reference/docs/guides/with-nuxt-3.mdx

@@ -188,7 +188,7 @@ Let's set up a Vue component to manage logins and sign ups. We'll use Magic Link
 
 ```html title="/components/Auth.vue"
 <template>
-  <form class="row flex-center flex" @submit.prevent="handleLogin">
+  <form class="flex row flex-center" @submit.prevent="handleLogin">
     <div class="col-6 form-widget">
       <h1 class="header">Supabase + Nuxt 3</h1>
       <p class="description">Sign in via magic link with your email below</p>
@@ -203,7 +203,7 @@ Let's set up a Vue component to manage logins and sign ups. We'll use Magic Link
       <div>
         <input
           type="submit"
-          class="button block"
+          class="block button"
           :value="loading ? 'Loading' : 'Send magic link'"
           :disabled="loading"
         />
@@ -232,6 +232,10 @@ Let's set up a Vue component to manage logins and sign ups. We'll use Magic Link
 </script>
 ```
 
+### User state
+
+To access the user information, use the composable [useSupabaseUser](https://supabase.nuxtjs.org/usage/composables/use-supabase-user) provided by the Supabase Nuxt module.
+
 ### Account component
 
 After a user is signed in we can allow them to edit their profile details and manage their account.
@@ -256,14 +260,14 @@ Let's create a new component for that called `Account.vue`.
     <div>
       <input
         type="submit"
-        class="button primary block"
+        class="block button primary"
         :value="loading ? 'Loading ...' : 'Update'"
         :disabled="loading"
       />
     </div>
 
     <div>
-      <button class="button block" @click="signOut" :disabled="loading">
+      <button class="block button" @click="signOut" :disabled="loading">
         Sign Out
       </button>
     </div>
@@ -342,7 +346,7 @@ Now that we have all the components in place, let's update `app.vue`:
 </template>
 
 <script setup>
-const user = useSupabaseUser()
+  const user = useSupabaseUser();
 </script>
 ```
 
@@ -381,7 +385,7 @@ Let's create an avatar for the user so that they can upload a profile photo. We
     />
 
     <div style="width: 10em; position: relative;">
-      <label class="button primary block" for="single">
+      <label class="block button primary" for="single">
         {{ uploading ? "Uploading ..." : "Upload" }}
       </label>
       <input
@@ -477,14 +481,14 @@ And then we can add the widget to the Account page:
     <div>
       <input
         type="submit"
-        class="button primary block"
+        class="block button primary"
         :value="loading ? 'Loading ...' : 'Update'"
         :disabled="loading"
       />
     </div>
 
     <div>
-      <button class="button block" @click="signOut" :disabled="loading">
+      <button class="block button" @click="signOut" :disabled="loading">
         Sign Out
       </button>
     </div>