Nuxt•2mo ago

Having issues reading process.env in nuxt 4 app

Vue: Cannot find name process. Do you need to install type definitions for node? Try npm i --save-dev @types/node and then add node to the types field in your tsconfig. I get this when clling process.env inside my components

20 Replies

kapa.ai•2mo ago

Hi @yuliiy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt 4, you should not access environment variables directly using process.env inside your Vue components. Instead, you should use the useRuntimeConfig() composable to access values defined in your runtimeConfig in nuxt.config.ts. This is the recommended and supported way, as direct access to process.env is only available during build time, not at runtime or in client-side code. Example:

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '', // private, server only
    public: {
      apiBase: '', // public, available client-side
    },
  },
})

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    apiSecret: '', // private, server only
    public: {
      apiBase: '', // public, available client-side
    },
  },
})

# .env file
NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=<https://nuxtjs.org>

# .env file
NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=<https://nuxtjs.org>

<script setup lang="ts">
const config = useRuntimeConfig()
console.log(config.public.apiBase) // Correct way to access env variables
</script>

<script setup lang="ts">
const config = useRuntimeConfig()
console.log(config.public.apiBase) // Correct way to access env variables
</script>

Why you get the error:
The error occurs because process.env is not available in the browser, and Nuxt does not expose it to your components. You should migrate all usages of process.env in your components to useRuntimeConfig() instead. This is well-documented in the official Nuxt docs and migration guides Nuxt 4 Runtime Config Migration Guide. Summary:
- Do not use process.env in Vue components. - Use useRuntimeConfig() to access environment variables. - Make sure your variables are defined in runtimeConfig in nuxt.config.ts and use the NUXT_ prefix in your .env file for overrides. For more details, see the official documentation: Nuxt 4 Runtime Config. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@715700361167634442> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

yuliiyOP•2mo ago

