Nuxt TradingView

Use the TradingView Widgets in your Nuxt 3 Application

Features

• 🧺 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

Documentation

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.

Quick Setup

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 ✨

Widgets Built-in

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

Nuxt 3 Example

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

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>

Module Options

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.

prefix

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.

importOnly

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'] 
  }
})

!NOTE Make sure to use the exact names of the widgets. Even if you define a prefix, you must use the default name of the widgets. You can find all widget names here.

Development

# 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 💚