A supa simple wrapper around Supabase.js to enable usage within Nuxt.
This package uses vue-supabase.
yarn add nuxt-supabase
Add the following to your nuxt.config.js file.
modules: [
['nuxt-supabase', {
supabaseUrl: 'YOUR_SUPABASE_URL',
supabaseKey: 'YOUR_SUPABASE_KEY'
supabaseOptions: {
schema: 'public',
headers: { 'x-my-custom-header': 'my-app-name' },
autoRefreshToken: true,
persistSession: true,
detectSessionInUrl: true
}
}]
],
Add the package to your tsconfig.json to make typescript aware of the additional types to the the nuxt context
{
"compilerOptions": {
"types": [
"@nuxt/types",
"nuxt-supabase"
]
}
}
You can then use supabase within your Nuxt context, or Vue components.
<script>
export default {
async asyncData({ $supabase }) {
return {
events: await $supabase.from("events").select("*");
}
}
}
</script>
<script>
export default {
data() {
return {
events: null,
};
},
methods: {
async getEvents() {
this.events = await this.$supabase.from("events").select("*");
},
},
};
</script>