@kapa.ai Im having issue using my custom api import { ofetch, type $Fetch } from 'ofetch' import { defineNuxtPlugin, useRuntimeConfig } from '#app' export default defineNuxtPlugin((nuxtApp) => { const { public: { apiBase } } = useRuntimeConfig() // ofetch.create returns a CALLABLE function const api = ofetch.create({ baseURL: apiBase, // onRequest/onResponse/onResponseError optional }) // inject the function directly nuxtApp.provide('api', api as $Fetch) }) and my custom composable which uses the custom api // composables/api-helpers.ts import type { NitroFetchRequest } from 'nitropack' import type { UseFetchOptions } from 'nuxt/app' import type { MaybeRefOrGetter } from 'vue' import type { $Fetch } from 'ofetch' export function useAPI<T>( url: string | (() => string), options?: UseFetchOptions<T>, ) { return useFetch(url, { ...options, $fetch: useNuxtApp().$api as typeof $fetch }) } I use services for my api calls and store where i call them Im lost to when should i use the composable and when should i use the usesyncData useAPI()

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, here’s how you should decide when to use your custom composable (useAPI) versus useAsyncData: When to use your custom composable (useAPI) Your useAPI composable is a wrapper around useFetch that injects your custom $api instance. This is the recommended approach for fetching data in the setup function of components, plugins, or middleware—especially when you want to leverage SSR, payload transfer, and avoid double-fetching on hydration. It’s also useful when you want to use your custom API logic (e.g., base URL, interceptors, auth headers) everywhere in your app in a consistent way. Example usage:

const { data, error } = await useAPI('/users')

const { data, error } = await useAPI('/users')

This is equivalent to using useFetch with your custom $fetch instance, and is the cleanest way to fetch data in most component scenarios Custom useFetch in Nuxt. When to use useAsyncData useAsyncData is more flexible and is recommended when: - You need to perform multiple async operations (e.g., multiple $fetch calls in parallel or with custom logic). - You want fine-grained control over the key, caching, or how/when the data is fetched. - You are not using a standard fetcher (e.g., you’re calling a third-party SDK, or a CMS with its own query layer). You can still use your custom $api inside useAsyncData if you need that flexibility:

const { data } = await useAsyncData('users', () => useNuxtApp().$api('/users'))

const { data } = await useAsyncData('users', () => useNuxtApp().$api('/users'))

Or, if you want to use your custom composable for consistency, you can use useAPI everywhere you would use useFetch. Summary Table | Use Case | Recommended Approach | |-------------------------------------------|-----------------------------| | Standard API call in setup | useAPI (your composable) | | Multiple async operations or custom logic | useAsyncData + $api | | Need for custom fetcher | useAPI or useAsyncData | | In services (outside setup) | $api directly | Key Points from Docs - useFetch (and your useAPI composable) is a wrapper around useAsyncData + $fetch, and is the most straightforward way to fetch data in components, plugins, or middleware Custom useFetch in Nuxt. - Use useAsyncData when you need more control or are not using a standard fetcher Data Fetching. - Both approaches avoid double-fetching and handle SSR payload transfer. If you’re using services for API calls and want to keep things consistent, prefer your useAPI composable in most places, and fall back to useAsyncData for more complex scenarios. If you need more specific examples or have a particular use case, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@715700361167634442> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

yuliiyOP•2mo ago

@kapa.ai how do i setup nuxt 4 with nuxt UI 4 and nuxt I18n internlistion with 3 languages arabic french and english to work because i did and only default one loads the others no

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To set up Nuxt 4 with Nuxt UI 4 and Nuxt I18n for three languages (Arabic, French, and English), you need to ensure that your configuration is correct and that your locale files and structure are properly set up. Based on the knowledge sources, here’s how you should proceed: --- 1. Install Required Modules Install the necessary modules:

npm install @nuxt/ui @nuxtjs/i18n

npm install @nuxt/ui @nuxtjs/i18n

--- 2. Configure nuxt.config.ts Add both modules and configure @nuxtjs/i18n with your languages. Here’s an example configuration:

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxtjs/i18n'
  ],
  i18n: {
    locales: [
      { code: 'en', name: 'English', language: 'en-US', dir: 'ltr' },
      { code: 'fr', name: 'French', language: 'fr-FR', dir: 'ltr' },
      { code: 'ar', name: 'Arabic', language: 'ar', dir: 'rtl' }
    ],
    strategy: 'prefix_except_default',
    defaultLocale: 'en',
    vueI18n: './i18n.config.ts', // See next step
  }
})

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxtjs/i18n'
  ],
  i18n: {
    locales: [
      { code: 'en', name: 'English', language: 'en-US', dir: 'ltr' },
      { code: 'fr', name: 'French', language: 'fr-FR', dir: 'ltr' },
      { code: 'ar', name: 'Arabic', language: 'ar', dir: 'rtl' }
    ],
    strategy: 'prefix_except_default',
    defaultLocale: 'en',
    vueI18n: './i18n.config.ts', // See next step
  }
})

Make sure you use the correct keys (code, name, language, dir) and that your defaultLocale matches one of your locales. The strategy: 'prefix_except_default' will prefix all languages except the default with their code in the URL Nuxt Content I18n Integration. --- 3. Create i18n.config.ts This file should export your translations and i18n options:

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: { welcome: 'Welcome' },
    fr: { welcome: 'Bienvenue' },
    ar: { welcome: 'أهلاً وسهلاً' }
  }
}))

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: { welcome: 'Welcome' },
    fr: { welcome: 'Bienvenue' },
    ar: { welcome: 'أهلاً وسهلاً' }
  }
}))

Reference this file in your nuxt.config.ts as shown above Stack Overflow: i18n not working after update. --- 4. Organize Your Content (If Using Nuxt Content) If you use Nuxt Content, organize your content in language-specific folders:

content/
  en/
    index.md
  fr/
    index.md
  ar/
    index.md

content/
  en/
    index.md
  fr/
    index.md
  ar/
    index.md

