✨supabase with Vue3

Prepare

Create supabase account and create new project.
Create vue3 project

Install supabase

npm install @supabase/supabase-js

package.json

  "dependencies": {
    "@supabase/supabase-js": "^2.33.1",
    "vue": "^3.3.4",
  },

Create table

make table

set column.

insert row for testing API

Check your URL & KEY

Set files

.env

VITE_SUPABASE_URL=*
VITE_SUPABASE_ANON_KEY=*

src/supabase.js

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = ({}).VITE_SUPABASE_URL
const supabaseAnonKey = ({}).VITE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Call API

src/HomeView.vue

<script setup>
  import { ref } from 'vue';
  import { supabase } from '@/supabase.js'


  const loading = ref(true)
  const data = ref(null)
  
  async function getData() {
    try {
      loading.value = true
      const { error, data: _data} = await supabase.from('test').select('*')
      data.value = _data
      if (error) throw error
    } catch (e) {
      alert(e.message)
    } finally {
      loading.value = false
    }
  }
  getData()
</script>


<template>
  <main>
    <section>
      <p v-if="loading">loading</p>
      <p v-else>{{ data }}</p>
    </section>
  </main>
</template>

Result

Request URL:
https://*.supabase.co/rest/v1/test?select=*
Request Method:
GET
Status Code:
200

but you get empty array.

Change policies

This time, disable RLS for operation confirmation.



Warning: RLS is disabled. Your table is publicly readable and writable.
Anyone with the anon. key can modify or delete your data. You should turn on RLS and create access policies to keep your data secure.

Check result Again

Ref

https://supabase.com/docs/guides/getting-started/tutorials/with-vue-3