@nuxt/theme

[![npm version][npm-v-src]][npm-v-href] [![npm downloads][npm-d-src]][npm-d-href] [![ci][ci-src]][ci-href]

Usage no npm install needed!

<script type="module">
  import nuxtTheme from 'https://cdn.skypack.dev/@nuxt/theme';
</script>

README

@nuxt/theme

npm version npm downloads ci

Add theme/extends support to Nuxt 2 projects!

Features

  • Forward compatible with Nuxt 3 multi Apps
  • Support nested extends
  • Smartly merge config and hooks
  • Allow theme development to be like a normal nuxt project

Usage

Common Setup

Install @nuxt/theme as a dependency:

# yarn
yarn add @nuxt/theme

# npm
npm i @nuxt/theme

Update nuxt.config file:

import { resolveConfig } from '@nuxt/theme'

export default resolveConfig({
  // Your actual Nuxt configuration
})

Theme Consumer

Use extends key in nuxt.config:

import { resolveConfig } from '@nuxt/theme'

export default resolveConfig({
  extends: '@nuxt/docs-theme',
})

Theme Author

  1. Update nuxt.config and ensure required rootDir and name properties are provided
import { resolveConfig } from '@nuxt/theme'

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

Note: If you are extending another theme, rootDir should be ONLY provided if you want to also extend project.

  1. Instead of using ~/ or @/ aliases, use ~myTheme or @myTheme

License

MIT. Made with 💖