And set up collections in content.config.ts as shown in the docs Nuxt Content I18n Integration. --- 5. Troubleshooting - Make sure your locale codes in locales and in your translation messages match. - If only the default language loads, check that your translation files or messages exist for all languages. - If using browser language detection, ensure the config is in nuxt.config.ts, not i18n.config.ts Stack Overflow: i18n browser detection not working. --- If you follow these steps and still only see the default language, double-check your configuration and ensure your translation files/messages are present for all languages. If you need browser language detection, add the detectBrowserLanguage option to your nuxt.config.ts under i18n (not in i18n.config.ts) Stack Overflow: i18n browser detection not working. --- If you need more specific help, please share your current nuxt.config.ts and i18n.config.ts files. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@715700361167634442> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

yuliiyOP•2mo ago

@kapa.ai lets test if content translates correctly

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To test if content translates correctly in a Nuxt 4 project using Nuxt Content and Nuxt I18n, you should: 1. Organize your content in language-specific folders, such as content/en/, content/fr/, and content/ar/, each containing the relevant markdown files (e.g., index.md) Nuxt Content I18n Integration. 2. Configure your collections in content.config.ts to map each language folder to a collection:

   export default defineContentConfig({
     collections: {
       content_en: defineCollection({ type: 'page', source: { include: 'en/**', prefix: '' } }),
       content_fr: defineCollection({ type: 'page', source: { include: 'fr/**', prefix: '' } }),
       content_ar: defineCollection({ type: 'page', source: { include: 'ar/**', prefix: '' } }),
     },
   })

   export default defineContentConfig({
     collections: {
       content_en: defineCollection({ type: 'page', source: { include: 'en/**', prefix: '' } }),
       content_fr: defineCollection({ type: 'page', source: { include: 'fr/**', prefix: '' } }),
       content_ar: defineCollection({ type: 'page', source: { include: 'ar/**', prefix: '' } }),
     },
   })

3. Set up your dynamic page (e.g., pages/[...slug].vue) to fetch content based on the current locale:

   <script setup lang="ts">
   import { withLeadingSlash } from 'ufo'
   import type { Collections } from '@nuxt/content'

   const route = useRoute()
   const { locale } = useI18n()
   const slug = computed(() => withLeadingSlash(String(route.params.slug)))

   const { data: page } = await useAsyncData('page-' + slug.value, async () => {
     const collection = ('content_' + locale.value) as keyof Collections
     const content = await queryCollection(collection).path(slug.value).first()

     // Optional: fallback to default locale if content is missing
     if (!content && locale.value !== 'en') {
       return await queryCollection('content_en').path(slug.value).first()
     }

     return content
   }, {
     watch: [locale], // Refetch when locale changes
   })
   </script>
<template>
     <ContentRenderer v-if="page" :value="page" />
     <div v-else>
       <h1>Page not found</h1>
       <p>This page doesn't exist in {{ locale }} language.</p>
     </div>
   </template>

   <script setup lang="ts">
   import { withLeadingSlash } from 'ufo'
   import type { Collections } from '@nuxt/content'

   const route = useRoute()
   const { locale } = useI18n()
   const slug = computed(() => withLeadingSlash(String(route.params.slug)))

   const { data: page } = await useAsyncData('page-' + slug.value, async () => {
     const collection = ('content_' + locale.value) as keyof Collections
     const content = await queryCollection(collection).path(slug.value).first()

     // Optional: fallback to default locale if content is missing
     if (!content && locale.value !== 'en') {
       return await queryCollection('content_en').path(slug.value).first()
     }

     return content
   }, {
     watch: [locale], // Refetch when locale changes
   })
   </script>
<template>
     <ContentRenderer v-if="page" :value="page" />
     <div v-else>
       <h1>Page not found</h1>
       <p>This page doesn't exist in {{ locale }} language.</p>
     </div>
   </template>

4. Switch languages using your UI and verify that the content updates according to the selected language. If you follow this structure, your content should translate correctly when you change the language. If it does not, double-check your folder structure, collection configuration, and that your content files exist for each language Nuxt Content I18n Integration. If you need a complete working example, you can refer to the Nuxt Content i18n example repository and live demo provided in the documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@715700361167634442> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

