nuxt-remote-config v0.1.1

Nuxt Remote Config

Under Development

Why?

You create and deploy an amazing Nuxt App. Then you need to change few parameters, maybe a message in the header to users, changing theme variant based on an special occasion, or take site down for maintenance.

Typically, it is done by either commiting a new change to the website and waiting deployment or using a hosted CMS service and server-side-rendering to apply the config.

This module makes it super easy by removing all complexity of setting up a remote CMS and handling different rendering modes by providing a super easy approach to dynamically change your application configration using Nuxt 3 app config.

Usage

1. Install nuxt-remote-config as dev dependency:

# npm
npm i -D nuxt-remote-config

# pnpm
pnpm add -D nuxt-remote-config

# yarn
yarn add nuxt-remote-config

2. Add module to nuxt.config:

export default defineNuxtConfig({
  module: [
    'nuxt-remote-config'
  ]
})

3. Setup config registry (see next sections)

Configuration Registry

In order to use this module on your website, you need a configuration registry.

OpenKV

Experimental: OpenKV is under development and service usage might change. Anybody can edit the config at the moment!

• Head to https://openkv.unjs.io/ and create a namespace and take the id

Define in nuxt.config:

export default defineNuxtConfig({
  remoteConfig: {
    id: '<openkv namespace id>'
  }
})

Alternatively create .nuxtrc and set namespace id:

remoteConfig.id=<openkv namespace id>

Custom Registry

You custom registry's url should respond to /{key} with a JSON string:

Define in nuxt.config:

export default defineNuxtConfig({
  remoteConfig: {
    url: 'https://my-custom-registry.com'
  }
})

Alternatively create .nuxtrc and set url:

remoteConfig.url=https://my-custom-registry.com

Note: You can use {id} placeholder that is replaced with id configuration.

Module Options

endpoint

Registry endpoint. You can customize it at runtime using NUXT_REMOTE_CONFIG_ENDPOINT

Development

• Run npm run dev:prepare to generate type stubs.
• Use npm run dev to start playground in development mode.