mirror of
https://github.com/supabase/supabase.git
synced 2026-10-18 15:49:09 +03:00
refactor: <script> blocks before <template> blocks
Move the <script setup> blocks before the <template> blocks and proper format the <script setup> blocks
This commit is contained in:
Roger! authored and GitHub committed
1 parent
e620c6efb0
commit
73cc50db9d
1 file changed
+203
-192
@@ -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.
|
||||
|
||||
Reference in new issue
Block a user