yuliiyOP•2mo ago

@kapa.ai I just want to switch lnguages ffs why it's not working I just want arabic english nd french to work for my Nuxt 4 nuxt ui 4 setup with the new stupid folder structure

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand your frustration. Here’s a clear checklist based on the official Nuxt and Nuxt Content documentation for getting Arabic, English, and French language switching working in a Nuxt 4 project with the new folder structure and Nuxt UI 4: --- 1. Install Required Modules

npm install @nuxt/ui @nuxtjs/i18n

npm install @nuxt/ui @nuxtjs/i18n

--- 2. Project Structure (Nuxt 4 New Structure) Your folders should look like this:

app/
  components/
  pages/
  ...
nuxt.config.ts

app/
  components/
  pages/
  ...
nuxt.config.ts

The app/ directory is now the default for your source files in Nuxt 4 Nuxt 4 New Directory Structure.

--- 3. Configure nuxt.config.ts Add the i18n module and set up your languages:

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxtjs/i18n'
  ],
  i18n: {
    locales: [
      { code: 'en', name: 'English', language: 'en-US', dir: 'ltr' },
      { code: 'fr', name: 'French', language: 'fr-FR', dir: 'ltr' },
      { code: 'ar', name: 'Arabic', language: 'ar', dir: 'rtl' }
    ],
    defaultLocale: 'en',
    strategy: 'prefix_except_default',
    vueI18n: './i18n.config.ts'
  }
})

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxtjs/i18n'
  ],
  i18n: {
    locales: [
      { code: 'en', name: 'English', language: 'en-US', dir: 'ltr' },
      { code: 'fr', name: 'French', language: 'fr-FR', dir: 'ltr' },
      { code: 'ar', name: 'Arabic', language: 'ar', dir: 'rtl' }
    ],
    defaultLocale: 'en',
    strategy: 'prefix_except_default',
    vueI18n: './i18n.config.ts'
  }
})

Make sure your defaultLocale matches one of your locales and that the codes are consistent Nuxt Content I18n Integration.

--- 4. Create i18n.config.ts in the Root

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: { welcome: 'Welcome' },
    fr: { welcome: 'Bienvenue' },
    ar: { welcome: 'أهلاً وسهلاً' }
  }
}))

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: { welcome: 'Welcome' },
    fr: { welcome: 'Bienvenue' },
    ar: { welcome: 'أهلاً وسهلاً' }
  }
}))

This file is referenced in your nuxt.config.ts under vueI18n Stack Overflow: i18n not working after update.

--- 5. Language Switcher Example In your component, use the useI18n composable:

<script setup>
const { locale, setLocale } = useI18n()
</script>

<template>
  <button @click="setLocale('en')">English</button>
  <button @click="setLocale('fr')">Français</button>
  <button @click="setLocale('ar')">العربية</button>
  <p>{{ $t('welcome') }}</p>
</template>

<script setup>
const { locale, setLocale } = useI18n()
</script>

<template>
  <button @click="setLocale('en')">English</button>
  <button @click="setLocale('fr')">Français</button>
  <button @click="setLocale('ar')">العربية</button>
  <p>{{ $t('welcome') }}</p>
</template>

This will switch the language and update the translation Nuxt Content I18n Integration.

--- 6. Common Pitfalls - Do not put i18n config in the wrong file: The main i18n options (locales, defaultLocale, etc.) must be in nuxt.config.ts, not in i18n.config.ts Stack Overflow: i18n browser detection not working. - Check for typos: Locale codes must match everywhere. - Restart your dev server after making config changes. --- If you follow these steps and it’s still not working, please double-check your config files and folder structure. If you’re still stuck, share your actual nuxt.config.ts and i18n.config.ts so we can spot the issue together. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@715700361167634442> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

yuliiyOP•2mo ago

