From 002de462ff8de67e221a7420860104a48eedbd51 Mon Sep 17 00:00:00 2001
From: Andrew Smith <a.smith@silentworks.co.uk>
Date: Tue, 18 Oct 2022 23:12:47 +0000
Subject: [PATCH] chore: update vue 3 quickstart guide

---
 apps/reference/docs/guides/with-vue-3.mdx | 497 +++++++++-------------
 1 file changed, 199 insertions(+), 298 deletions(-)

diff --git a/apps/reference/docs/guides/with-vue-3.mdx b/apps/reference/docs/guides/with-vue-3.mdx
index 06b7f9e0617..49ce6b3739b 100644
--- a/apps/reference/docs/guides/with-vue-3.mdx
+++ b/apps/reference/docs/guides/with-vue-3.mdx
@@ -24,7 +24,7 @@ By the end of this guide you'll have an app which allows users to login and upda
 
 ### GitHub
 
-Whenever you get stuck at any point, take a look at [this repo](https://github.com/zernonia/supabase-vue-3).
+Whenever you get stuck at any point, take a look at [this repo](https://github.com/supabase/examples/tree/main/supabase-js-v2/user-management/vue3-user-management).
 
 ## Project set up
 
@@ -182,102 +182,141 @@ const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
 export const supabase = createClient(supabaseUrl, supabaseAnonKey)
 ```
 
-And one optional step is to update the CSS file `src/assets/main.css` to make the app look nice.
-You can find the full contents of this file [here](https://raw.githubusercontent.com/supabase/examples/main/supabase-js-v2/user-management/react-user-management/src/index.css).
-
-```javascript title="src/main.js"
-import { createApp } from 'vue'
-import App from './App.vue'
-import './assets/main.css'
-
-createApp(App).mount('#app')
-```
+Optionally, update [src/style.css](https://raw.githubusercontent.com/supabase/examples/main/supabase-js-v2/user-management/vue3-user-management/src/style.css) to style the app.
 
 ### Set up a Login component
 
 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"
+<script setup>
+import { ref } from 'vue'
+import { supabase } from '../supabase'
+
+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
+  }
+}
+</script>
+
 <template>
   <form class="row flex-center flex" @submit.prevent="handleLogin">
     <div class="col-6 form-widget">
       <h1 class="header">Supabase + Vue 3</h1>
       <p class="description">Sign in via magic link with your email below</p>
       <div>
-        <input
-          class="inputField"
-          type="email"
-          placeholder="Your email"
-          v-model="email"
-        />
+        <input class="inputField" type="email" placeholder="Your email" v-model="email" />
       </div>
       <div>
-        <input
-          type="submit"
-          class="button block"
-          :value="loading ? 'Loading' : 'Send magic link'"
-          :disabled="loading"
-        />
+        <input type="submit" class="button block" :value="loading ? 'Loading' : 'Send magic link'"
+          :disabled="loading" />
       </div>
     </div>
   </form>
 </template>
-
-<script>
-  import { ref } from 'vue'
-  import { supabase } from '../supabase'
-
-  export default {
-    setup() {
-      const loading = ref(false)
-      const email = ref('')
-
-      const handleLogin = async () => {
-        try {
-          loading.value = true
-          const { error } = await supabase.auth.signIn({ 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
-        }
-      }
-
-      return {
-        loading,
-        email,
-        handleLogin,
-      }
-    },
-  }
-</script>
-```
-
-### User store
-
-To access the user information in other places, we use a reactive store. Create a new file called `store.js` and utilize Vue 3 `reactive` functionalities.
-
-```javascript title="src/store.js"
-import { reactive } from 'vue'
-
-export const store = reactive({
-  user: {},
-})
 ```
 
 ### Account page
 
 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 `Profile.vue`.
+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'
+
+const props = defineProps(['session'])
+const { session } = toRefs(props)
+
+const loading = ref(true)
+const username = ref('')
+const website = ref('')
+const avatar_url = ref('')
+
+onMounted(() => {
+  getProfile()
+})
+
+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()
+
+    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
+  }
+}
+
+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
+  }
+}
+
+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>
 
-```html title="src/components/Profile.vue"
 <template>
   <form class="form-widget" @submit.prevent="updateProfile">
     <div>
       <label for="email">Email</label>
-      <input id="email" type="text" :value="store.user.email" disabled />
+      <input id="email" type="text" :value="session.user.email" disabled />
     </div>
     <div>
       <label for="username">Name</label>
@@ -289,12 +328,8 @@ Let's create a new component for that called `Profile.vue`.
     </div>
 
     <div>
-      <input
-        type="submit"
-        class="button primary block"
-        :value="loading ? 'Loading ...' : 'Update'"
-        :disabled="loading"
-      />
+      <input type="submit" class="button primary block" :value="loading ? 'Loading ...' : 'Update'"
+        :disabled="loading" />
     </div>
 
     <div>
@@ -304,98 +339,6 @@ Let's create a new component for that called `Profile.vue`.
     </div>
   </form>
 </template>
-
-<script>
-  import { supabase } from '../supabase'
-  import { store } from '../store'
-  import { onMounted, ref } from 'vue'
-
-  export default {
-    setup() {
-      const loading = ref(true)
-      const username = ref('')
-      const website = ref('')
-      const avatar_url = ref('')
-
-      async function getProfile() {
-        try {
-          loading.value = true
-          store.user = supabase.auth.user()
-
-          let { data, error, status } = await supabase
-            .from('profiles')
-            .select(`username, website, avatar_url`)
-            .eq('id', store.user.id)
-            .single()
-
-          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
-        }
-      }
-
-      async function updateProfile() {
-        try {
-          loading.value = true
-          store.user = supabase.auth.user()
-
-          const updates = {
-            id: store.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, {
-            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
-        }
-      }
-
-      onMounted(() => {
-        getProfile()
-      })
-
-      return {
-        store,
-        loading,
-        username,
-        website,
-        avatar_url,
-
-        updateProfile,
-        signOut,
-      }
-    },
-  }
-</script>
 ```
 
 ### Launch!
