NSG_PORTAL_V2/components/dynamic-page/page-component/templates/others/stocks/Full.vue

<script setup lang="ts">
  import { nanoid } from 'nanoid';
  import JSWidget from '@/components/widget/JSwidget.vue';

  const widgetOptions = {
    "symbols": [
      {
        "proName": "FOREXCOM:SPXUSD",
        "title": "S&P 500 Index"
      },
      {
        "proName": "FOREXCOM:NSXUSD",
        "title": "US 100 Cash CFD"
      },
      {
        "proName": "FX_IDC:EURUSD",
        "title": "EUR to USD"
      },
      {
        "proName": "BITSTAMP:BTCUSD",
        "title": "Bitcoin"
      },
      {
        "proName": "BITSTAMP:ETHUSD",
        "title": "Ethereum"
      }
    ],
    "isTransparent": false,
    "showSymbolLogo": true,
    "colorTheme": "dark",
    "locale": "en"
  }
</script>

<template>
  <div>
    <JSWidget 
      :CONTAINER_ID="nanoid(10)" 
      :SCRIPT_ID="nanoid(10)" 
      SCRIPT_SRC="https://s3.tradingview.com/external-embedding/embed-widget-tickers.js" 
      :options="widgetOptions" 
      :inside="true"
      widgetKey="TradingView" 
    />
  </div>
</template>
<style lang="scss" scoped>
div {
  width: 100%;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>