@kapa.ai the value of the locale is detected but it doesnt change

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If the value of the locale is detected but does not change when you try to switch languages, this is a common issue with Nuxt I18n configuration. Based on the knowledge sources, here are the most likely causes and solutions: 1. Configuration Placement
Make sure that your main i18n configuration (locales, defaultLocale, detectBrowserLanguage, etc.) is in your nuxt.config.ts and not in i18n.config.ts. Only the vueI18n option should point to your i18n.config.ts file. If you put the main config in the wrong file, language switching will not work as expected Nuxt 3 i18n browser detection not working Part 6. 2. Locale Codes Consistency
Double-check that the locale codes in your locales array, your translation messages, and your language switcher all match exactly. For example, if you use 'en', 'fr', and 'ar' in your config, you must use those exact codes everywhere. 3. Language Switcher Implementation
Your language switcher should use the setLocale function from useI18n. Example:

   <script setup>
   const { locale, setLocale } = useI18n()
   </script>

   <template>
     <button @click="setLocale('en')">English</button>
     <button @click="setLocale('fr')">Français</button>
     <button @click="setLocale('ar')">العربية</button>
     <p>{{ $t('welcome') }}</p>
   </template>

   <script setup>
   const { locale, setLocale } = useI18n()
   </script>

   <template>
     <button @click="setLocale('en')">English</button>
     <button @click="setLocale('fr')">Français</button>
     <button @click="setLocale('ar')">العربية</button>
     <p>{{ $t('welcome') }}</p>
   </template>

This approach is confirmed to work in the documentation and examples Nuxt Content I18n Integration. 4. Restart the Dev Server
After making changes to your config files, always restart your development server. Nuxt may not pick up changes to config files until you do so. 5. Check for Browser Language Detection Conflicts
If you have detectBrowserLanguage enabled, make sure it is configured in nuxt.config.ts and not in i18n.config.ts. Misplacement can cause the locale to be detected but not actually change Nuxt 3 i18n browser detection not working Part 6. If you have followed all these steps and the locale value still does not change, please share your actual nuxt.config.ts and i18n.config.ts files so the configuration can be reviewed for errors. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@715700361167634442> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

yuliiyOP•2mo ago

@kapa.ai is this setup ok? what should i fix

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, your setup approach is correct in principle, but there are a few critical points you must check to ensure language switching works in Nuxt 4 with Nuxt UI 4 and Nuxt I18n: 1. i18n Configuration Placement
- Your main i18n options (locales, defaultLocale, strategy, detectBrowserLanguage, etc.) must be in nuxt.config.ts. - Only the vueI18n option should point to your i18n.config.ts file, which contains the translation messages and Vue I18n-specific options.
This is a common source of issues if misconfigured Nuxt 3 i18n browser detection not working Part 6. 2. Locale Codes Consistency
- Ensure the locale codes in your locales array, your translation messages, and your language switcher all match exactly (e.g., 'en', 'fr', 'ar'). 3. Language Switcher Implementation
- Use the setLocale function from useI18n in your components to change the language.
Example:

   <script setup>
   const { setLocale } = useI18n()
   </script>
   <template>
     <button @click="setLocale('en')">English</button>
     <button @click="setLocale('fr')">Français</button>
     <button @click="setLocale('ar')">العربية</button>
   </template>

   <script setup>
   const { setLocale } = useI18n()
   </script>
   <template>
     <button @click="setLocale('en')">English</button>
     <button @click="setLocale('fr')">Français</button>
     <button @click="setLocale('ar')">العربية</button>
   </template>

This is the recommended approach Nuxt Content I18n Integration. 4. Restart the Dev Server
- After any config changes, restart your dev server to ensure changes are picked up. 5. Browser Language Detection
- If you use detectBrowserLanguage, ensure it is only in nuxt.config.ts and not in i18n.config.ts Nuxt 3 i18n browser detection not working Part 6. If you have followed these steps and your config matches the structure described above, your setup should work. If the locale is detected but not changing, double-check the placement of your config options and the exact codes used. If you want a more specific review, please provide your actual nuxt.config.ts and i18n.config.ts content. Otherwise, based on the knowledge sources, these are the main areas to check and fix. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@715700361167634442> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Having issues reading process.env in nuxt 4 app

Did you find this page helpful?