Currently facing an issue where I am unable to access my private environment variables. I understand that I can only retrieve them when my page is server-side rendered (SSR). Strangely, even though I have never disabled SSR, when I log console.log(process.server), it always returns false.
Here is a snippet of my nuxt.config.ts file:
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
ssr: true,
routeRules: {
'/portal/**': { ssr: false },
'/checkout/**': { ssr: false }
},
runtimeConfig: {
stripeKey: '',
public: {
API_BASE_URL: process.env.API_BASE_URL || "http://192.168.1.100:8000/api",
}
},
modules: [
'@nuxtjs/i18n',
'@pinia/nuxt',
],
css: [
'@/assets/css/main.css',
'@/assets/css/colors.scss',
'vuetify/lib/styles/main.sass',
'primevue/resources/themes/lara-light-blue/theme.css',
'primevue/resources/primevue.css',
'primeicons/primeicons.css',
'@fortawesome/fontawesome-svg-core/styles.css'
],
build: {
transpile: [
'primevue',
'vuetify'
]
},
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
app: {
head: {
script: [{ src: "https://js.stripe.com/v3/" }],
title: '',
meta: [
{
name: 'color-scheme',
content: 'only light'
}
],
link: [
{
href: 'https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined',
rel: 'stylesheet',
}
]
}
},
i18n: {
lazy: true,
langDir: "locales",
strategy: "no_prefix",
locales: [
{
code: 'en',
iso: 'en',
name: 'English',
file: 'en.json'
},
{
code: 'nl-Nl',
iso: 'nl-NL',
name: 'Dutch',
file: 'nl-NL.json'
}
]
}
})