こんにちは。齋藤（@wtoddev）です。
今回は遊び半分でSupabaseを使用してみたので、Nuxtな環境でSupabaseで作成したテーブルの情報を取得して出力するまでの手順を備忘録的に記したいと思います。

ゴール

今回はただ単純にテーブルに記入したデータを取得してそのまま表示させることをゴールとします。

実験環境

今回の環境は以下の通りです。先日リリースされたNuxtの最新バージョンである3.8.0を使用しています。

├── nuxt@3.8.0
├── sass@1.69.5
├── typescript@5.2.2
├── vue-router@4.2.5
├── vue-tsc@1.8.22
└── vue@3.3.7

実際にやってみる

Supabase側とアプリケーション側とに分けて説明します。

Supabase側

今回はSupabaseの説明は割愛します。使用するプロダクトは「Database」です。

テーブルを作成する

ダッシュボードにてテーブルを作成します。
一通り記入が完了したらテーブル右上の「Realtime on」をEnableにしておきます。

ポリシーを作成する

テーブルを作成した時点でAPIも有効になるのですが、初期状態ですとAPIを通じた読み書きは一切できないようになっていますので、アクセス権限のポリシーを設定する必要があります。

ダッシュボードのサイドバーから「Authentication」に移動し、さらに「Policies」を選択します。
先程作成したテーブルの「New Policy」を選択します。

すると、このようなダイアログが出現します。テンプレートを使用する場合は上の「Get started quickly」を選択します。状況にあわせて適当なテンプレートを選択し、ポリシーを設定してください。

アプリケーション側

`@nuxtjs/supabase` を導入する

Nuxtの場合は@nuxtjs/supabaseというインテグレーションのためのプラグインが用意されていますので、こちらをインストールします。

npm install @nuxtjs/supabase --save-dev

インストールが完了したら、nuxt.config.tsに設定を追加します。

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/supabase'],
})

初期状態では自動的に/loginにリダイレクトする設定がされていますので、不要な場合は以下の項目も追加をしてください。

nuxt.config.ts

export default defineNuxtConfig({
  supabase: {
        redirect: false
    }
})

`.env`を作成する

APIを使用するために.envにProjectのAPIの情報を追加します。
Project URLとAPI Keyを以下のフォーマットで追加をします。

.env

SUPABASE_URL="https://example.supabase.co"
SUPABASE_KEY="<your_key>"

型定義ファイルを作成する

TypeScriptを使用している場合は型定義ファイルを作成しておくことをおすすめします。

テーブルページのAPIタブ最下部でテーブルの型定義ファイルをダウンロードすることができますので、./types/にdetabase.types.tsとしておいておきます。

database.types.ts

export type Json =
  | string
  | number
  | boolean
  | null
  | { [key: string]: Json | undefined }
  | Json[]

export interface Database {
  public: {
    Tables: {
      "hogehoge": {
        Row: {
          created_at: string
          display_name: string
          id: number
          user_name: string
        }
        Insert: {
          created_at?: string
          display_name: string
          id?: number
          user_name: string
        }
        Update: {
          created_at?: string
          display_name?: string
          id?: number
          user_name?: string
        }
        Relationships: []
      }
    }
    Views: {
      [_ in never]: never
    }
    Functions: {
      [_ in never]: never
    }
    Enums: {
      [_ in never]: never
    }
    CompositeTypes: {
      [_ in never]: never
    }
  }
}

データを取得して出力する

scriptは以下の様に記述します。

hoge.vue

<script setup lang="ts">
import { type Database } from '../types/database.types'

const supabase = useSupabaseClient<Database>()

const { data } = await supabase
    .from('hogehoge') // ここにテーブルの名称
    .select('*') // *でテーブルのすべての列要素を取得
</script>

dataは配列として返されるためtemplateを以下の様にしてみると、無事に吐き出されました。

hoge.vue

<template>
    <ul v-for="item,i in data" :key="i">
        <li>{{ item.user_name }} / {{ item.display_name }}</li>
    </ul>
</template>

出力結果

<ul>
    <li>test1 / Test1</li>
    <li>test2 / Test2</li>
</ul>

さいごに

今回は記述すべきコードの量も非常に少なく、初心者にも非常に扱いやすいBaaSであるSupabaseを使用してみました。
皆様のSupabaseのはじめの一歩の一助となりましたら幸いです。

ご精読ありがとうございました。

NuxtでSupabaseで作成したテーブルの情報を取得して出力するまで

ゴール