Incorporating HTML content into a Vue component

Question

Incorporating HTML content into a Vue component

I'm running into issues trying to display the content of an HTML file within a Vue component. Essentially, I have a Django backend that generates an HTML file using Bokeh and backtesting.py library. On the frontend side, I'm utilizing Nuxt/Vue, which makes it challenging to dynamically load the HTML content onto the page.

If you'd like to view how the HTML file appears, you can check it out here:

The goal is to load the content from that HTML file in a basic Vue component:

<template>
  
  <div>
    <h1>Some content here</h1>
  </div>

</template>


<script>


export default {
    components: {

    },
    data() {
        return {
      
        }
    },

    mounted() {      
    },
    methods: {

    }
}
</script>

However, I've been struggling to figure out a solution. Simply copying and pasting the content into the Vue component results in numerous errors due to the use of <script> tags within the component. I did try loading the BokehJS CDN in my index.html file, but this still led to a Bokeh is undefined error within the component.

If anyone has any advice or suggestions on how to resolve this issue, it would be greatly appreciated. Thank you!

javascript vue.js

Answer 1

Answer №1

Jack's response is right on target and closely aligns with my own solution to this problem in the past.

However, I have an alternative approach using an iframe that may be useful if reactivity is a priority. You can find a codesandbox link here.

The key difference is that this method loads the code/HTML via XHR and manually inserts it into the iframe. By using this technique, you can introduce some reactivity as needed.

<script>
export default {
  components: {},
  data() {
    return {};
  },
  async mounted() {
    this.initialize();
  },
  methods: {
    async initialize() {
      const html = await this.loadHTML();
      const doc = this.htmlToDocument(html);
      this.updateIframe(doc);
    },
    async loadHTML() {
      const response = await fetch("/plot");
      const text = await response.text();
      return text;
    },
    htmlToDocument(html) {
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, "text/html");
      return doc;
    },
    updateIframe(doc) {
      const iframe = this.$refs.frame;
      const iframeDocument = iframe.contentWindow.document;
      iframeDocument.open();
      iframeDocument.write(doc.documentElement.innerHTML);
      iframeDocument.close();
    }
  },
};
</script>

I've included two additional methods in the codesandbox to demonstrate how reactivity can be implemented using this approach:

    modify() {
      if (this.orig) {
        // Only for the purpose of this example.
        // It's already been modified. Just short-circuit so we don't overwrite it
        return;
      }
      const bokehDoc = this.$refs.frame.contentWindow.Bokeh.documents[0];
      // Get access to the data..not sure if there's a better/proper way
      const models = [...bokehDoc._all_models.values()];
      const modelWithData = models.find((x) => x.data);
      const { data } = modelWithData;
      const idx = Math.floor(data.Close.length / 2);
      // Store old data so we can reset it
      this.orig = data.Close[idx];
      data.Close[Math.floor(data.Close.length / 2)] = 0;
      modelWithData.change.emit();
    },
    reset() {
      if (!this.orig) {
        return;
      }
      const bokehDoc = this.$refs.frame.contentWindow.Bokeh.documents[0];
      // Get access to the data..not sure if there's a better/proper way
      const models = [...bokehDoc._all_models.values()];
      const modelWithData = models.find((x) => x.data);
      const { data } = modelWithData;
      const idx = Math.floor(data.Close.length / 2);
      data.Close[idx] = this.orig;
      modelWithData.change.emit();
      delete this.orig;
    }

Answer 2

Jack's response is right on target and closely aligns with my own solution to this problem in the past.

However, I have an alternative approach using an iframe that may be useful if reactivity is a priority. You can find a codesandbox link here.

The key difference is that this method loads the code/HTML via XHR and manually inserts it into the iframe. By using this technique, you can introduce some reactivity as needed.

<script>
export default {
  components: {},
  data() {
    return {};
  },
  async mounted() {
    this.initialize();
  },
  methods: {
    async initialize() {
      const html = await this.loadHTML();
      const doc = this.htmlToDocument(html);
      this.updateIframe(doc);
    },
    async loadHTML() {
      const response = await fetch("/plot");
      const text = await response.text();
      return text;
    },
    htmlToDocument(html) {
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, "text/html");
      return doc;
    },
    updateIframe(doc) {
      const iframe = this.$refs.frame;
      const iframeDocument = iframe.contentWindow.document;
      iframeDocument.open();
      iframeDocument.write(doc.documentElement.innerHTML);
      iframeDocument.close();
    }
  },
};
</script>

