Usage
Learn how to use TradingView Widgets across your Nuxt 3 application.
The built-in widgets have default options based on Tradingview. If you did not define any options, the default options will be used.
Basic Usage
Example of using all widgets with default options:
<template>
<Chart />
<CryptoMarket />
<TopStories/>
<Screener/>
</template>
Configuring the widgets with options according to Tradingview Docs:
<template>
<Chart
:options="{
theme: 'dark',
autosize: true,
symbol: 'NASDAQ:AAPL',
timezone: 'Etc/UTC',
}"
/>
</template>
Or, you can pass a ref variable into it:
<template>
<Chart :options="chartOptions" />
</template>
<script setup lang="ts">
const chartOptions = ref({
theme: 'dark',
autosize: true,
symbol: 'NASDAQ:AAPL',
timezone: 'Etc/UTC',
})
</script>
Multiple Widgets
If you want to use the same widgets multiple times on a single page, you should define a unique class for each widget.
<template>
<Chart class="apple-chart"/>
<Chart class="nvidia-chart"/>
</template>
For example, in a for loop, you can use the key as a unique class:
<template>
<div v-for="symbol in symbols" :key="symbol">
<SingleTicker :class="`ticker-${symbol}`" :options="{ symbol }" />
</div>
</template>
<script setup lang="ts">
const symbols = ref(['FX:EURUSD', 'FX:GBPUSD', 'FX:USDJPY']);
</script>
Dynamic Color Mode
For dynamic color mode support, you can integrate your color mode plugin or @nuxtjs/color-mode module to the widget options with the theme or colorTheme property.
And for re-render the widget with every color change, you should also bind the color mode to the :key attribute in the template.
Example below is using the @nuxtjs/color-mode module:
<template>
<div>
<Chart :key="$colorMode.value" :options="options" />
</div>
</template>
<script lang="ts" setup>
const { $colorMode } = useNuxtApp();
const options = computed(() => ({
theme: $colorMode.value, // it must be 'light' or 'dark'
width: '100%',
height: '400',
symbol: 'NASDAQ:AAPL',
...
}));
</script>