How do I load a Vue.js application into an existing webpage via script tags?

Question

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 compiled files:

app.js
app.js.map
manifest.js
manifest.js.map
vendor.js
vendor.js.map
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.

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
– B. Fleming, Commented Dec 12, 2017 at 16:44
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
– Cal Supik, Commented Dec 12, 2017 at 17:14

Cal Supik · Accepted Answer · 2017-12-13 18:08:47Z

5

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 combined all the compiled 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".

answered Dec 13, 2017 at 18:08

Cal Supik

711 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

light24bulbs Over a year ago

is this important because it happens after the DOM loaded and vue had something to lock onto?

LittleTiger Over a year ago

How did you decide to bundle your files in the end? Is it possible to embed a small vue.js app into a vue.js site? Have you tried?

bbsimonbb · Accepted Answer · 2017-12-12 16:53:47Z

0

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.

answered Dec 12, 2017 at 16:53

bbsimonbb

29.3k18 gold badges93 silver badges129 bronze badges

1 Comment

Cal Supik Over a year ago

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.

herrbischoff · Accepted Answer · 2017-12-12 18:18:50Z

0

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.

answered Dec 12, 2017 at 18:18

herrbischoff

3,3561 gold badge31 silver badges50 bronze badges

Comments

Guesthouse · Accepted Answer · 2021-04-27 17:22:18Z

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.

Collectives™ on Stack Overflow

How do I load a Vue.js application into an existing webpage via script tags?

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related