クイックスタート:Vue 3
イントロ
この例では、SupabaseとVue 3を使って、シンプルなユーザー管理アプリを(ゼロから)構築する手順を紹介します。内容は以下のとおりです。
- Supabase Database:ユーザーデータを保存するためのPostgresデータベースです。
- Supabase Auth:ユーザーはマジックリンクでサインインできます(パスワードは不要、メールのみ)。
- Supabase Storage:ユーザーは写真をアップロードできます。
- 行単位セキュリティー:データは保護されており、個人が自分のデータにしかアクセスできないようになっています。
- インスタントAPI:データベースのテーブルを作成すると、APIが自動的に生成されます。
このガイドの最後には、ユーザーがログインして基本的なプロフィール情報を更新できるアプリが完成します。
GitHub
どこかで行き詰ったら、このリポジトリーを見てみましょう。
プロジェクトのセットアップ
ビルドを開始する前に、データベースとAPIをセットアップします。Supabaseで新しいプロジェクトを立ち上げ、データベース内に「スキーマ」を作成するだけです。
プロジェクトの作成
- app.supabase.comにアクセスします。
- 「New Project」をクリックします。
- プロジェクトの詳細を入力します。
- 新しいデータベースが起動するのを待ちます。
データベース・スキーマの設定
これからデータベース・スキーマを設定します。SQLエディターの「User Management Starter」クイック・スターターを使用するか、下記のSQLをコピー/ペーストして自分で実行できます。
- UI
- SQL
1. 「SQL」セクションに移動します。
2. 「User Management Starter」をクリックします。
3. 「Run」をクリックします。
-- パブリックで「profiles」テーブルを作成
create table profiles (
id uuid references auth.users not null,
updated_at timestamp with time zone,
username text unique,
avatar_url text,
website text,
primary key (id),
unique(username),
constraint username_length check (char_length(username) >= 3)
);
alter table profiles enable row level security;
create policy "Public profiles are viewable by everyone."
on profiles for select
using ( true );
create policy "Users can insert their own profile."
on profiles for insert
with check ( auth.uid() = id );
create policy "Users can update own profile."
on profiles for update
using ( auth.uid() = id );
-- リアルタイムをセットアップ
begin;
drop publication if exists supabase_realtime;
create publication supabase_realtime;
commit;
alter publication supabase_realtime add table profiles;
-- ストレージをセットアップ
insert into storage.buckets (id, name)
values ('avatars', 'avatars');
create policy "Avatar images are publicly accessible."
on storage.objects for select
using ( bucket_id = 'avatars' );
create policy "Anyone can upload an avatar."
on storage.objects for insert
with check ( bucket_id = 'avatars' );
APIキーを取得
データベースのテーブルをいくつか作成したので、自動生成されたAPIを使ってデータを挿入する準備ができました。API設定からURLとanon
キーを取得する必要があります。
- UI
1. 「Settings」セクションに移動します。
2. サイドバーの「API」をリックします。
3. そのページでAPI URLを探します。
4. 「anon」と「service_role」キーを探します。
アプリの構築
それでは早速、Vue 3アプリを一から作ってみましょう。
Vue 3アプリの初期化
ViteのVue 3テンプレートを使って、supabase-vue-3
というアプリを初期化します。
# npm 6.x
npm init @vitejs/app supabase-vue-3 --template vue
# npm 7+, extra double-dash is needed:
npm init @vitejs/app supabase-vue-3 -- --template vue
cd supabase-vue-3
そして、唯一追加する必要がある依存関係のsupbase-jsをインストールしましょう。
npm install @supabase/supabase-js
最後に、環境変数を.env
に保存します。
必要なのは、APIのURLと、先ほどコピーしたanon
キーだけです。
VITE_SUPABASE_URL=YOUR_SUPABASE_URL
VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
APIの認証情報が得られたので、次はSupabaseクライアントを初期化するヘルパーファイルを作成しましょう。 これらの変数はブラウザー上で公開されますが、データベースでは行単位のセキュリティが有効になっているので、全く問題ありません。
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
export const supabase = createClient(supabaseUrl, supabaseAnonKey)
また、オプションとして、CSSファイルのsrc/index.css
を更新して、アプリの外観を整えます。
こちらにあるファイルを参照してください。
import { createApp } from "vue"
import App from "./App.vue"
import "./assets/main.css"
createApp(App).mount("#app")
ログイン・コンポーネントの設定
ログインとサインアップを管理するVueコンポーネントを設定しましょう。マジック・リンクを使用することで、ユーザーはパスワードを使わずにメールでサインインできます。
<template>
<form class="row flex flex-center" @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"
/>
</div>
<div>
<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>
ユーザー・ストア
他の場所にあるユーザー情報へアクセスするため、リアクティブ・ストアを使用します。store.js
という新しいファイルを作成し、Vue 3のリアクティブ
機能を利用します。
import { reactive } from "vue"
export const store = reactive({
user: {},
})
アカウント・ページ
ユーザーがサイン・インした後、プロフィールの詳細を編集したり、アカウントを管理できるようにします。
そのための新しいコンポーネント、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 />
</div>
<div>
<label for="username">Name</label>
<input id="username" type="text" v-model="username" />
</div>
<div>
<label for="website">Website</label>
<input id="website" type="website" v-model="website" />
</div>
<div>
<input
type="submit"
class="button block primary"
:value="loading ? 'Loading ...' : 'Update'"
:disabled="loading"
/>
</div>
<div>
<button class="button block" @click="signOut" :disabled="loading">
Sign Out
</button>
</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>
ローンチ
すべてのコンポーネントがそろったところで、App.vue
を更新しましょう。
<template>
<div class="container" style="padding: 50px 0 100px 0">
<Profile v-if="store.user" />
<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>
更新が完了したら、ターミナル・ウィンドウでこれを実行します。
npm run dev
そして、ブラウザーでlocalhost:3000を開くと、完成したアプリを見ることができます。
おまけ:プロフィール写真
Supabaseのプロジェクトには、写真や動画などの大容量ファイルを管理するためのストレージが用意されています。
アップロード・ウィジェットの作成
ユーザーがプロフィール写真をアップロードできるように、ユーザーのアバターを作成しましょう。まず、新しいコンポーネントを作成します。
<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 }"
/>
<div :style="{ width: size }">
<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"
/>
</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>
新しいウィジェットの追加
そして、このウィジェットをアカウント・ページに追加します。
<template>
<form class="form-widget" @submit.prevent="updateProfile">
<!-- Add to body -->
<Avatar v-model:path="avatar_url" @upload="updateProfile" />
<!-- Other form elements -->
</form>
</template>
<script>
// Import the new component
import Avatar from './Avatar.vue'
//
components: {
Avatar,
}
</script>
次のステップ
この段階で、完全に機能するアプリケーションが完成しました。
- 何か疑問がありましたら、こちらで質問してください
- サインイン:app.supabase.com