From e620c6efb0dae4c36aef822e30d4e885006c952a Mon Sep 17 00:00:00 2001
From: Roger! <38413630+icarusgk@users.noreply.github.com>
Date: Wed, 25 Jan 2023 15:43:01 -0600
Subject: [PATCH 1/5] replace: 'html' with 'vue' on code snippet blocks

---
 .../guides/getting-started/tutorials/with-nuxt-3.mdx   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
index b4f5af0a1a3..74e65e21252 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
@@ -66,7 +66,7 @@ export default defineNuxtConfig({
 
 Let's set up a Vue component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
 
-```html title=/components/Auth.vue
+```vue title=/components/Auth.vue
 <template>
   <form class="row flex-center flex" @submit.prevent="handleLogin">
     <div class="col-6 form-widget">
@@ -116,7 +116,7 @@ To access the user information, use the composable [useSupabaseUser](https://sup
 After a user is signed in we can allow them to edit their profile details and manage their account.
 Let's create a new component for that called `Account.vue`.
 
-```html title=components/Account.vue
+```vue title=components/Account.vue
 <template>
   <form class="form-widget" @submit.prevent="updateProfile">
     <div>
@@ -211,7 +211,7 @@ Let's create a new component for that called `Account.vue`.
 
 Now that we have all the components in place, let's update `app.vue`:
 
-```html title=app.vue
+```vue title=app.vue
 <template>
   <div class="container" style="padding: 50px 0 100px 0">
     <Account v-if="user" />
@@ -242,7 +242,7 @@ Every Supabase project is configured with [Storage](/docs/guides/storage) for ma
 
 Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
 
-```html title=components/Avatar.vue
+```vue title=components/Avatar.vue
 <template>
   <div>
     <img
@@ -327,7 +327,7 @@ Let's create an avatar for the user so that they can upload a profile photo. We
 
 And then we can add the widget to the Account page:
 
-```html title=components/Account.vue
+```vue title=components/Account.vue
 <template>
   <form class="form-widget" @submit.prevent="updateProfile">
     <Avatar v-model:path="avatar_path" @upload="updateProfile" />

From 73cc50db9dca68d031abd7b0df23f47d65081dc8 Mon Sep 17 00:00:00 2001
From: Roger! <38413630+icarusgk@users.noreply.github.com>
Date: Wed, 25 Jan 2023 15:56:38 -0600
Subject: [PATCH 2/5] refactor: <script> blocks before <template> blocks

Move the <script setup> blocks before the <template> blocks and proper format the <script setup> blocks
---
 .../getting-started/tutorials/with-nuxt-3.mdx | 395 +++++++++---------
 1 file changed, 203 insertions(+), 192 deletions(-)

diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
index 74e65e21252..39fcff43d78 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
@@ -67,6 +67,26 @@ export default defineNuxtConfig({
 Let's set up a Vue component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
 
 ```vue title=/components/Auth.vue
+<script setup>
+const supabase = useSupabaseClient()
+
+const loading = ref(false)
+const email = ref('')
+
+const handleLogin = async () => {
+  try {
+    loading.value = true
+    const { error } = await supabase.auth.signInWithOtp({ email: email.value })
+    if (error) throw error
+    alert('Check your email for the login link!')
+  } catch (error) {
+    alert(error.error_description || error.message)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
 <template>
   <form class="row flex-center flex" @submit.prevent="handleLogin">
     <div class="col-6 form-widget">
@@ -86,25 +106,6 @@ Let's set up a Vue component to manage logins and sign ups. We'll use Magic Link
     </div>
   </form>
 </template>
-
-<script setup>
-  const supabase = useSupabaseClient()
-
-  const loading = ref(false)
-  const email = ref('')
-  const handleLogin = async () => {
-    try {
-      loading.value = true
-      const { error } = await supabase.auth.signInWithOtp({ email: email.value })
-      if (error) throw error
-      alert('Check your email for the login link!')
-    } catch (error) {
-      alert(error.error_description || error.message)
-    } finally {
-      loading.value = false
-    }
-  }
-</script>
 ```
 
 ### User state
@@ -117,6 +118,67 @@ After a user is signed in we can allow them to edit their profile details and ma
 Let's create a new component for that called `Account.vue`.
 
 ```vue title=components/Account.vue
+<script setup>
+const supabase = useSupabaseClient()
+
+const loading = ref(true)
+const username = ref('')
+const website = ref('')
+const avatar_path = ref('')
+
+loading.value = true
+const user = useSupabaseUser();
+
+let { data } = await supabase
+    .from('profiles')
+    .select(`username, website, avatar_url`)
+    .eq('id', user.value.id)
+    .single()
+    
+if (data) {
+    username.value = data.username
+    website.value = data.website
+    avatar_path.value = data.avatar_url
+}
+
+loading.value = false
+
+async function updateProfile() {
+    try {
+        loading.value = true
+        const user = useSupabaseUser();
+        const updates = {
+            id: user.value.id,
+            username: username.value,
+            website: website.value,
+            avatar_url: avatar_path.value,
+            updated_at: new Date(),
+        }
+        let { error } = await supabase.from('profiles').upsert(updates, {
+            returning: 'minimal', // Don't return the value after inserting
+        })
+        if (error) throw error
+    } catch (error) {
+        alert(error.message)
+    } finally {
+        loading.value = false
+    }
+}
+
+async function signOut() {
+    try {
+        loading.value = true
+        let { error } = await supabase.auth.signOut()
+        if (error) throw error
+        user.value = null
+    } catch (error) {
+        alert(error.message)
+    } finally {
+        loading.value = false
+    }
+}
+</script>
+
 <template>
   <form class="form-widget" @submit.prevent="updateProfile">
     <div>
@@ -146,65 +208,6 @@ Let's create a new component for that called `Account.vue`.
     </div>
   </form>
 </template>
-
-<script setup>
-  const supabase = useSupabaseClient()
-
-  const loading = ref(true)
-  const username = ref('')
-  const website = ref('')
-  const avatar_path = ref('')
-
-
-  loading.value = true
-  const user = useSupabaseUser();
-  let { data } = await supabase
-      .from('profiles')
-      .select(`username, website, avatar_url`)
-      .eq('id', user.value.id)
-      .single()
-  if (data) {
-      username.value = data.username
-      website.value = data.website
-      avatar_path.value = data.avatar_url
-  }
-  loading.value = false
-
-  async function updateProfile() {
-      try {
-          loading.value = true
-          const user = useSupabaseUser();
-          const updates = {
-              id: user.value.id,
-              username: username.value,
-              website: website.value,
-              avatar_url: avatar_path.value,
-              updated_at: new Date(),
-          }
-          let { error } = await supabase.from('profiles').upsert(updates, {
-              returning: 'minimal', // Don't return the value after inserting
-          })
-          if (error) throw error
-      } catch (error) {
-          alert(error.message)
-      } finally {
-          loading.value = false
-      }
-  }
-
-  async function signOut() {
-      try {
-          loading.value = true
-          let { error } = await supabase.auth.signOut()
-          if (error) throw error
-          user.value = null
-      } catch (error) {
-          alert(error.message)
-      } finally {
-          loading.value = false
-      }
-  }
-</script>
 ```
 
 ### Launch!
@@ -212,16 +215,16 @@ Let's create a new component for that called `Account.vue`.
 Now that we have all the components in place, let's update `app.vue`:
 
 ```vue title=app.vue
+<script setup>
+const user = useSupabaseUser()
+</script>
+
 <template>
   <div class="container" style="padding: 50px 0 100px 0">
     <Account v-if="user" />
     <Auth v-else />
   </div>
 </template>
-
-<script setup>
-  const user = useSupabaseUser()
-</script>
 ```
 
 Once that's done, run this in a terminal window:
@@ -243,6 +246,65 @@ Every Supabase project is configured with [Storage](/docs/guides/storage) for ma
 Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
 
 ```vue title=components/Avatar.vue
+<script setup>
+const props = defineProps(['path'])
+const { path } = toRefs(props)
+
+const emit = defineEmits(['update:path', 'upload'])
+
+const supabase = useSupabaseClient()
+
+const uploading = ref(false)
+const src = ref('')
+const files = ref()
+
+const downloadImage = async () => {
+  try {
+    const { data, error } = await supabase.storage.from('avatars').download(path.value)
+    if (error) throw error
+    src.value = URL.createObjectURL(data)
+  } catch (error) {
+    console.error('Error downloading image: ', error.message)
+  }
+}
+
+const uploadAvatar = async (evt) => {
+  files.value = evt.target.files
+  try {
+    uploading.value = true
+    
+    if (!files.value || files.value.length === 0) {
+      throw new Error('You must select an image to upload.')
+    }
+    
+    const file = files.value[0]
+    const fileExt = file.name.split('.').pop()
+    const fileName = `${Math.random()}.${fileExt}`
+    const filePath = `${fileName}`
+    
+    let { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file)
+    
+    if (uploadError) throw uploadError
+    
+    emit('update:path', filePath)
+    emit('upload')
+    
+  } catch (error) {
+    alert(error.message)
+  } finally {
+    uploading.value = false
+  }
+}
+
+downloadImage()
+
+watch(path, () => {
+  if (path.value) {
+    downloadImage()
+  }
+})
+</script>
+
 <template>
   <div>
     <img
@@ -269,58 +331,6 @@ Let's create an avatar for the user so that they can upload a profile photo. We
     </div>
   </div>
 </template>
-
-<script setup>
-  const props = defineProps(['path'])
-  const { path } = toRefs(props)
-
-  const emit = defineEmits(['update:path', 'upload'])
-
-  const supabase = useSupabaseClient()
-
-  const uploading = ref(false)
-  const src = ref('')
-  const files = ref()
-  const downloadImage = async () => {
-    try {
-      const { data, error } = await supabase.storage.from('avatars').download(path.value)
-      if (error) throw error
-      src.value = URL.createObjectURL(data)
-    } catch (error) {
-      console.error('Error downloading image: ', error.message)
-    }
-  }
-
-  const uploadAvatar = async (evt) => {
-    files.value = evt.target.files
-    try {
-      uploading.value = true
-      if (!files.value || files.value.length === 0) {
-        throw new Error('You must select an image to upload.')
-      }
-      const file = files.value[0]
-      const fileExt = file.name.split('.').pop()
-      const fileName = `${Math.random()}.${fileExt}`
-      const filePath = `${fileName}`
-      let { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file)
-      if (uploadError) throw uploadError
-      emit('update:path', filePath)
-      emit('upload')
-    } catch (error) {
-      alert(error.message)
-    } finally {
-      uploading.value = false
-    }
-  }
-
-  downloadImage()
-
-  watch(path, () => {
-    if (path.value) {
-      downloadImage()
-    }
-  })
-</script>
 ```
 
 ### Add the new widget
@@ -328,6 +338,65 @@ Let's create an avatar for the user so that they can upload a profile photo. We
 And then we can add the widget to the Account page:
 
 ```vue title=components/Account.vue
+<script setup>
+const supabase = useSupabaseClient()
+
+const loading = ref(true)
+const username = ref('')
+const website = ref('')
+const avatar_path = ref('')
+
+loading.value = true
+const user = useSupabaseUser();
+
+let { data } = await supabase
+    .from('profiles')
+    .select(`username, website, avatar_url`)
+    .eq('id', user.value.id)
+    .single()
+if (data) {
+    username.value = data.username
+    website.value = data.website
+    avatar_path.value = data.avatar_url
+}
+
+loading.value = false
+
+async function updateProfile() {
+    try {
+        loading.value = true
+        const user = useSupabaseUser();
+        const updates = {
+            id: user.value.id,
+            username: username.value,
+            website: website.value,
+            avatar_url: avatar_path.value,
+            updated_at: new Date(),
+        }
+        let { error } = await supabase.from('profiles').upsert(updates, {
+            returning: 'minimal', // Don't return the value after inserting
+        })
+        if (error) throw error
+    } catch (error) {
+        alert(error.message)
+    } finally {
+        loading.value = false
+    }
+}
+
+async function signOut() {
+    try {
+        loading.value = true
+        let { error } = await supabase.auth.signOut()
+        if (error) throw error
+    } catch (error) {
+        alert(error.message)
+    } finally {
+        loading.value = false
+    }
+}
+</script>
+
 <template>
   <form class="form-widget" @submit.prevent="updateProfile">
     <Avatar v-model:path="avatar_path" @upload="updateProfile" />
@@ -358,64 +427,6 @@ And then we can add the widget to the Account page:
     </div>
   </form>
 </template>
-
-<script setup>
-  const supabase = useSupabaseClient()
-
-  const loading = ref(true)
-  const username = ref('')
-  const website = ref('')
-  const avatar_path = ref('')
-
-
-  loading.value = true
-  const user = useSupabaseUser();
-  let { data } = await supabase
-      .from('profiles')
-      .select(`username, website, avatar_url`)
-      .eq('id', user.value.id)
-      .single()
-  if (data) {
-      username.value = data.username
-      website.value = data.website
-      avatar_path.value = data.avatar_url
-  }
-  loading.value = false
-
-  async function updateProfile() {
-      try {
-          loading.value = true
-          const user = useSupabaseUser();
-          const updates = {
-              id: user.value.id,
-              username: username.value,
-              website: website.value,
-              avatar_url: avatar_path.value,
-              updated_at: new Date(),
-          }
-          let { error } = await supabase.from('profiles').upsert(updates, {
-              returning: 'minimal', // Don't return the value after inserting
-          })
-          if (error) throw error
-      } catch (error) {
-          alert(error.message)
-      } finally {
-          loading.value = false
-      }
-  }
-
-  async function signOut() {
-      try {
-          loading.value = true
-          let { error } = await supabase.auth.signOut()
-          if (error) throw error
-      } catch (error) {
-          alert(error.message)
-      } finally {
-          loading.value = false
-      }
-  }
-</script>
 ```
 
 That is it! You should now be able to upload a profile photo to Supabase Storage.

From 0ef1a5ee7f201927bb77505b942227c2e728b387 Mon Sep 17 00:00:00 2001
From: Roger! <38413630+icarusgk@users.noreply.github.com>
Date: Wed, 25 Jan 2023 16:08:49 -0600
Subject: [PATCH 3/5] refactor: with-vue-3.mdx spaces on <script setup>

To make it align better with the official documentation formatting -> https://vuejs.org/guide/scaling-up/sfc.html
---
 .../getting-started/tutorials/with-vue-3.mdx  | 268 +++++++++---------
 1 file changed, 134 insertions(+), 134 deletions(-)

diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx
index a1ec84a8c92..6d1ba416ed1 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx
@@ -70,28 +70,28 @@ Let's set up a Vue component to manage logins and sign ups. We'll use Magic Link
 
 ```html title=/src/components/Auth.vue
 <script setup>
-  import { ref } from 'vue'
-  import { supabase } from '../supabase'
+import { ref } from 'vue'
+import { supabase } from '../supabase'
 
-  const loading = ref(false)
-  const email = ref('')
+const loading = ref(false)
+const email = ref('')
 
-  const handleLogin = async () => {
-    try {
-      loading.value = true
-      const { error } = await supabase.auth.signInWithOtp({
-        email: email.value,
-      })
-      if (error) throw error
-      alert('Check your email for the login link!')
-    } catch (error) {
-      if (error instanceof Error) {
-        alert(error.message)
-      }
-    } finally {
-      loading.value = false
+const handleLogin = async () => {
+  try {
+    loading.value = true
+    const { error } = await supabase.auth.signInWithOtp({
+      email: email.value,
+    })
+    if (error) throw error
+    alert('Check your email for the login link!')
+  } catch (error) {
+    if (error instanceof Error) {
+      alert(error.message)
     }
+  } finally {
+    loading.value = false
   }
+}
 </script>
 
 <template>
@@ -122,80 +122,80 @@ Let's create a new component for that called `Account.vue`.
 
 ```html title=src/components/Account.vue
 <script setup>
-  import { supabase } from '../supabase'
-  import { onMounted, ref, toRefs } from 'vue'
+import { supabase } from '../supabase'
+import { onMounted, ref, toRefs } from 'vue'
 
-  const props = defineProps(['session'])
-  const { session } = toRefs(props)
+const props = defineProps(['session'])
+const { session } = toRefs(props)
 
-  const loading = ref(true)
-  const username = ref('')
-  const website = ref('')
-  const avatar_url = ref('')
+const loading = ref(true)
+const username = ref('')
+const website = ref('')
+const avatar_url = ref('')
 
-  onMounted(() => {
-    getProfile()
-  })
+onMounted(() => {
+  getProfile()
+})
 
-  async function getProfile() {
-    try {
-      loading.value = true
-      const { user } = session.value
+async function getProfile() {
+  try {
+    loading.value = true
+    const { user } = session.value
 
-      let { data, error, status } = await supabase
-        .from('profiles')
-        .select(`username, website, avatar_url`)
-        .eq('id', user.id)
-        .single()
+    let { data, error, status } = await supabase
+      .from('profiles')
+      .select(`username, website, avatar_url`)
+      .eq('id', user.id)
+      .single()
 
-      if (error && status !== 406) throw error
+    if (error && status !== 406) throw error
 
-      if (data) {
-        username.value = data.username
-        website.value = data.website
-        avatar_url.value = data.avatar_url
-      }
-    } catch (error) {
-      alert(error.message)
-    } finally {
-      loading.value = false
+    if (data) {
+      username.value = data.username
+      website.value = data.website
+      avatar_url.value = data.avatar_url
     }
+  } catch (error) {
+    alert(error.message)
+  } finally {
+    loading.value = false
   }
+}
 
-  async function updateProfile() {
-    try {
-      loading.value = true
-      const { user } = session.value
+async function updateProfile() {
+  try {
+    loading.value = true
+    const { user } = session.value
 
-      const updates = {
-        id: user.id,
-        username: username.value,
-        website: website.value,
-        avatar_url: avatar_url.value,
-        updated_at: new Date(),
-      }
-
-      let { error } = await supabase.from('profiles').upsert(updates)
-
-      if (error) throw error
-    } catch (error) {
-      alert(error.message)
-    } finally {
-      loading.value = false
+    const updates = {
+      id: user.id,
+      username: username.value,
+      website: website.value,
+      avatar_url: avatar_url.value,
+      updated_at: new Date(),
     }
-  }
 
-  async function signOut() {
-    try {
-      loading.value = true
-      let { error } = await supabase.auth.signOut()
-      if (error) throw error
-    } catch (error) {
-      alert(error.message)
-    } finally {
-      loading.value = false
-    }
+    let { error } = await supabase.from('profiles').upsert(updates)
+
+    if (error) throw error
+  } catch (error) {
+    alert(error.message)
+  } finally {
+    loading.value = false
   }
+}
+
+async function signOut() {
+  try {
+    loading.value = true
+    let { error } = await supabase.auth.signOut()
+    if (error) throw error
+  } catch (error) {
+    alert(error.message)
+  } finally {
+    loading.value = false
+  }
+}
 </script>
 
 <template>
@@ -235,22 +235,22 @@ Now that we have all the components in place, let's update `App.vue`:
 
 ```html title=src/App.vue
 <script setup>
-  import { onMounted, ref } from 'vue'
-  import Account from './components/Account.vue'
-  import Auth from './components/Auth.vue'
-  import { supabase } from './supabase'
+import { onMounted, ref } from 'vue'
+import Account from './components/Account.vue'
+import Auth from './components/Auth.vue'
+import { supabase } from './supabase'
 
-  const session = ref()
+const session = ref()
 
-  onMounted(() => {
-    supabase.auth.getSession().then(({ data }) => {
-      session.value = data.session
-    })
-
-    supabase.auth.onAuthStateChange((_, _session) => {
-      session.value = _session
-    })
+onMounted(() => {
+  supabase.auth.getSession().then(({ data }) => {
+    session.value = data.session
   })
+
+  supabase.auth.onAuthStateChange((_, _session) => {
+    session.value = _session
+  })
+})
 </script>
 
 <template>
@@ -281,54 +281,54 @@ Let's create an avatar for the user so that they can upload a profile photo. We
 
 ```html title=src/components/Avatar.vue
 <script setup>
-  import { ref, toRefs, watch } from 'vue'
-  import { supabase } from '../supabase'
+import { ref, toRefs, watch } from 'vue'
+import { supabase } from '../supabase'
 
-  const prop = defineProps(['path', 'size'])
-  const { path, size } = toRefs(prop)
+const prop = defineProps(['path', 'size'])
+const { path, size } = toRefs(prop)
 
-  const emit = defineEmits(['upload', 'update:path'])
-  const uploading = ref(false)
-  const src = ref('')
-  const files = ref()
+const emit = defineEmits(['upload', 'update:path'])
+const uploading = ref(false)
+const src = ref('')
+const files = ref()
 
-  const downloadImage = async () => {
-    try {
-      const { data, error } = await supabase.storage.from('avatars').download(path.value)
-      if (error) throw error
-      src.value = URL.createObjectURL(data)
-    } catch (error) {
-      console.error('Error downloading image: ', error.message)
-    }
+const downloadImage = async () => {
+  try {
+    const { data, error } = await supabase.storage.from('avatars').download(path.value)
+    if (error) throw error
+    src.value = URL.createObjectURL(data)
+  } catch (error) {
+    console.error('Error downloading image: ', error.message)
   }
+}
 
-  const uploadAvatar = async (evt) => {
-    files.value = evt.target.files
-    try {
-      uploading.value = true
-      if (!files.value || files.value.length === 0) {
-        throw new Error('You must select an image to upload.')
-      }
-
-      const file = files.value[0]
-      const fileExt = file.name.split('.').pop()
-      const filePath = `${Math.random()}.${fileExt}`
-
-      let { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file)
-
-      if (uploadError) throw uploadError
-      emit('update:path', filePath)
-      emit('upload')
-    } catch (error) {
-      alert(error.message)
-    } finally {
-      uploading.value = false
+const uploadAvatar = async (evt) => {
+  files.value = evt.target.files
+  try {
+    uploading.value = true
+    if (!files.value || files.value.length === 0) {
+      throw new Error('You must select an image to upload.')
     }
-  }
 
-  watch(path, () => {
-    if (path.value) downloadImage()
-  })
+    const file = files.value[0]
+    const fileExt = file.name.split('.').pop()
+    const filePath = `${Math.random()}.${fileExt}`
+
+    let { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file)
+
+    if (uploadError) throw uploadError
+    emit('update:path', filePath)
+    emit('upload')
+  } catch (error) {
+    alert(error.message)
+  } finally {
+    uploading.value = false
+  }
+}
+
+watch(path, () => {
+  if (path.value) downloadImage()
+})
 </script>
 
 <template>
@@ -365,8 +365,8 @@ And then we can add the widget to the Account page:
 
 ```html title=src/components/Account.vue
 <script>
-  // Import the new component
-  import Avatar from './Avatar.vue'
+// Import the new component
+import Avatar from './Avatar.vue'
 </script>
 
 <template>

From 3b719241721050c19f18d3e718ceca389081de43 Mon Sep 17 00:00:00 2001
From: Roger! <38413630+icarusgk@users.noreply.github.com>
Date: Wed, 25 Jan 2023 17:02:53 -0600
Subject: [PATCH 4/5] refactor: irregular spaces to use 2 spaces

---
 .../getting-started/tutorials/with-nuxt-3.mdx | 144 +++++++++---------
 1 file changed, 75 insertions(+), 69 deletions(-)

diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
index 39fcff43d78..8d6af74bc17 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
@@ -130,52 +130,54 @@ loading.value = true
 const user = useSupabaseUser();
 
 let { data } = await supabase
-    .from('profiles')
-    .select(`username, website, avatar_url`)
-    .eq('id', user.value.id)
-    .single()
+  .from('profiles')
+  .select(`username, website, avatar_url`)
+  .eq('id', user.value.id)
+  .single()
     
 if (data) {
-    username.value = data.username
-    website.value = data.website
-    avatar_path.value = data.avatar_url
+  username.value = data.username
+  website.value = data.website
+  avatar_path.value = data.avatar_url
 }
 
 loading.value = false
 
 async function updateProfile() {
-    try {
-        loading.value = true
-        const user = useSupabaseUser();
-        const updates = {
-            id: user.value.id,
-            username: username.value,
-            website: website.value,
-            avatar_url: avatar_path.value,
-            updated_at: new Date(),
-        }
-        let { error } = await supabase.from('profiles').upsert(updates, {
-            returning: 'minimal', // Don't return the value after inserting
-        })
-        if (error) throw error
-    } catch (error) {
-        alert(error.message)
-    } finally {
-        loading.value = false
+  try {
+    loading.value = true
+    const user = useSupabaseUser();
+    
+    const updates = {
+      id: user.value.id,
+      username: username.value,
+      website: website.value,
+      avatar_url: avatar_path.value,
+      updated_at: new Date(),
     }
+    
+    let { error } = await supabase.from('profiles').upsert(updates, {
+        returning: 'minimal', // Don't return the value after inserting
+    })
+    if (error) throw error
+  } catch (error) {
+      alert(error.message)
+  } finally {
+      loading.value = false
+  }
 }
 
 async function signOut() {
-    try {
-        loading.value = true
-        let { error } = await supabase.auth.signOut()
-        if (error) throw error
-        user.value = null
-    } catch (error) {
-        alert(error.message)
-    } finally {
-        loading.value = false
-    }
+  try {
+    loading.value = true
+    let { error } = await supabase.auth.signOut()
+    if (error) throw error
+    user.value = null
+  } catch (error) {
+    alert(error.message)
+  } finally {
+    loading.value = false
+  }
 }
 </script>
 
@@ -350,50 +352,54 @@ loading.value = true
 const user = useSupabaseUser();
 
 let { data } = await supabase
-    .from('profiles')
-    .select(`username, website, avatar_url`)
-    .eq('id', user.value.id)
-    .single()
+  .from('profiles')
+  .select(`username, website, avatar_url`)
+  .eq('id', user.value.id)
+  .single()
+
 if (data) {
-    username.value = data.username
-    website.value = data.website
-    avatar_path.value = data.avatar_url
+  username.value = data.username
+  website.value = data.website
+  avatar_path.value = data.avatar_url
 }
 
 loading.value = false
 
 async function updateProfile() {
-    try {
-        loading.value = true
-        const user = useSupabaseUser();
-        const updates = {
-            id: user.value.id,
-            username: username.value,
-            website: website.value,
-            avatar_url: avatar_path.value,
-            updated_at: new Date(),
-        }
-        let { error } = await supabase.from('profiles').upsert(updates, {
-            returning: 'minimal', // Don't return the value after inserting
-        })
-        if (error) throw error
-    } catch (error) {
-        alert(error.message)
-    } finally {
-        loading.value = false
+  try {
+    loading.value = true
+    const user = useSupabaseUser();
+    
+    const updates = {
+      id: user.value.id,
+      username: username.value,
+      website: website.value,
+      avatar_url: avatar_path.value,
+      updated_at: new Date(),
     }
+    
+    let { error } = await supabase.from('profiles').upsert(updates, {
+      returning: 'minimal', // Don't return the value after inserting
+    })
+    
+    if (error) throw error
+  } catch (error) {
+    alert(error.message)
+  } finally {
+    loading.value = false
+  }
 }
 
 async function signOut() {
-    try {
-        loading.value = true
-        let { error } = await supabase.auth.signOut()
-        if (error) throw error
-    } catch (error) {
-        alert(error.message)
-    } finally {
-        loading.value = false
-    }
+  try {
+    loading.value = true
+    let { error } = await supabase.auth.signOut()
+    if (error) throw error
+  } catch (error) {
+    alert(error.message)
+  } finally {
+    loading.value = false
+  }
 }
 </script>
 

From 6b2a58e9c23511a79dac90b25ccbd38312d5fdf0 Mon Sep 17 00:00:00 2001
From: Roger! <38413630+icarusgk@users.noreply.github.com>
Date: Mon, 6 Feb 2023 15:50:58 +0000
Subject: [PATCH 5/5] fix: try to fix prettier errors

---
 .../getting-started/tutorials/with-nuxt-3.mdx | 39 +++++++++----------
 .../getting-started/tutorials/with-vue-3.mdx  | 12 +++---
 2 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
index 8d6af74bc17..364bf1a1630 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
@@ -127,14 +127,14 @@ const website = ref('')
 const avatar_path = ref('')
 
 loading.value = true
-const user = useSupabaseUser();
+const user = useSupabaseUser()
 
 let { data } = await supabase
   .from('profiles')
   .select(`username, website, avatar_url`)
   .eq('id', user.value.id)
   .single()
-    
+
 if (data) {
   username.value = data.username
   website.value = data.website
@@ -146,8 +146,8 @@ loading.value = false
 async function updateProfile() {
   try {
     loading.value = true
-    const user = useSupabaseUser();
-    
+    const user = useSupabaseUser()
+
     const updates = {
       id: user.value.id,
       username: username.value,
@@ -155,15 +155,15 @@ async function updateProfile() {
       avatar_url: avatar_path.value,
       updated_at: new Date(),
     }
-    
+
     let { error } = await supabase.from('profiles').upsert(updates, {
-        returning: 'minimal', // Don't return the value after inserting
+      returning: 'minimal', // Don't return the value after inserting
     })
     if (error) throw error
   } catch (error) {
-      alert(error.message)
+    alert(error.message)
   } finally {
-      loading.value = false
+    loading.value = false
   }
 }
 
@@ -274,23 +274,22 @@ const uploadAvatar = async (evt) => {
   files.value = evt.target.files
   try {
     uploading.value = true
-    
+
     if (!files.value || files.value.length === 0) {
       throw new Error('You must select an image to upload.')
     }
-    
+
     const file = files.value[0]
     const fileExt = file.name.split('.').pop()
     const fileName = `${Math.random()}.${fileExt}`
     const filePath = `${fileName}`
-    
+
     let { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file)
-    
+
     if (uploadError) throw uploadError
-    
+
     emit('update:path', filePath)
     emit('upload')
-    
   } catch (error) {
     alert(error.message)
   } finally {
@@ -320,7 +319,7 @@ watch(path, () => {
 
     <div style="width: 10em; position: relative;">
       <label class="button primary block" for="single">
-        {{ uploading ? "Uploading ..." : "Upload" }}
+        {{ uploading ? 'Uploading ...' : 'Upload' }}
       </label>
       <input
         style="position: absolute; visibility: hidden;"
@@ -349,7 +348,7 @@ const website = ref('')
 const avatar_path = ref('')
 
 loading.value = true
-const user = useSupabaseUser();
+const user = useSupabaseUser()
 
 let { data } = await supabase
   .from('profiles')
@@ -368,8 +367,8 @@ loading.value = false
 async function updateProfile() {
   try {
     loading.value = true
-    const user = useSupabaseUser();
-    
+    const user = useSupabaseUser()
+
     const updates = {
       id: user.value.id,
       username: username.value,
@@ -377,11 +376,11 @@ async function updateProfile() {
       avatar_url: avatar_path.value,
       updated_at: new Date(),
     }
-    
+
     let { error } = await supabase.from('profiles').upsert(updates, {
       returning: 'minimal', // Don't return the value after inserting
     })
-    
+
     if (error) throw error
   } catch (error) {
     alert(error.message)
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx
index 6d1ba416ed1..639176f8cdd 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx
@@ -68,7 +68,7 @@ Optionally, update [src/style.css](https://raw.githubusercontent.com/supabase/su
 
 Let's set up a Vue component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
 
-```html title=/src/components/Auth.vue
+```vue title=/src/components/Auth.vue
 <script setup>
 import { ref } from 'vue'
 import { supabase } from '../supabase'
@@ -120,7 +120,7 @@ const handleLogin = async () => {
 After a user is signed in we can allow them to edit their profile details and manage their account.
 Let's create a new component for that called `Account.vue`.
 
-```html title=src/components/Account.vue
+```vue title=src/components/Account.vue
 <script setup>
 import { supabase } from '../supabase'
 import { onMounted, ref, toRefs } from 'vue'
@@ -233,7 +233,7 @@ async function signOut() {
 
 Now that we have all the components in place, let's update `App.vue`:
 
-```html title=src/App.vue
+```vue title=src/App.vue
 <script setup>
 import { onMounted, ref } from 'vue'
 import Account from './components/Account.vue'
@@ -279,7 +279,7 @@ Every Supabase project is configured with [Storage](/docs/guides/storage) for ma
 
 Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
 
-```html title=src/components/Avatar.vue
+```vue title=src/components/Avatar.vue
 <script setup>
 import { ref, toRefs, watch } from 'vue'
 import { supabase } from '../supabase'
@@ -344,7 +344,7 @@ watch(path, () => {
 
     <div :style="{ width: size + 'em' }">
       <label class="button primary block" for="single">
-        {{ uploading ? "Uploading ..." : "Upload" }}
+        {{ uploading ? 'Uploading ...' : 'Upload' }}
       </label>
       <input
         style="visibility: hidden; position: absolute"
@@ -363,7 +363,7 @@ watch(path, () => {
 
 And then we can add the widget to the Account page:
 
-```html title=src/components/Account.vue
+```vue title=src/components/Account.vue
 <script>
 // Import the new component
 import Avatar from './Avatar.vue'