Skip to content

Docs Improv #30

@jswhisperer

Description

@jswhisperer

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentation

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions