Nuxt Custom Element

Publish your Nuxt SPA as a vue-custom-element

nuxt-custom-element is a Nuxt.js module that uses vue-custom-element to publish your Nuxt SPA as a custom element / web-component.

Example

See the example folder for an example project.

To run the example locally, clone this repo, run yarn install or npm i and then yarn example or npm run example

Installation

Install the module package

$ yarn add nuxt-custom-element
$ npm i nuxt-custom-element

Next add the nuxt-custom-element module to your config:

// nuxt.config.js
  mode: 'spa', // this module only works in SPA mode!
  modules: [
    ['nuxt-custom-element', { name: 'my-nuxt-spa' }]
  ]

Options

name required

string (default: customElement) normally in dev mode, dont

The global name of your custom element. This should be a valid javascript identifier as its used as the globalName of your custom element

Make sure to choose a unique name, if two Nuxt app’s have the same globalName that will result in errors

elementName

string (default: same as name)

Optional, the name of your custom element. If you want your custom element to have a different name then the Nuxt globalName property

// module options
{ name: 'nce', elementName: 'nuxt-custom-element' }
// results in
window.$nce
<nuxt-custom-element></nuxt-custom-element>

props

array (default: [])

Optional, the props that your custom element supports.

// module options
{ props: ['path'] }
<custom-element path="/about"></custom-element>
// pages/index.vue
mounted() {
  console.log('Path prop has value', this.$root.path)
}

How to develop

Just run nuxt dev, this module adds a static index.html which already has your custom component listed

How to build

Run nuxt build in your project and check the ./dist folder. The dist folder should contain 3 files, a js file, a css file and an index.html

Bundle size

Currently the minimum bundle size seems to be ~180KB. This includes the basic Nuxt.js app and all polyfills to run your custom element in IE9+

The minimum bundle size was reached by disabling most Nuxt.js features

Caveats

• See vue-custom-element caveats for general remarks
• The Nuxt app is not the root component. Instead, it is the first child of the root component. Eg in a default SPA project the Nuxt app has _uid: 0, but when using nuxt-custom-element it has _uid: 1
• It’s advised to be very careful with using head. Using head will probably effect the parent page as well, not just your custom element

TODO

• add support to run Nuxt.js as a normal SPA in dev mode (and not always has a custom element)
• randomize globalName?