Skip to content

nuxt-contrib/nuxt-extend

Repository files navigation

nuxt-extend

npm version npm downloads ci

This utility allows extending a nuxt project based on another one by smartly merging nuxt.config files.

It can be useful if:

  • You want to share a base config across mono-repo projects
  • You want to create a multi-variant (like mobile/desktop) app
  • You want to create a reusable nuxt theme (like one for docs)

Note: Proper Multi-App (rfc) is comming with nuxt3 which also allows extending auto scanned directories like pages/ and store/ and merging them.

Mobile/Desktop Demo

See this example

Usage

Install nuxt-extend as a dependency:

# yarn
yarn add nuxt-extend

# npm
npm i nuxt-extend

Update nuxt.config file:

import { nuxtConfig } from 'nuxt-extend'

export default nuxtConfig({
  /* your actual nuxt configuration */
})

Parent

Use extends key in nuxt.config:

import { nuxtConfig } from 'nuxt-extend'

export default nuxtConfig({
  extends: '<path to base or npm package>',
})

Base

  • Update nuxt.config and ensure required rootDir and name properties are provided
import { nuxtConfig } from 'nuxt-extend'

export default nuxtConfig({
  rootDir: __dirname,
  name: 'myTheme',
}

Note: If you are extending recusively, srcDir should be ONLY provided one one level that implements actual pages/ and store/ (which is usually the base).

  • Instead of using ~/ or @/ aliases, use ~myTheme or @myTheme

License

MIT. Made with 💖