Implement perspective for Vuejs

[leestorm4520]

I have a vue3 composition application with vite and I am trying to use perspective to visualize a json array. However, I keep getting error message when I try to import perspective into my script.
Can you guys help me please?

------ index.Vue -----------

`<script>

</script>
import "@finos/perspective-viewer";
import "@finos/perspective-viewer-datagrid";
import perspective from "@finos/perspective";
import "@finos/perspective-viewer/dist/css/themes.css";
import '@finos/perspective-viewer/dist/css/pro.css';

const viewer = document.createElement("perspective-viewer")
const worker = ref()
onMounted(async ()=>{
worker.value = await perspective.worker()
})

watch(queryResult, async ()=>{
if(queryResult && queryResult.length){

let table = await worker.value.table(queryResult)
await viewer.load(table)

}
})
`

------------- vite.config.js -----------
`
import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";

export default defineConfig({
plugins:
[vue(),
wasm(),
topLevelAwait()
],
server: {
host: true,
},
define: {
PORT: JSON.stringify("8000"),
},
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
worker:{
format:"es"
},
optimizeDeps: {
esbuildOptions: {
target: 'esnext'
},
exclude: [
"@finos/perspective"
]
},
build: {
target: 'esnext'
},

});
`

The error was

Internal server error: Failed to resolve import "../../src/ts/perspective-server.worker.js" from "node_modules/@finos/perspective/dist/esm/perspective.js?v=d8734d0b". Does the file exist?

Error: Build failed with 1 error:
node_modules/@finos/perspective-viewer/dist/esm/perspective-viewer.js:2:47341: ERROR: No matching export in "vite-plugin-wasm-namespace:/node_modules/@finos/perspective-viewer/dist/pkg/perspective-viewer.wasm" for import "default"

[rajsite]

Related issue #2795