Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/supabase-community/nuxt-supabase
A supa simple wrapper around Supabase.js to enable usage within Nuxt.
https://github.com/supabase-community/nuxt-supabase
nuxt supabase vue
Last synced: about 9 hours ago
JSON representation
A supa simple wrapper around Supabase.js to enable usage within Nuxt.
- Host: GitHub
- URL: https://github.com/supabase-community/nuxt-supabase
- Owner: supabase-community
- License: mit
- Created: 2021-03-06T02:07:01.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-16T12:15:42.000Z (over 1 year ago)
- Last Synced: 2024-09-22T03:38:21.738Z (6 days ago)
- Topics: nuxt, supabase, vue
- Language: TypeScript
- Homepage: https://supabase.io
- Size: 320 KB
- Stars: 167
- Watchers: 6
- Forks: 17
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Nuxt 3 + Supabase
- **Changelog**: https://github.com/nuxt-community/supabase-module/blob/main/CHANGELOG.md
- **Docs**: https://supabase.nuxtjs.org
- **Video**: https://www.youtube.com/watch?v=jIyiRT6zT8Q
- **GitHub**: https://github.com/nuxt-modules/supabase
- **Demo**: https://github.com/nuxt-modules/supabase/tree/main/demo#readme
# Nuxt 2 + Supabase
A supa simple wrapper around Supabase.js to enable usage within Nuxt.
This package uses [vue-supabase](https://github.com/supabase/vue-supabase).
## Install
```bash
yarn add nuxt-supabase
```
## Configure
Add the following to your nuxt.config.js file.
```js
modules: [
['nuxt-supabase', {
supabaseUrl: 'YOUR_SUPABASE_URL',
supabaseKey: 'YOUR_SUPABASE_KEY'
}]
],
```
### TypeScript
Add the package to your tsconfig.json to make typescript aware of the additional types to the the nuxt context
```json
{
"compilerOptions": {
"types": [
"@nuxt/types",
"nuxt-supabase"
]
}
}
```
## Usage
You can then use supabase within your Nuxt context, or Vue components.
```vue
export default {
async asyncData({ $supabase }) {
return {
events: await $supabase.from("events").select("*");
}
}
}
```
```vue
export default {
data() {
return {
events: null,
};
},
methods: {
async getEvents() {
this.events = await this.$supabase.from("events").select("*");
},
},
};
```