please help me i’ve been stuck for 3 days and no help for nuxt found online, my project can’t access the env variables, I have provided both the key and url and yet it tells me to provide them. the following are the codes form all the files (env, pinia, supabase.js file, home page, nuxt config)
.env (is in root directory):
SUPABASE_URL="https://ztmfoojjicbdjmqorftm.supabase.co"
SUPABASE_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inp0bWZvb2pqaWNiZGptcW9yZnRtIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTUzNDk0NjksImV4cCI6MjAzMDkyNTQ2OX0.9Wv9iPIxl5vI9hSDt6zX62wT1YLlS_gIF84SYXEGxts"
supabase.js file:
import { createClient } from '@supabase/supabase-js'
const supabaseUrl = process.env.SUPABASE_URL
const supabaseKey = process.env.SUPABASE_KEY
const supabase = createClient(supabaseUrl, supabaseKey)
export default supabase
nuxt config file:
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
css: ['~/assets/css/main.css'],
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
modules: [
'@nuxtjs/supabase',
'@pinia/nuxt',
],
supabase: {
redirect: false,
redirectOptions: {
login: '/login',
callback: '/confirm',
include: undefined,
exclude: [],
cookieRedirect: false,
},
}
})
pinia file:
import { defineStore } from "pinia";
import supabase from "~/supabaseClient";
export const useSmoothies = defineStore ('smoothies', {
state: () => ({
smoothies: [],
}),
actions: {
async fetchSmoothies () {
const {data} = await supabase.from('smoothies').select()
this.smoothies = data
}
}
})
home page:
<template>
<div v-for="smoothie in store.smoothies">
{{ smoothie.title }}
</div>
</template>
<script setup>
import { useSmoothies } from '~/stores/smoothies';
const store = useSmoothies()
onMounted(() => {
store.fetchSmoothies()
})
</script>
tried to fetch Supabase using .env variables, can’t access .env variables. Says provide url and key.
Sangar Sdiq Khoshnaw is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.