⚗️ Nuxt.js <> Stencil.js Module

Easy Stencil.js component library integration with Nuxt.js.

⚠️ Known issue: Mismatching nodes during client-side hydration

Setup

Install with yarn:

yarn add nuxt-stencil

Install with npm:

npm install nuxt-stencil

nuxt.config.js

module.exports = {
  modules: ['nuxt-stencil'],

  stencil: {
    /**
     * Required options
     */

    // Your library name, or the path to its root folder.
    lib: 'bulmil',

    // The prefix to whitelist
    prefix: 'bm-',

    /**
     * Options below are optional
     */

    // Stencil rendering options
    renderOptions: {},

    // By default, it takes the lib name. e.g: bulmil/dist/hydrate
    hydratePath: null,

    // By default, it takes the lib name. e.g: bulmil/dist/loader
    loaderPath: null,

    // By default, it takes the prefix. e.g: [/bm-\w*/]
    ignoredElements: null,
  },
};

How it works

This module has multiple functionalities:

1. It creates two hooks for SSR & Generate, using render:route & generate:page, it will render the stencil components before sending back the request to the browser.
2. It injects a plugin for CSR to define the custom elements from your stencil library.
3. It configures Vue.config.ignoredElements to ignore custom elements from your stencil library.

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using yarn dev or npm run dev

📑 License

MIT License