Nuxt•3y ago

Can't use module in .vue file

So i've installed npm i @nuxtjs/supabase and added it into the nuxt config. I know its working since the project url error is showing / solving when I add the url to my project. But i can't use this model in my .vue files. I try to use the useSupabaseClient but in my project it says undefined In vscode it doesn't show up in emmet abriviation and if I hover over it, it says any

13 Replies

Fabian B.•3y ago

Hi, can you show us how you’ve installed the module? Your nuxt config, your package.json, etc 🙂 thanks

DisplayrayOP•3y ago

I've installed it with npm i @nuxtjs/supabase package.json:

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "^3.1.2"
  },
  "dependencies": {
    "@nuxt/image-edge": "^1.0.0-27919678.2f5b64b",
    "@nuxtjs/supabase": "^0.3.1",
    "@nuxtjs/tailwindcss": "^6.3.1",
    "@vueuse/nuxt": "^9.12.0"
  }
}

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "^3.1.2"
  },
  "dependencies": {
    "@nuxt/image-edge": "^1.0.0-27919678.2f5b64b",
    "@nuxtjs/supabase": "^0.3.1",
    "@nuxtjs/tailwindcss": "^6.3.1",
    "@vueuse/nuxt": "^9.12.0"
  }
}

nuxt config:

export default defineNuxtConfig({
    modules: [
        "@nuxtjs/tailwindcss",
        "@nuxt/image-edge",
        "@vueuse/nuxt",
        "@nuxtjs/supabase"
    ],
    app: {
        head:{
            script: [
                {
                    key: 'fontawesome',
                    src: 'https://kit.fontawesome.com/***.js',
                    defer: true
                }
            ]
        }
    }
})

export default defineNuxtConfig({
    modules: [
        "@nuxtjs/tailwindcss",
        "@nuxt/image-edge",
        "@vueuse/nuxt",
        "@nuxtjs/supabase"
    ],
    app: {
        head:{
            script: [
                {
                    key: 'fontawesome',
                    src: 'https://kit.fontawesome.com/***.js',
                    defer: true
                }
            ]
        }
    }
})

And im using it like:

const supabase = useSupabaseClient();

const supabase = useSupabaseClient();

Fabian B.•3y ago

Have you added this to your .env:

SUPABASE_URL="https://example.supabase.com"
SUPABASE_KEY="<your_key>"

SUPABASE_URL="https://example.supabase.com"
SUPABASE_KEY="<your_key>"

Otherwise, can you remove your .nuxt folder and package-lock and reinstall dependencies?

DisplayrayOP•3y ago

Yes I have it Will try it when i'm at home still not working

Fabian B.•3y ago

And in which place are you trying to use useSupabaseClient? Cannot see any issue in your config Maybe you can show an implementation example thats not working

DisplayrayOP•3y ago

so I have a file pages/login.vue and in there im just trying to implement it:

<script setup>
definePageMeta({
    layout: "custom"
})

const supabase = useSupabaseClient()

const login = () => {
    supabase.auth.signInWithOAuth({
        provider: "discord"
    })
}
</script>

<script setup>
definePageMeta({
    layout: "custom"
})

const supabase = useSupabaseClient()

const login = () => {
    supabase.auth.signInWithOAuth({
        provider: "discord"
    })
}
</script>

DisplayrayOP•3y ago

In .nuxt/types I found a file that is called supabase.d.ts and it declare module '#supabase/server' with a slightly different name. If i try to use this one it adds a line to my code: import { serverSupabaseClient } from '#supabase/server';. This causes the error:

Fabian B.•3y ago

yeah this is only for usage inside server/ files

DisplayrayOP•3y ago

oh okay

Fabian B.•3y ago

It's strange since also your client implementation looks fine

Fabian B.•3y ago

Can you create a minimal reproduction? https://nuxt.com/docs/community/reporting-bugs#create-a-minimal-reproduction

Nuxt

Reporting Bugs

One of the most valuable roles in open source is taking the time to report bugs helpfully.

DisplayrayOP•3y ago

yes I tried it also with a new project of nuxt3, just installed supabase without anything else and it is still not working reproduktion works fine looks like an issue with my machine

Fabian B.•3y ago

Okay, let me know if you were able to resolve it

Gaming

Programming

Can't use module in .vue file

Did you find this page helpful?