Using perspective with vue3 + vite

[qdubois]

Dear all i'm trying to user perspective with vu3+ vite

Here is the test i'm trying to run:

`<script setup lang="ts">
import perspective from "@finos/perspective";

const worker = perspective.shared_worker();
window.addEventListener("DOMContentLoaded", async () => {
const viewer:any= document.createElement("perspective-viewer");
document.body.append(viewer);

let REQ = fetch('https://api.covidtracking.com/v1/states/daily.csv');

const resp = await REQ;
const csv = await resp.text();
const table = worker.table(csv);
viewer.load(table);

});

</script>

Test Perpective

meta: layout: home requiresAuth: true `

And I get the following warning:

DevTools failed to load source map: Could not load content for http://localhost:3333/perspective.worker.js.map: Fetch through target failed: Target not supported; Fallback: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

With nothing showing up.

Any idea ?

thans for your help

Quentin

[sinistersnare]

Set up a repository that reproduces your problem, and share it here. I am not sure you have shared enough to be sure what the problem is.

If there are no errors or logs, perhaps it is simply a CSS issue?

[qdubois]

Thanks for your message. It helped me to figure it out.

here is my code in the end for anyone who might be interested:

<script setup lang="ts">
import perspective from "@finos/perspective";
import "@finos/perspective-viewer";
import "@finos/perspective-viewer-datagrid";
import "@finos/perspective-viewer-d3fc/bar";

import "@finos/perspective-viewer/dist/css/themes.css";


const createTable = async   () => {
    const worker = perspective.worker();
    const viewer:any= document.createElement("perspective-viewer");
    document.getElementById("viewer").appendChild(viewer)

    let REQ = fetch('https://api.covidtracking.com/v1/states/daily.csv');

    const resp = await REQ;
    const csv = await resp.text();

    const table = await worker.table(csv);
    console.log(table)
    viewer.load(table);
}

onMounted(() => {
  createTable()
})

</script>

<template>
    <h1>Test Perpective</h1>
    <div id="viewer"></div>
</template>

<style>

perspective-viewer {
    position: absolute;
    top: 50px;
    left: 250px;
    right: 0px;
    bottom: 0px;
}
</style>


<route lang="yaml">
meta:
  layout: home
  requiresAuth: true
</route>

[sinistersnare]

Happy to help.