Vue js as a widget on another site

Question

I was wondering if it was possible to build a vuejs component that could be embedded into another site. The thing is the component would show up several times on the website so I wouldn't have access to a root element. I know a way to do this in react but I'd rather do it in Vue.

Answer 1

I know,i am not answering your question as you want (using vue component in another site).

It would be perfect if you create a component and use it in frameworks like Angular,React,Vue etc.You can do it with Stencil.js

By clicking here you see an awesome tutorial about it.

Answer 2

Yes, it is possible.

I created this project a long time ago https://github.com/lmarqs/odw-form. The objective was to create embeddable components to be into other sites.

It was created using vue-cli but I had to adapt it.

Basically, I created a new entry file to the webpack (main.prod.js). This entry installs the components on Vue. So in the html is is possible to create somenthing like this:

<div id="app-1">
  <my-component1></my-component1>
  <my-component2></my-component2>
</div>
<div id="app-2">
  <my-component1></my-component1>
  <my-component2></my-component2>
</div>
<script>
  var app1 = new Vue({
    el: "app-1"
  });

  var app2 = new Vue({
    el: "app-2"
  });
</script>

After creating the new entry I setted the entry on webpack.base.conf.js

module.exports = {
  entry: {
    main: isProduction ? ["./src/main.prod.js"] : ["./src/main.js"]
  }
}

Then, running the npm run build command the embeddable css and js files are created into /distfolder.

Answer 3

You can put more than one root elements in one site. Every component needs to be rendered under a root. Furthermore you always have access to the root via the $root property. What is your question?