supabase-community / nuxt-supabase

A supa simple wrapper around Supabase.js to enable usage within Nuxt.
https://supabase.io
MIT License
167 stars 17 forks source link

Docs Improv #30

Open gregpalaci opened 4 months ago

gregpalaci commented 4 months ago

Improve documentation

Link

Add a link to the page which needs improvement (if relevant)

Describe the problem

It's not very clear this repo is specifically for nuxt 2 and not nuxt 3 as the first line in the readme.md reads nuxt3

Describe the improvement

Nuxt 2 + Supabase

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

This package uses vue-supabase.

Install

yarn add nuxt-supabase

Configure

Add the following to your nuxt.config.js file.

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

{
  "compilerOptions": {
    "types": [
      "@nuxt/types",
      "nuxt-supabase"
    ]
  }
}

Usage

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>

For Nuxt 3 See this link

Nuxt 3