docs(vue-integration): Cannot get Vue Integration to work as documented

[royalrex]

This page documents how to integrate stencil components in Vue: https://stenciljs.com/docs/vue

I have tried to follow the guide, and did this: First create stencil project: npm init stencil selecting 'component'. This gives me version @stencil/core1.0.7. I have named my project livebackend-ds. Now I have the starter project, and running npm run start shows the example component. I have renamed the my-component to lb-hello-world but not introducing any extra logic. Finally, I run npm run build and after that npm link from inside the project folder

Now Vue CLI (latest: 3.8.0): I run vue create vue-with-stencil. I can run this project and it shows as expected in the browser. This gives a project using [email protected] (latest). Now I include your example code from docs into main.js and add my custom html element to the view template <lb-hello-world first="First name" last="Last name"></lb-hello-world> Finally I do npm link livebackend-ds to install me compile stencil web component.

main.js:

import Vue from 'vue'
import App from './App.vue'
import { defineCustomElements } from 'livebackend-ds';

Vue.config.productionTip = false;
Vue.config.ignoredElements = [
    'lb-hello-world',
];

// Bind the custom elements to the window object
applyPolyfills().then(() => {
    defineCustomElements(window);
});

new Vue({
  render: h => h(App),
}).$mount('#app');

This will not run as it says that defineCustomElements could not be resolved and applyPolyfills is not defined.

I hope you can advise and/or improve the docs to work with starter projects of stenciljs and vuejs.

[royalrex]

I found the issue.

As mentioned I use npm link to avoid publishing to npm to keep a faster iterative loop when developing.

I needed to adjust the webpack config of the vuejs project to not follow symlinks as that broke the build. https://webpack.js.org/configuration/resolve/#resolvesymlinks

Will consider er PR

[rwaskiewicz]

Hey @royalrex 👋

I apologize that this issue was never acknowledged. Since the issue's original authorship, we've rewritten our documentation for integrating Stencil + Vue (now Vue 3). If you're interested in giving Stencil another try, the documentation for integrating Stencil and Vue can be found here. If not, I completely understand. I'm going to close this out due to its age (as we no longer support Vue 2 and Stencil 1). Again I apologize for the lack of response here.