Vue3 composition API import Components from 3rd party library not working-CodePudding

I am trying to import a component from a 3rd Party API into my vue 3 project but I can not make it to run cause it says no unused vars. It worked in vue2 when I added it to the components property, but since the html tag is written differently as the import it is not working with V3.

how to deal with such cases in vue3 composition API?

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import TradingVue from "trading-vue-js";      //trying to get this imported
type Stream = { market: string; timeframe: string };
let state = reactive({
  streams: <Stream[]>[],
  data: {
    ohlcv: [
      [1551128400000, 33, 37.1, 14, 14, 196],
      [1551132000000, 13.7, 30, 6.6, 30, 206],
      [1551135600000, 29.9, 33, 21.3, 21.8, 74],
      [1551139200000, 21.7, 25.9, 18, 24, 140],
      [1551142800000, 24.1, 24.1, 24, 24.1, 29],
    ],
  },
});

async function getOHLCV() {
  const response = await (
    await fetch(
      "http://localhost:3000/stream/ohlcv/"  
        state.streams[0].market  
        "/"  
        state.streams[0].timeframe
    )
  ).json();
}
onMounted(async function () {
  const response = await (await fetch("http://localhost:3000/stream")).json();
  state.streams = response;
  await getOHLCV();
});
</script>

<template><trading-vue :data="state.data.ohlcv"></trading-vue></template>

CodePudding user response：

Overall, the library is not maintained, it's stated on the repo itself

TradingVue.js was a hackable charting lib for traders. You could draw literally ANYTHING on top of candlestick charts. [Not Maintained]

So yeah, if you have some issues with Vue3, it is not even a surprise.

The issues that you face currently are not directly related to the package itself, but that package is not a good idea overall. Give a try to those alternatives rather.

Or give a try to this charts sections. No need to spend more time on that package since it's not maintained IMO.