I would like to load a Vue.js application into an existing webpage via script tags.

Currently after running npm run build inside of my Vue application, I get 7 piled files:

1. app.js
2. app.js.map
3. manifest.js
4. manifest.js.map
5. vendor.js
6. vendor.js.map
7. app.css

I thought I could load those 3 js files (manifest, vendor and app - excluding the map files) as the source in script tags on my separate webpage and the Vue application would then exist on that webpage.

(I would also load the css file on the page but I am not worried about that currently.)

After attempting to inject the 3 js files in script tags (as the src), I see the js files do exist on page as sources, but it does not seem the Vue application is ever 'executed' and no DOM elements from the Vue application exist on the page.

I also loaded the vue.js (development version) js file via a script tag on the page as well.

I am not extremely familiar with web-pack but I suspect there is something that needs to be done to execute web-pack to run the Vue application within this separate webpage since web-pack is what is used to run the Vue application locally on its own.

I am unsure if this is even possible but I am unable to find any resources that demonstrate what I am trying to achieve.

Please provide any help or information that is relevant and if this is even the correct way to go about running a Vue application within a third party webpage.

EDIT

This is the js code used to insert the script tags with the src of the files:

var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");
js.src = "/js/app.js";
head.appendChild(js);

I use this code for each of the files (app, manifest and vendor). This is all I do and the script tags exist on page with the correct sources. Under the sources tab in my Chrome debugger I see all three js files being loaded correctly.

I would like to load a Vue.js application into an existing webpage via script tags.

Currently after running npm run build inside of my Vue application, I get 7 piled files:

1. app.js
2. app.js.map
3. manifest.js
4. manifest.js.map
5. vendor.js
6. vendor.js.map
7. app.css

I thought I could load those 3 js files (manifest, vendor and app - excluding the map files) as the source in script tags on my separate webpage and the Vue application would then exist on that webpage.

(I would also load the css file on the page but I am not worried about that currently.)

After attempting to inject the 3 js files in script tags (as the src), I see the js files do exist on page as sources, but it does not seem the Vue application is ever 'executed' and no DOM elements from the Vue application exist on the page.

I also loaded the vue.js (development version) js file via a script tag on the page as well.

I am not extremely familiar with web-pack but I suspect there is something that needs to be done to execute web-pack to run the Vue application within this separate webpage since web-pack is what is used to run the Vue application locally on its own.

I am unsure if this is even possible but I am unable to find any resources that demonstrate what I am trying to achieve.

Please provide any help or information that is relevant and if this is even the correct way to go about running a Vue application within a third party webpage.

EDIT

This is the js code used to insert the script tags with the src of the files:

var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");
js.src = "/js/app.js";
head.appendChild(js);

I use this code for each of the files (app, manifest and vendor). This is all I do and the script tags exist on page with the correct sources. Under the sources tab in my Chrome debugger I see all three js files being loaded correctly.

• javascript
• webpack
• vue.js

• You should provide some code snippets so that we may have a better idea of what it is you're attempting to do and whether or not you're running into an unrelated issue. – B. Fleming Commented Dec 12, 2017 at 16:44
• Did this work and then break, or has it never worked? – bbsimonbb Commented Dec 12, 2017 at 16:56
• This has never worked. I am more experimenting and trying to find a solution to implementing a Vue application within a seperate web page via script tags. – Cal Supik Commented Dec 12, 2017 at 17:14

4 Answers 4

SOLUTION

The reason the Vue app was not 'loading' in my other app is because the Vue js files needed a div element with id = "app" to 'load' into. Here is the code used (with some substituted generalized values) in a js file in the app I wanted to load my Vue app into:

  var head = document.getElementsByTagName('head')[0];
  var body = document.getElementsByTagName('body')[0];

  var div = document.createElement("div");
  div.id = "app"
  body.appendChild(div)

  var js = document.createElement("script");
  js.src = "/js/vue-app.js";
  js.id = "vue-app-js";
  js.defer = true;
  js.async = true;
  head.appendChild(js);

  var css = document.createElement('link');
  css.id = "vue-app-css";
  css.rel = "stylesheet";
  css.type = "text/css";
  css.href = "app.css";
  head.appendChild(css); 

For reference, I bined all the piled Vue js files (manifest, vendor and app) into one file called vue-app.js that you can see in my code above. Once the Vue js files are loaded on the page, they build the Vue js app within the div with id = "app".

You shouldn't need to reference vue in your index.html. It should be in the vendors bundle. Try using this plugin to generate your index.html.

Are you using webpack via the official vue-cli templates? These should help you get around this kind of issue.

I do not want to reference the Vue js files in the Vue index.html file, I want to use the Vue js files in a seperate website (loaded via script tags). The Vue app works as expected when I run it locally in its own environment. I am using the official webpack via vue-cli. I am unsure if it is even possible to use a Vue app within a seperate website via js script tags, but I am looking for a possible solution.

No, this is not possible, at least not in the way you expect it to work. But there's nothing stopping you from embedding the site built in Vue.js in an <iframe> on the other website.

Cal's method works just fine with vue3, here is the version I use to load multiple files - app.js, chunk-vendors, some async chunks

  // Simple inline function to add a script to DOM with the right attrs
  const addScript = src => {
    const element = document.createElement("script");
    element.src = src;
    element.defer = true;
    element.async = true;
    document.body.appendChild(element); // Just to match the prod built index.html
  };

  // First make our div with the id that matches our main.js/main.ts
  // This is customizable
  const wrapper = document.createElement("div");
  wrapper.id = "app";

  // Now call addScript once for every script url in array
  // I haven't defined the array in this snippet but its just
  // An array of strings, each being one script URL
  scriptUrls.map(addScript);

I'm not using styles but Cal's solution for styles should work just fine.