By reading the documentation and integration of stencil components with vue the following is code is required to load your web components:
After you’ve done that you’ll notice that the bundle size of your vue app has increased. This sucks, as your bundle will increase in size with every new component you add. Basically we only want to load the web component code once it’s loaded in our page.
Lazy loading
Stenciljs has lazy loading already plugged in. To use it you’ll have to utilize module imports:
import 'mycomponent/dist/mycomponent.js';If you’re running a browser that supports modules (anything but Edge/IE11) you’ll notice that your component gets loaded once it’s loaded in the DOM.
This is good! But how do we handle browsers that do not support modules?
import the polyfills and custom elements like:
import { applyPolyfills, defineCustomElements } from 'mycomponent/loader';Simply add an if statement to apply the polyfills:
Awesome, now you got lazy loading enabled for the browsers that support modules and you got compatibility for older browsers. Best of both worlds!
You can find more information about framework integration with stenciljs:
Enjoy!
