Use the TradingView Widgets in your Nuxt 3 Application

• 🧺 Multiple Widgets in Single Page
• 🍧 No Registration or API for TradingView
• 🌴 Optional Widget Inclusion (For Reducing Bundle Size)
• 🍽️ Customizable Component Names with Prefix Option

✨  Release Notes

We've prepared detailed documentation and playground which you can find here, but you can also refer to the examples below.

Additionally, you can check the Tradingview Docs for more information and configuration about the widgets.

1. Add nuxt-tradingview dependency to your project

# Using yarn
yarn add nuxt-tradingview

# Using npm
npm install nuxt-tradingview

# Using pnpm
pnpm add nuxt-tradingview

2. Add nuxt-tradingview to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-tradingview'
  ]
})

That's it! You can now use TradingView Widgets in your Nuxt app ✨

When you add this module, the following widget components are automatically imported into the project:

• Chart
• CompanyProfile
• CryptoHeatMap
• CryptoMarket
• EconomicCalendar
• ForexCrossRates
• ForexHeatMap
• FundamentalData
• MarketData
• MarketOverview
• MiniChart
• Screener
• SingleTicker
• StockMarket
• StockHeatMap
• SymbolInfo
• SymbolOverview
• TechnicalAnalysis
• Ticker
• TickerTape
• TopStories

The built-in widgets have default options based on Tradingview. If you did not define any options, the default options will be applied. Check available options on the Tradingview Docs

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>

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>

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>

The module by default will inject all widgets, but you can configure it to inject only the widgets you need. Additionally, you can add a prefix to widget component names to avoid conflicts with other local components.

To change default widget component names, you can add a prefix into the tradingview section to use every widget with that prefix.

export default defineNuxtConfig({
  tradingview: {
    prefix: 'TV' 
  }
})

Then you can use the components as follows:

<template>
  <TVChart />
  <TVCryptoMarket />
  <TVTopStories/>
  <TVScreener/>
</template>

If prefix is not defined, you can use the components as shown in the documentation.

To reduce the bundle size, you can import only the widgets you need. Add an importOnly parameter to the tradingview section to inject only the widgets you need.

export default defineNuxtConfig({
  tradingview: {
    importOnly: ['Chart', 'CryptoMarket', 'TopStories', 'Screener'] 
  }
})

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Develop the docs
npm run dev:docs

# Run ESLint
npm run lint

This software is licensed under the MIT License | @volkanakkus | Special thanks to @ehsan-shv 💚