https://github.com/supabase-community/vue-supabase

A supa simple wrapper around Supabase.js to enable usage within Vue.
https://github.com/supabase-community/vue-supabase

supabase vue

Last synced: about 1 month ago
JSON representation

A supa simple wrapper around Supabase.js to enable usage within Vue.

• Host: GitHub
• URL: https://github.com/supabase-community/vue-supabase
• Owner: supabase-community
• License: mit
• Created: 2021-03-05T18:53:20.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-11-01T17:33:03.000Z (about 1 year ago)
• Last Synced: 2024-10-05T04:15:53.646Z (about 1 month ago)
• Topics: supabase, vue
• Language: TypeScript
• Homepage: https://supabase.io
• Size: 428 KB
• Stars: 87
• Watchers: 6
• Forks: 7
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue + Supabase

A supa simple wrapper around Supabase.js to enable usage within Vue.

## Installation

```bash

# Vue 3.x

yarn add vue-supabase

# Vue 2.x

yarn add @vue/composition-api vue-supabase

```

Note: Currently `@vue/composition-api` is required for this package to work for projects using Vue 2.x.

## Usage

### Vue 2.x

```js

import VueSupabase from "vue-supabase";

Vue.use(VueSupabase, {

  supabaseUrl: "",

  supabaseKey: "",

  supabaseOptions: {},

});

```

```js

const { data, error } = await this.$supabase.from("events").select("*");

```

### Vue 3.x

```js

import VueSupabase from 'vue-supabase'

const app = createApp(...)

app.use(VueSupabase, {

  supabaseUrl: '',

  supabaseKey: '',

  supabaseOptions: {}

})

app.mount(...)

```

#### Options API

```js

const { data, error } = await this.$supabase.from("events").select("*");

```

#### Composition API

```js

import { useSupabase } from "vue-supabase";

const supabase = useSupabase();

const { data, error } = await supabase.from("events").select("*");

```

Here are a couple of composables available with Vue 3.x or Vue 2.x + Composition API

```js

import { useSupabaseAuth, useSupabaseStorage } from "vue-supabase";

const auth = useSupabaseAuth();

const storage = useSupabaseStorage();

const { data } = await storage.listBuckets();

await auth.signOut();

```