I've included two additional methods in the codesandbox to demonstrate how reactivity can be implemented using this approach:

    modify() {
      if (this.orig) {
        // Only for the purpose of this example.
        // It's already been modified. Just short-circuit so we don't overwrite it
        return;
      }
      const bokehDoc = this.$refs.frame.contentWindow.Bokeh.documents[0];
      // Get access to the data..not sure if there's a better/proper way
      const models = [...bokehDoc._all_models.values()];
      const modelWithData = models.find((x) => x.data);
      const { data } = modelWithData;
      const idx = Math.floor(data.Close.length / 2);
      // Store old data so we can reset it
      this.orig = data.Close[idx];
      data.Close[Math.floor(data.Close.length / 2)] = 0;
      modelWithData.change.emit();
    },
    reset() {
      if (!this.orig) {
        return;
      }
      const bokehDoc = this.$refs.frame.contentWindow.Bokeh.documents[0];
      // Get access to the data..not sure if there's a better/proper way
      const models = [...bokehDoc._all_models.values()];
      const modelWithData = models.find((x) => x.data);
      const { data } = modelWithData;
      const idx = Math.floor(data.Close.length / 2);
      data.Close[idx] = this.orig;
      modelWithData.change.emit();
      delete this.orig;
    }

Answer 3

Answer №2

One of the easiest methods is to host your HTML on a server of your choice, even without using Vue.

To integrate this HTML into your app, you can utilize an <iframe> with the src attribute pointing to that HTML file. For instance, take a look at this sample utilizing codesandbox.io, where I included your content in the index.html. Below is a demonstration showing how it functions with both <iframe> and <object> elements:

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  'el': '#app'
})

body  {
  margin: 0;
}
h1, h3 {padding-left: 1rem;}
object, iframe {
  border: none;
  height: 800px;
  width: 100%;
  min-height: calc(100vh - 125px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h1>This content is placed in Vue</h1>
  <h3>Vue doesn't really care.</h3>
  <iframe src="https://1gk6z.csb.app/"></iframe>

  <h1><code>&lt;object></code> works, too:</h1>
  <object type="text/html" data="https://1gk6z.csb.app/"></object>
  
</div>

Note: if the domain serving the graph and the one displaying it differ, you'll need server-side configuration to allow the embed (most domains have it turned off by default).

Answer 4

One of the easiest methods is to host your HTML on a server of your choice, even without using Vue.

To integrate this HTML into your app, you can utilize an <iframe> with the src attribute pointing to that HTML file. For instance, take a look at this sample utilizing codesandbox.io, where I included your content in the index.html. Below is a demonstration showing how it functions with both <iframe> and <object> elements:

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  'el': '#app'
})

