npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nuxt-tradingview

v1.3.3

Published

TradingView Widgets for Nuxt 3

Downloads

527

Readme

nuxt-tradingview-social-card

Nuxt TradingView

npm version npm downloads License Nuxt

Use the TradingView Widgets in your Nuxt 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
  1. 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

Examples

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

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