What is the process of embedding a Vue.js application into an already existing webpage using script tags?

Question

What is the process of embedding a Vue.js application into an already existing webpage using script tags?

My goal is to integrate a Vue.js application into an existing webpage using script tags. Upon running `npm run build` in my Vue application, I end up with 7 compiled files:

app.js
app.js.map
manifest.js
manifest.js.map
vendor.js
vendor.js.map
app.css

Initially, I attempted to load the three main js files (manifest, vendor, and app - excluding the map files) as sources within script tags on a separate webpage in hopes of having the Vue application display on that page.

(Although not currently concerned about it, the css file would also be loaded onto the page.)

However, even after inserting the js files as sources in script tags, the Vue application does not appear to be 'executed' and there are no DOM elements present on the page from the Vue application.

In addition to loading the three main js files, I've also included the vue.js (development version) js file via a script tag on the page.

While I am not well-versed in web-pack, it seems like there may be a step required to prompt webpack to execute the Vue application on this separate webpage, considering webpack is used for local execution of the Vue application.

I'm uncertain if what I am attempting is feasible and have been unable to locate any resources illustrating how to achieve this integration.

If possible, please share any relevant guidance or information regarding whether this method is correct for running a Vue application within a third-party webpage.

EDIT

Here is the JavaScript code utilized 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);

The above code snippet is repeated for each of the files (app, manifest, and vendor). This is the extent of my implementation, where the script tags exist on the page with the corresponding sources. In Chrome debugger's sources tab, all three js files are seen being appropriately loaded.

javascript webpack vue.js

Answer 1

Answer №1

SOLUTION

I had trouble getting my Vue app to load in another application because the Vue js files required a specific div element with the id of "app" to initialize properly. Below is the snippet of code I used, with some general values substituted, in a JavaScript file within the target application:

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);

To streamline the process, I consolidated all the compiled Vue js files (manifest, vendor, and app) into a single file named vue-app.js as shown above. Once these files are successfully loaded on the page, they work together to construct the Vue js application within the designated div element identified by its id as "app".

Answer 2

SOLUTION

I had trouble getting my Vue app to load in another application because the Vue js files required a specific div element with the id of "app" to initialize properly. Below is the snippet of code I used, with some general values substituted, in a JavaScript file within the target application:

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);

To streamline the process, I consolidated all the compiled Vue js files (manifest, vendor, and app) into a single file named vue-app.js as shown above. Once these files are successfully loaded on the page, they work together to construct the Vue js application within the designated div element identified by its id as "app".

Answer 3

Answer №2

Avoid including Vue in your index.html file directly; it should be part of the vendors bundle. Consider using this plugin to automate the generation of your index.html.

If you're utilizing webpack with official vue-cli templates, they are designed to help navigate and resolve such issues effectively.

Answer 4

Avoid including Vue in your index.html file directly; it should be part of the vendors bundle. Consider using this plugin to automate the generation of your index.html.

If you're utilizing webpack with official vue-cli templates, they are designed to help navigate and resolve such issues effectively.

Answer 5

Answer №3

My intention is to avoid referencing the Vue js files in the Vue index.html file and instead utilize them on a separate website through script tags. The Vue app functions correctly when locally run in its designated environment. I am currently employing the official webpack via vue-cli for this purpose. While unsure if it is feasible to integrate a Vue app into a different website using only js script tags, I am open to exploring potential solutions.

Unfortunately, the desired method of incorporating a Vue app into a separate website solely through script tags may not be achievable in the manner expected. However, another option could involve embedding the Vue.js site within an <iframe> on the alternative website.

Answer 6

My intention is to avoid referencing the Vue js files in the Vue index.html file and instead utilize them on a separate website through script tags. The Vue app functions correctly when locally run in its designated environment. I am currently employing the official webpack via vue-cli for this purpose. While unsure if it is feasible to integrate a Vue app into a different website using only js script tags, I am open to exploring potential solutions.

Unfortunately, the desired method of incorporating a Vue app into a separate website solely through script tags may not be achievable in the manner expected. However, another option could involve embedding the Vue.js site within an <iframe> on the alternative website.

Answer 7

Answer №4

James's approach is perfect for integrating with vue3, here is the customized version I implemented to load multiple files - app.js, chunk-vendors, and some asynchronous chunks

  // Convenient function to dynamically insert a script tag into the DOM
  const insertScript = src => {
    const element = document.createElement("script");
    element.src = src;
    element.defer = true;
    element.async = true;
    document.body.appendChild(element); // Ensuring compatibility with production built index.html
  };

  // Create a div element with an id corresponding to main.js/main.ts
  const container = document.createElement("div");
  container.id = "app";

  // Invoke insertScript for each script url in the array
  // The array is not defined here but it should consist of 
  // string elements representing individual script URLs
  scriptUrls.map(insertScript);

I have not incorporated any styles, but James's solution for styling should yield satisfactory results.

Answer 8

James's approach is perfect for integrating with vue3, here is the customized version I implemented to load multiple files - app.js, chunk-vendors, and some asynchronous chunks

  // Convenient function to dynamically insert a script tag into the DOM
  const insertScript = src => {
    const element = document.createElement("script");
    element.src = src;
    element.defer = true;
    element.async = true;
    document.body.appendChild(element); // Ensuring compatibility with production built index.html
  };

  // Create a div element with an id corresponding to main.js/main.ts
  const container = document.createElement("div");
  container.id = "app";

  // Invoke insertScript for each script url in the array
  // The array is not defined here but it should consist of 
  // string elements representing individual script URLs
  scriptUrls.map(insertScript);

I have not incorporated any styles, but James's solution for styling should yield satisfactory results.

What is the process of embedding a Vue.js application into an already existing webpage using script tags?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How to Incorporate an Error Function into XPages Partial Refresh Events (dojo.xhrPost)?

ReactiveJS - Adding elements to an array and encountering the error of undefined

Encountering an issue while attempting to access a JSON file using the fetch method

The body in Express is set to "Cannot GET [route]" during the execution of asynchronous code

In JavaScript, promises remain in a pending state

Utilizing JavaScript to implement a single method across multiple objects

The elements being parsed are appearing as undefined

The program encountered an issue: Initialization must be completed before utilizing hooks

Using the Trigger Method in a Vue JS Component with Sibling Components

A guide to fetching a JSON Object from a URL using Node.js and Express

serving index.html using express and react

Having trouble implementing a transition on a dropdown menu in React

Showing text on an ajax loader

The entire Sphere Geometry in three.js is not completely encompassed by the texture

Preventing FlatList from scrolling when re-sizing

Having difficulty managing asynchronous Node JS API requests

Using the https module in Node.js to transfer a file to a PHP server

How to correct header alignment in HTML for Google Table

Retrieve the HTML contents of a cell that contains a checkbox with the value of "jquery"

Swap out ASP.NET AJAX with jQuery for making ASHX requests