body  {
  margin: 0;
}
h1, h3 {padding-left: 1rem;}
object, iframe {
  border: none;
  height: 800px;
  width: 100%;
  min-height: calc(100vh - 125px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h1>This content is placed in Vue</h1>
  <h3>Vue doesn't really care.</h3>
  <iframe src="https://1gk6z.csb.app/"></iframe>

  <h1><code>&lt;object></code> works, too:</h1>
  <object type="text/html" data="https://1gk6z.csb.app/"></object>
  
</div>

Note: if the domain serving the graph and the one displaying it differ, you'll need server-side configuration to allow the embed (most domains have it turned off by default).

Answer 5

Answer №3

Approach:

Include and initialize Bokeh in the head section of public/index.html
Read a file as a string using ajax/xhr and convert it into a DOM tree
Identify and extract each required element from the parsed tree
Recreate and add each element back to the document

No iframe is necessary. The window.Bokeh can be accessed directly.

A basic demonstration of reactivity is illustrated through the utilization of the method logBkh, which logs the global Bokeh object upon clicking the graph

<template>
  <div id="app">
    <div id="page-container" @click="logBkh"></div>
  </div>
</template>

<script>
// fetched from filesystem for testing purposes
import page from 'raw-loader!./assets/page.txt'

// parse as dom tree
const extDoc = new DOMParser().parseFromString(page, 'text/html');

export default {
  methods: {
    logBkh(){
      console.log(window.Bokeh)
    }
  },
  mounted() {
    const pageContainer = document.querySelector('#page-container')

    // generate and append root div
    const dv = document.createElement('div')
    const { attributes } = extDoc.querySelector('.bk-root')

    for(const attr in attributes) {
      dv.setAttribute(attributes[attr].name, attributes[attr].value)
    }
    pageContainer.append(dv)
    
    for(const _scrpt of extDoc.body.querySelectorAll('script')) {

      // generate and append each script
      const scrpt = document.createElement('script')

      for(const attr in _scrpt.attributes) {
        scrpt.setAttribute(
          _scrpt.attributes[attr].name,
          _scrpt.attributes[attr].value
        )
      }
      scrpt.innerHTML = _scrpt.innerHTML
      pageContainer.append(scrpt)
    }
  }
}
</script>

outcome:

https://i.sstatic.net/e7hNS.png

Answer 6

Approach:

Include and initialize Bokeh in the head section of public/index.html
Read a file as a string using ajax/xhr and convert it into a DOM tree
Identify and extract each required element from the parsed tree
Recreate and add each element back to the document

No iframe is necessary. The window.Bokeh can be accessed directly.

A basic demonstration of reactivity is illustrated through the utilization of the method logBkh, which logs the global Bokeh object upon clicking the graph

<template>
  <div id="app">
    <div id="page-container" @click="logBkh"></div>
  </div>
</template>

<script>
// fetched from filesystem for testing purposes
import page from 'raw-loader!./assets/page.txt'

// parse as dom tree
const extDoc = new DOMParser().parseFromString(page, 'text/html');

export default {
  methods: {
    logBkh(){
      console.log(window.Bokeh)
    }
  },
  mounted() {
    const pageContainer = document.querySelector('#page-container')

    // generate and append root div
    const dv = document.createElement('div')
    const { attributes } = extDoc.querySelector('.bk-root')

    for(const attr in attributes) {
      dv.setAttribute(attributes[attr].name, attributes[attr].value)
    }
    pageContainer.append(dv)
    
    for(const _scrpt of extDoc.body.querySelectorAll('script')) {

      // generate and append each script
      const scrpt = document.createElement('script')

      for(const attr in _scrpt.attributes) {
        scrpt.setAttribute(
          _scrpt.attributes[attr].name,
          _scrpt.attributes[attr].value
        )
      }
      scrpt.innerHTML = _scrpt.innerHTML
      pageContainer.append(scrpt)
    }
  }
}
</script>

outcome:

https://i.sstatic.net/e7hNS.png

Incorporating HTML content into a Vue component

Answer №1

Answer №2

Answer №3

Similar questions

The .removeAttr('checked') method fails to function as expected

What could be causing the .hover function to malfunction and how can I make it so that the .hover function only applies within the corner radius area?

Is it possible to time a page without relying on the Form tag?

Remove all spaces from input fields in angular Typescript, excluding the enter key

Discovering the size and count of JavaScript objects within a browser's memory

The value of Vue's v-model data is currently undefined, likely due to an

Exploring the process of transferring a jQuery array from a Rails controller to a PostgreSQL array column

Obtain the response header variable within a Shiny application

Ways to retrieve the page name where the script originates from

How can I select a checkbox dynamically during runtime?

Having difficulty with building a basic module in Node JS, it's just not cooperating

Is utilizing a standardized logging system considered a best practice for a node and express application?

Is there a way to incorporate multiple functions into a single sx property, such as color, zIndex, backgroundColor, etc? Can this be achieved in any way?

Tips for updating the navigation bar once a user logs in

Is there a way to manually trigger a re-render of all React components on a page generated using array.map?

When importing modules in node.js, the presence of a function can overwrite another function even if it

Troubleshooting VueJS Promise.all Problem

Easily move a group of HTML elements at the same time with a simple

Transferring Variables from WordPress PHP to JavaScript

Encountering the message "Error: Unable to access undefined properties (reading 'username')" while making my POST request