@@ -403,37 +346,31 @@ Let's create a new component for that called `Profile.vue`.
 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'
+
+const session = ref()
+
+onMounted(() => {
+  supabase.auth.getSession().then(({ data }) => {
+    session.value = data.session
+  })
+
+  supabase.auth.onAuthStateChange((_, _session) => {
+    session.value = _session
+  })
+})
+</script>
+
 <template>
   <div class="container" style="padding: 50px 0 100px 0">
-    <Profile v-if="store.user" />
+    <Account v-if="session" :session="session" />
     <Auth v-else />
   </div>
 </template>
-
-<script>
-  import { store } from './store'
-  import { supabase } from './supabase'
-  import Auth from './components/Auth.vue'
-  import Profile from './components/Profile.vue'
-
-  export default {
-    components: {
-      Auth,
-      Profile,
-    },
-
-    setup() {
-      store.user = supabase.auth.user()
-      supabase.auth.onAuthStateChange((_, session) => {
-        store.user = session.user
-      })
-
-      return {
-        store,
-      }
-    },
-  }
-</script>
 ```
 
 Once that's done, run this in a terminal window:
@@ -442,7 +379,7 @@ Once that's done, run this in a terminal window:
 npm run dev
 ```
 
-And then open the browser to [localhost:3000](http://localhost:3000) and you should see the completed app.
+And then open the browser to [localhost:5173](http://localhost:5173) and you should see the completed app.
 
 ![Supabase Vue 3](/img/supabase-vue-3-demo.png)
 
@@ -455,132 +392,96 @@ 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"
+<script setup>
+import { ref, toRefs, watch } from 'vue'
+import { supabase } from '../supabase'
+
+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 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
+  }
+}
+
+watch(path, () => {
+  if (path.value) downloadImage()
+})
+</script>
+
 <template>
   <div>
-    <img
-      v-if="src"
-      :src="src"
-      alt="Avatar"
-      class="avatar image"
-      :style="{ height: size, width: size }"
-    />
-    <div
-      v-else
-      class="avatar no-image"
-      :style="{ height: size, width: size }"
-    />
+    <img v-if="src" :src="src" alt="Avatar" class="avatar image"
+      :style="{ height: size + 'em', width: size + 'em' }" />
+    <div v-else class="avatar no-image" :style="{ height: size + 'em', width: size + 'em' }" />
 
-    <div :style="{ width: size }">
+    <div :style="{ width: size + 'em' }">
       <label class="button primary block" for="single">
         {{ uploading ? "Uploading ..." : "Upload" }}
       </label>
-      <input
-        style="visibility: hidden; position: absolute"
-        type="file"
-        id="single"
-        accept="image/*"
-        @change="uploadAvatar"
-        :disabled="uploading"
-      />
+      <input style="visibility: hidden; position: absolute" type="file" id="single" accept="image/*"
+        @change="uploadAvatar" :disabled="uploading" />
     </div>
   </div>
 </template>
-
-<script>
-  import { ref, toRefs, watch } from 'vue'
-  import { supabase } from '../supabase'
-
-  export default {
-    props: {
-      path: String,
-    },
-    emits: ['upload', 'update:path'],
-    setup(prop, { emit }) {
-      const { path } = toRefs(prop)
-      const size = ref('10em')
-      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
-        }
-      }
-
-      watch(path, () => {
-        if (path.value) downloadImage()
-      })
-
-      return {
-        size,
-        uploading,
-        src,
-        files,
-
-        uploadAvatar,
-      }
-    },
-  }
-</script>
 ```
 
 ### Add the new widget
 
 And then we can add the widget to the Account page:
 
-```html title="src/Profile.vue"
+```html title="src/components/Account.vue"
+<script>
+// Import the new component
+import Avatar from './Avatar.vue'
+</script>
+
 <template>
   <form class="form-widget" @submit.prevent="updateProfile">
     <!-- Add to body -->
-    <Avatar v-model:path="avatar_url" @upload="updateProfile" />
+    <Avatar v-model:path="avatar_url" @upload="updateProfile" size="10" />
 
     <!-- Other form elements -->
   </form>
 </template>
-
-<script>
-  // Import the new component
-  import Avatar from './Avatar.vue'
-
-  //
-  components: {
-    Avatar,
-  }
-</script>
 ```
 
 ## Next steps