Nuxt TradingView

Use the TradingView Widgets in your Nuxt 3 Application

Features

Nuxt 3 Ready
Multiple Widgets in Single Page
No registration or API for TradingView

Documentation

We're preparing the documentation and playground, it will be added soon.

Quick Setup

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

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
Snaps
StockMarket
SymbolInfo
SymbolOverview
TechnicalAnalysis
Ticker
TickerTape

Nuxt 3 Example

<template>
  <Chart />
  <CryptoMarket />
  <Snaps/>
  <Screener/>
</template>

If you want to use multiple charts in single vue file, you should define unique class for every widget.

<template>
  <Chart class="apple-chart"/>
  <Chart class="nvidia"/>
</template>

The built-in widget components have default options based on Tradingview. Check available options on Tradingview

<template>
  <Chart
    :options="{
      theme: 'dark',
      autosize: true,
      symbol: 'NASDAQ:AAPL',
      timezone: 'Etc/UTC',
    }"
  />
</template>

Or, you can pass variable into it:

<template>
  <Chart
    :options="options"
  />
</template>

<script lang="ts" setup>
const options = {
  theme: 'dark',
  autosize: true,
  symbol: 'NASDAQ:AAPL',
  timezone: 'Etc/UTC',
};
</script>

Module Options

With module options, you can set prefix to every component. You must add tradingview config to nuxt.config.ts, here's the example:

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

  tradingview: {
    prefix: 'TV' // if it's not defined, you can use the components as shown as in the docs. 
  }
})

Then you can use the components as:

<template>
  <TVChart />
  <TVCryptoMarket />
  <TVSnaps/>
  <TVScreener/>
</template>

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

# Run ESLint
npm run lint

# Release new version
npm run release

JSPM