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 inwindow$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 { console}
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
. Usinghead
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?