nuxt-app-config v1.0.2

Nuxt App Config

Extends the built-in app config feature.

Features

• Dynamically imports data for different environments
• Organizes files with the main config/ directory
• Supports multiple file formats (.ts, .js, .mjs)
• Lightweight and flexible solution
• Designed for Nuxt 3+
• TypeScript friendly
• Super easy to use
• No dependencies

Quick Start

1. Install nuxt-app-config to your project

npm i -D nuxt-app-config

2. Enable the module in the main config file

// nuxt.config.ts

{
  modules: ['nuxt-app-config'],

  config: {
    /* Module options */
  }
}

That's it! Start developing your app!

Structure

Create a new config/ directory at the project's root.

The module will automatically scans the directory for the required files and merge their content with the Nuxt app config option.

Configuration parameters will be available globally depending on your current environment, for example if you are in dev mode you will be able to access dev data and vice versa.

Also, defaults are available in all environments and can be overridden in a specific environment if needed.

.
├── .nuxt/
│
├── config/
│   ├── defaults.ts
│   ├── development.ts
│   └── production.ts
│
└── nuxt.config.ts

defaults

Contains all default parameters that are available in all environments.

Also, it can be overwritten with development or production files if needed.

development

Contains parameters specific to the development environment.

production

Contains parameters specific to the production environment.

Options

The module is written in TypeScript so it improves the development experience with detailed descriptions, examples, and auto-hinted configuration right in the code editor.

Defaults

// nuxt.config.ts

{
  config: {
    dir: 'config',
    files: {
      defaults: 'defaults',
      development: 'development',
      production: 'production'
    }
  }
}

dir

• Type: string
• Default: config

Specifies the name for the config directory.

Feel free to rename it as needed.

{
  dir: 'app-config'
}

Use it like this:

├── app-config/
│   │── defaults.ts
│   │── development.ts
│   └── production.ts

files

• Type: object
• Default: { ... }

Specifies the file names that will be used in the config directory.

All files supports .ts, .js, and .mjs formats.

files.defaults

• Type: string
• Default: defaults

Specifies the name for the defaults file.

{
  defaults: 'def'
}

Use it in the directory:

├── config/
│   └── def.ts

files.development

• Type: string
• Default: development

Specifies the name for the development file.

{
  development: 'dev'
}

Use it in the directory:

├── config/
│   └── dev.ts

files.production

• Type: string
• Default: production

Specifies the name for the production file.

{
  production: 'prod'
}

Use it in the directory:

├── config/
│   └── prod.ts

Show Support

This is a free and open source project available to everyone. If you like it, leave a star to show your support.

Starring a repository

Navigate to the top-right corner of the page and click the ☆ Star button.

License

Nuxt App Config

MIT License

Copyright © Ivo Dolenc

Developed in Croatia 🇭🇷