I’m trying to use VueJS to build some reusable web components that I can manually add into a page.
I tried to get some boilerplate projects and there are so many variations using Typescript, Babel, Vite, Rollup, Webpack, using createApp with .vue and with .ts but none show quite what I want. Most projects use VueJS to control the whole UI.
I tried to use the following to replace the contents of a div with the VueJS component:
The above runs the mount ok and it gets applied to the div (the div gets a vnode attribute) but it fills the innerHTML with an HTML comment instead of the template.
Is there an example on how to use VueJS to build components for using in an existing page?
I’m currently using esm-bundler in the browser after replacing the process.env.NODE_ENV in rollup but I’ve read that esm-browser should be used. The esm-bundler script gets exported by default. Is there a config value to switch to exporting esm-browser?
The above example also uses Typescript to define the component but most examples use .vue files. What is the best way to build/package .vue files? Using Typescript compiles very quickly. When I try using vue-cli-service, it takes much longer to compile and it produces chunk/index/html files - how would I bundle these into a single file?
Is there a good site with boilerplate examples for different ways to use VueJS?