Creating TradingView Terminal for Vuejs

Question

I am currently working on my project that create a trading view terminal with trading view platform udf datafeeds, etc...

I am having trouble with create a widget.

Here is my TradingView component:

<template>
  <div id="tv_chart_container"></div>
</template>

<script>
import {UDFCompatibleDatafeed} from '../datafeeds/udf/dist/bundle';
import TradingView from '../TradingView/tradingViewWrapper.js';
export default {
  name: 'TradingViewChart',
  mounted() {
    this.initTradingView();
  },
  methods: {
    initTradingView() {
      const widget = new TradingView.widget({
        library_path: "https://charting-library.tradingview-widget.com/charting_library/",
        fullscreen: true,
        symbol: 'AAPL',
        interval: '1D',
        container: "tv_chart_container",
        datafeed: new UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"),
        locale: "en",
        disabled_features: [],
        enabled_features: [],
      });

      // If you need to access the widget later, you can store it in the component's data
      this.tvWidget = widget;
    }
  },
  // Optional: if you stored the widget in the component's data, you might want to clean it up when the component is destroyed
  beforeDestroy() {
    if (this.tvWidget) {
      this.tvWidget.remove();
      this.tvWidget = null;
    }
  }
};
</script>

and here is my tradingViewWrapper.js

window.TradingView = require('../charting_library/charting_library.cjs.js');
window.Datafeeds = require('../datafeeds/udf/dist/bundle.js');

export const TradingView = window.TradingView;
export const Datafeeds = window.Datafeeds;

Currently I am facing error

cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/components/TradingView/TradingView.vue?vue&type=script&lang=js:16 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'widget') at Proxy.initTradingView (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/components/TradingView/TradingView.vue?vue&type=script&lang=js:16:101) at Proxy.mounted (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/components/TradingView/TradingView.vue?vue&type=script&lang=js:11:10) at eval (runtime-core.esm-bundler.js:3047:88) at callWithErrorHandling (runtime-core.esm-bundler.js:369:19) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:376:17) at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:3027:19) at flushPostFlushCbs (runtime-core.esm-bundler.js:542:41) at flushJobs (runtime-core.esm-bundler.js:580:5)

Anyone know how to fix this issue? My goal is I want to create a full-size of tradingview terminal just like in tradingview platform

Answer 1

The error you're encountering in your TradingView component is due to the fact that the TradingView object is not defined when you're trying to create the widget. This is likely because the tradingViewWrapper.js file is not properly exporting the TradingView object.

// tradingViewWrapper.js

import TradingView from '../charting_library/charting_library.cjs.js';
import Datafeeds from '../datafeeds/udf/dist/bundle.js';

export { TradingView, Datafeeds };