supabase-community / nuxt-supabase

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

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.

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>

nuxt-supabase's Issues

Typing doesn't work

Bug report

Describe the bug

In VS Code, when hovering $supabase in this.$supabase, its type is any.

To Reproduce

1. Use the snippet from the README example in VS Code
2. Hover $supabase with your mouse

Expected behavior

$supabase should be typed.

Screenshots

System information

• OS: Windows 10
• Browser (if applies) Firefox Developer Edition
• Version of supabase-js: None
• Version of Node.js: 14.17.1

Add environment variables example

Improve documentation

Describe the problem

Storing sensitive data in environment variables is better for security reasons. However, Nuxt approach concerning those variables is not easy to understand.

Describe the improvement

Add an example with the supabaseUrl and supabaseKey using environment variables.

Additional context

Depending on the version of Nuxt, there are 3 different ways of doing that: env, publicRuntimeConfig or privateRuntimeConfig.

TS2339: Property '$supabase' does not exist on type 'x'. - nuxt-property-decorator

Bug report - TS2339: Property '$supabase' does not exist on type 'x'. - nuxt-property-decorator

Description

Hello, I already reported this error on the last pull request, it's still the error I get when I use the whole thing with the functions from nuxt-property-decorator:

The funny thing is that everything works though:

Here the complete code:

Also added a ts-shim.d.ts and types

Are there perhaps other ways I can set this up?

System information

• OS: Windows
• Browser: Chromium
• Version of supabase-js: ^2.0.0
• Version of Node.js: v14.17.4.
• Version of nuxt-property-decorator: ^2.9.1
• IDE: PhpStorm 2021.2

Nuxt/Auth provider

We should add a Nuxt auth provider. Details here:

nuxt-community/auth-module#1082

Nuxt 3 support

Hi! Currently, we are listing nuxt-supabase as official Nuxt+Supabase integration. Thanks for your works @scottrobertson @sduduzog

Nuxt 3 beta is out for a while and @wobsoriano already started a nice Supabase module for Nuxt 3 (nuxt3-supabase)

I would like to see if possible, we collaborate together to make a new Major version of this module for Nuxt 3 and Nuxt 2 Bridge support in a single place (superbase-community) to ensure it keeps maintained in good hands 💚

@wobsoriano If you could make an initial PR, I and @Atinux can help to make it stable.

vue+supabase supabaseOptions is not being respected by nuxt+supabase

Example - passing a different schema:

  modules.push(['nuxt-supabase', {
    supabaseUrl,
    supabaseKey,
    supabaseOptions: {schema: "somethingelse"}
  }])

But the schema remains public and nothing changes.

Expected behavior

VueSupabaseClient {
  ..
  schema: "somethingelse"
}

How to access supabase in server-middleware api?

How to access the nuxt supabase module in server-middleware/rest.js?

//rest.js

app.all('/getJSON', async (req, res) => {
console.log('req', req.apikey)
console.log(supabase)
const { data, error } = await supabase
.from('userdetails')
.select('config')
.eq('apikey', req.apikey)
res.json({ data: data })
})

nuxt-supabase should depend on vue-supabase and not supabase-js

Feature request

Is your feature request related to a problem? Please describe.

Currently there's no big problem but this would remove some inconvenience when maintaining both the repositories.

A clear and concise description of what you want and what your use case is.
When vue-supabase is setup to support both Vue2 and Vue3 there wont be any work needed to be done this side apart from a version bump. So will be the case for any feature that will be added to vue-supabase and any issues raised will most likely need to be solved in one place than 2.

Describe the solution you'd like

nuxt-supabase should just have vue-supabase as a dependency and it should use it underneath to setup the module

Describe alternatives you've considered

None so far

Additional context

I'm also happy to give this a shot, worst case scenario is this issue being picked up and fixed by anyone else in the community should you not have any time to look into it.

Cannot use import statement outside a module

Bug report

After setup the module using npm I have an error that says "Cannot use import statement outside a module.

To Reproduce

Clone this project and follow the instructions provided in the README of the repo.

Expected behavior

That the module works 😆

Screenshots

System information

• OS: Windows (I test it using PowerShell & Debian WSL)
• Version of supabase-js: 1.9.0
• Version of Node.js: 15.13.0
• Version of NPM: 7.8.0

TypeError: kit.addServerMiddleware is not a function.

Bug report

TypeError: kit.addServerMiddleware is not a function

Describe the bug

Clould'nt start nuxt dev server.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Create Nuxt 2 project with the nuxt-app with

? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Template engine: HTML
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)

2. Add this package to the project and add nuxt-supabase module to nuxt.config.js.
   
3. Run the yarn run dev
4. See error

Expected behavior

I expected to run the nuxt server corectlly.

Screenshots

System information

• OS: Ubuntu 20.04 LTS
• Version of nuxt-supabase: ^2.3.1
• Version of Node.js: v16.14.0

Additional context

I guess the problem happend from

nuxt-supabase/src/module.ts

Lines 38 to 41 in 271db1b

	addServerMiddleware({
	path: "/api/auth",
	handler: authHandler(resolvedOptions),
	});