Skip to content

How to include vue app inside another vue app?

I’m currently requested to generate widget that will be included in different customers web sites.

Let’s say somthing like:

exemple

There is 2 constraintes:

  1. The use of iframe is forbidden
  2. The customers website could be done in whatever thecnology (PHP, React, ANgular, Vue.js, JQuery,…)

As the requested widget should be interactive, I wanted to develop it using javascript framwork (I thought about Vue.js).

However, I thought that this could lead to some conflicts (or even break customer’s website) for instance if the customer’s website is already use another version of Vue.js.

I spent several hours looking and thinking about a solution, but expect using an iframe I didn’t found anything…

=> Is there a way to include Vue.js apps inside another Vue.js app (or React, Angular, …) ?

Thanks in advance for your help.

Answer

The problem, I suspect, you’ll most likely run into is if the versions differ (client uses Vue 2.5, you use 2.6).

I’ve ran into this with React and Vue in the past.

This is probably the #1 reason I’m so big on using Svelte in instances where I know the project will be used as a dependency/widget.

If you’re used to Vue, you should feel home pretty quick. The notable difference is that it is technically a language, not a framework, that compiles the framework out of the dist bundle, so you don’t have the framework dependency.