Nuxt•4w ago

Good place to add a `constants.ts` file or constant variables used throughout the Nuxt 4 instance?

I need a good place to add in consant variables that aren't env related. Any suggestions would be great!

2 Replies

Hi @Rylan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, there are several good options for placing constant variables in Nuxt 4: Recommended Approaches 1. Utils Folder The /utils folder is a suitable location for constant variables. Files in this folder are auto-imported by Nuxt. As mentioned in Where can arbitrary code be placed in Nuxt 3?, you can place your constants.ts file directly in the utils folder:

// utils/constants.ts
export const MY_CONSTANT = 'value'
export const ANOTHER_CONSTANT = 42

// utils/constants.ts
export const MY_CONSTANT = 'value'
export const ANOTHER_CONSTANT = 42

Note: By default, Nuxt doesn't scan nested folders in /utils. If you need nested organization, you have two options: 1. Create an index.js to re-export from subfolders 2. Configure auto-imports in nuxt.config.ts:

imports: {
  dirs: [
    'utils/**'
  ]
}

imports: {
  dirs: [
    'utils/**'
  ]
}

2. Shared Folder (Nuxt 4) According to the knowledge sources, Nuxt 4 introduces a new /shared folder specifically designed for utilities that need to be available across both client and server contexts. As discussed in feat(nuxt): add type declarations for shared auto-imports, the shared folder provides: - ✅ Auto-imports available in client, server, and shared contexts - ✅ Full TypeScript support - ✅ Strict separation between server and client context when needed This would be ideal for constants used throughout your application:

// shared/constants.ts
export const MY_CONSTANT = 'value'

// shared/constants.ts
export const MY_CONSTANT = 'value'

3. Custom Folder As noted in the knowledge sources, you can create your own custom folder with any name. The only consideration is that you'll need to handle manual imports or configure auto-imports in your nuxt.config.ts. The /utils or /shared (for Nuxt 4) folders are your best options for constant variables, with automatic imports and proper TypeScript support. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

Gaming

Programming

Good place to add a `constants.ts` file or constant variables used throughout the Nuxt 4 instance?

Did you find this page helpful?