La respuesta de Tao es acertada y es muy similar a cómo resolví este problema por mí mismo en el pasado.

Sin embargo, me gustaría incluir un enfoque de iframe alternativo que podría funcionar en caso de que la reactividad sea importante. Aquí hay un enlace de codesandbox

La única diferencia es que este enfoque carga el código/HTML a través de XHR y lo escribe manualmente en el iframe. Usando este enfoque, debería poder agregar algo de reactividad si es necesario.

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

En la caja de códigos, incluí dos métodos adicionales para darle un ejemplo de cómo la reactividad puede funcionar con este enfoque:

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

Probablemente la forma más sencilla sea hacer que su HTML esté disponible en la URL de su elección, en su servidor (independientemente de Vue).

Luego, en su aplicación, use un <iframe> y apunte su src a ese html. Aquí hay un ejemplo, usando codesandbox.io , donde coloqué lo que publicaste en index.html . A continuación, puede verlo funcionando con las etiquetas <iframe> y <object> :

 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>

Nota: si el dominio que sirve el gráfico y el que lo muestra son diferentes, necesitará una configuración del lado del servidor para permitir la inserción (la mayoría de los dominios la tienen desactivada de manera predeterminada).

Estrategia:

1. inserte e inicie el bokeh en la etiqueta principal de public/index.html
2. lea el archivo en una cadena a través de ajax/xhr y analice como árbol dom
3. extraer cada elemento dom necesario del árbol analizado
4. recrear y añadir cada elemento

No se necesita iframe. window.Bokeh es directamente accesible.

Se sugiere un ejemplo esquelético de reactividad a través del método logBkh que registra el objeto Bokeh global al hacer clic en el gráfico

 <template> <div id="app"> <div id="page-container" @click="logBkh"></div> </div> </template> <script> // loaded from filesystem for test 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>

resultado: