docs: Rework vue3 example and use codesample component (#43703)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

---------

Co-authored-by: Jeremias Menichelli <jmenichelli@gmail.com>

examples/user-management/vue3-user-management/.env.example

@@ -1,2 +1,2 @@
 VITE_SUPABASE_URL=https://your-project-ref.supabase.co
-VITE_SUPABASE_ANON_KEY=your-publishable-key
+VITE_SUPABASE_KEY=your-publishable-key

examples/user-management/vue3-user-management/package.json

@@ -9,11 +9,11 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
-		"@supabase/supabase-js": "^2.0.4",
-		"vue": "^3.2.37"
+		"@supabase/supabase-js": "^2.99.1",
+		"vue": "^3.5.30"
 	},
 	"devDependencies": {
-		"@vitejs/plugin-vue": "^3.1.0",
-		"vite": "^4.3.9"
+		"@vitejs/plugin-vue": "^6.0.4",
+		"vite": "^7.3.1"
 	}
 }

examples/user-management/vue3-user-management/src/App.vue

@@ -4,22 +4,23 @@ import Account from './components/Account.vue'
 import Auth from './components/Auth.vue'
 import { supabase } from './supabase'
 
-const session = ref()
+const claims = ref()
 
 onMounted(() => {
-  supabase.auth.getSession().then(({ data }) => {
-    session.value = data.session
+  supabase.auth.getClaims().then(({ data }) => {
+    claims.value = data.claims
   })
 
-  supabase.auth.onAuthStateChange((_, _session) => {
-    session.value = _session
+  supabase.auth.onAuthStateChange(async () => {
+    const { data } = await supabase.auth.getClaims()
+    claims.value = data.claims
   })
 })
 </script>
 
 <template>
   <div class="container" style="padding: 50px 0 100px 0">
-    <Account v-if="session" :session="session" />
+    <Account v-if="claims" :claims="claims" />
     <Auth v-else />
   </div>
 </template>

examples/user-management/vue3-user-management/src/components/Account.vue

@@ -3,8 +3,8 @@ import { supabase } from '../supabase'
 import { onMounted, ref, toRefs } from 'vue'
 import Avatar from './Avatar.vue';
 
-const props = defineProps(['session'])
-const { session } = toRefs(props)
+const props = defineProps(['claims'])
+const { claims } = toRefs(props)
 
 const loading = ref(true)
 const username = ref('')
@@ -18,12 +18,10 @@ onMounted(() => {
 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)
+            .eq('id', claims.value.sub)
             .single()
 
         if (error && status !== 406) throw error
@@ -43,10 +41,8 @@ async function getProfile() {
 async function updateProfile() {
     try {
         loading.value = true
-        const { user } = session.value
-
         const updates = {
-            id: user.id,
+            id: claims.value.sub,
             username: username.value,
             website: website.value,
             avatar_url: avatar_url.value,
@@ -81,7 +77,7 @@ async function signOut() {
         <Avatar v-model:path="avatar_url" @upload="updateProfile" size="10" />
         <div>
             <label for="email">Email</label>
-            <input id="email" type="text" :value="session.user.email" disabled />
+            <input id="email" type="text" :value="claims.email" disabled />
         </div>
         <div>
             <label for="username">Name</label>

examples/user-management/vue3-user-management/src/supabase.js

@@ -1,6 +1,6 @@
 import { createClient } from '@supabase/supabase-js'
 
 const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
-const supabasePublishableKey = import.meta.env.VITE_SUPABASE_ANON_KEY
+const supabasePublishableKey = import.meta.env.VITE_SUPABASE_KEY
 
 export const supabase = createClient(supabaseUrl, supabasePublishableKey)