Integrating ObservableHQ in Vue.js component

364 views Asked by At

My problem is the following:

I'm trying to force Vue.js and this Observable notebook to cohexist.

In particular, I want to embed that notebook in my component:

<template>
<div>
<div class="explainer"></div>
</div>
    
</template>

<script type="module">

import {Runtime, Inspector} from "../observablehq/sarscov2/runtime";
import define from "../observablehq/sarscov2/explainer";
export default {
    mounted(){
        (new Runtime).module(define, name => {
            if (name === "explainer") return Inspector.into(".explainer")()
        })
    }
}

</script>

<style>

</style>

Now, note that I used the Embed function in Observable site, and selected Vanilla JS output. Then I created that script and downloaded the js files locally (Vue does not allow remote import as I know). But the result is the following:

enter image description here

Without the SVG.

So, looking inside the script, I found that maybe the problem is that this file tries to import another external resource as well, and for some reason it is not allowed to do that.

In conclusion, how could i solve that problem ?

0

There are 0 answers