Nuxt setup
xMaxximum opened this issue · 2 comments
Hey, nice project!
Would you be open to also writing some docs code to get a minimum version up and running, to test if the library even works as well as some general docs for how to set this up on Nuxt.js? I am also struggling to get the types to work.
I get this error: Cannot find module 'vue-data-ui' or its corresponding type declarations.ts(2307
I also noticed that the component does get rendered, but it has no reactivity like the tooltips showing or the options doing anything
This is my component file:
<script lang="ts" setup>
import "vue-data-ui/style.css"
import { VueUiXy } from "vue-data-ui";
const config = {
chart: {
fontFamily: "inherit"
}
}
const dataset = [
{
name: "Series 1",
series: [-55, -34, -21, -13, -8, -5, -3, -2, -1, -1, 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55],
type: "bar"
,
color: "rgb(95,139,238)",
},
{
name: "Series 2",
series: [55, 34, 21, 13, 8, 5, 3, 2, 1, 1, 0, -1, -1, -2, -3, -5, -8, -13, -21, -34, -55],
type:
"line"
,
color: "rgb(66,211,146)",
useProgression: true,
dataLabels: false
},
{
name: "Series 3",
series: [64, 60, 52, 42, 30, 16, 0, -18, -38, -46, -50, -46, -38, -18, 0, 16, 30, 42, 52, 60, 64],
type:
"plot"
,
color: "rgb(255,100,0)"
},
{
name: "Target",
series: [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
type: "line",
color: "#404040",
dashed: true,
useTag: "start",
dataLabels: false,
},
];
</script>
<template>
<VueUiXy :config="config" :dataset="dataset" />
</template>
Hi, thanks for trying out :)
I created a repo with an example implementation for your usecase in Nuxt3. To sum up the steps:
- Versions prior to v2.1.38: extract the vue-data-ui.d.ts file from the node module and place it at the root of your project so types are available: I released version 1.7.7 with updated types, since I noticed config was mandatory in previous version, however it is optional.
- create a plugin to import the VueUiXy component
- import the css
- Declare your dataset & config as refs or computed
Docs are now updated with a link to this repo.
Cheers
Hey, thank you so much for the quick response!
Now I got it to work. This is a great project and I wish you all the best.
Turns out the 'nuxt-aos' module also was responsible for not rendering the charts properly...
Anyways, thank you for your work & quick help again! :D