2

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 ?

docdev
  • 943
  • 1
  • 7
  • 17
  • hi are you using it inside vue cli bundler? – calmar Nov 28 '20 at 00:10
  • in general the external libs requirements are handled by observablehq runtime, however there are few problems with FileAttachments, I'd recommend editing explainer source file this line `const fileAttachments = new Map([["scientific@2.svg",new URL("./files/11a04038ef43c4009d7cdd028b92c4d361ff11ddf4060bb0ff73b1aa3ffb37c7fa88bd266bd65e70429eb395a1386971167e2e12260053510ef86fbace318508",import.meta.url)]])` move svg to your `public` folder and edit it to `const fileAttachments = new Map([["scientific@2.svg","/scientific@2.svg"]]);` you have to have `scientific@2.svg` on your public folder. – calmar Nov 28 '20 at 03:17
  • I'll give a try. Thank you very much – docdev Nov 28 '20 at 21:29
  • No, I've tried to download all locally, but the situation is the same. – docdev Nov 29 '20 at 17:10

0 Answers0