Nuxt TradingView

https://nuxt-tradingview.volkanakkus.com/documentation/
Admin
A Nuxt 3 module that seamlessly integrates TradingView widgets into your application, providing 20+...
Tokens:7,638
Snippets:61
Trust Score:4.5
Update:11 months ago
Show doc for...
Tokens:
Raw
### Install nuxt-tradingview with NPM

Source: https://nuxt-tradingview.volkanakkus.com/documentation/getting-started/setup

Command to install the nuxt-tradingview module using NPM package manager. This adds the module to your project dependencies.

```bash
npm install nuxt-tradingview
```

--------------------------------

### Install nuxt-tradingview with PNPM

Source: https://nuxt-tradingview.volkanakkus.com/documentation/getting-started/setup

Command to install the nuxt-tradingview module using PNPM package manager. This adds the module to your project dependencies.

```bash
pnpm add nuxt-tradingview
```

--------------------------------

### Install nuxt-tradingview with Yarn

Source: https://nuxt-tradingview.volkanakkus.com/documentation/getting-started/setup

Command to install the nuxt-tradingview module using Yarn package manager. This adds the module to your project dependencies.

```bash
yarn add nuxt-tradingview
```

--------------------------------

### Configure TradingView options

Source: https://nuxt-tradingview.volkanakkus.com/documentation/getting-started/setup

Basic configuration structure for the tradingview module in nuxt.config.ts. Placeholder for module-specific options.

```typescript
tradingview: {
  // Options
}
```

--------------------------------

### Basic Nuxt 3 TradingView Widgets Setup

Source: https://nuxt-tradingview.volkanakkus.com/documentation/getting-started/usage

Demonstrates the basic integration of various TradingView Widgets (Chart, CryptoMarket, TopStories, Screener) in a Nuxt 3 application using default options.

```vue
<template>
  <Chart />
  <CryptoMarket />
  <TopStories/>
  <Screener/>
</template>
```

--------------------------------

### Configure Forex Heatmap Widget (Vue.js)

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/forex-heat-map

Example of how to configure and use the Forex Heatmap widget in a Vue.js component. It demonstrates passing various options such as width, height, color theme, currencies, transparency, and locale.

```vue
<template>
  <ForexHeatMap :options="{
    width: '100%',
    height: 450,
    colorTheme: 'dark',
    currencies: ['EUR', 'USD', 'JPY', 'GBP', 'CHF', 'AUD', 'CAD', 'NZD', 'CNY'],
    isTransparent: false,
    locale: 'en',
  }"/>
</template>

```

--------------------------------

### SymbolInfo Widget Integration in Vue.js

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/symbol-info

This example demonstrates how to integrate and configure the `<SymbolInfo/>` widget within a Vue.js template. It shows passing a configuration object to the `options` prop to customize appearance and data display, such as width, theme, symbol, locale, and transparency.

```html
<template>
  <SymbolInfo :options="{
    width: '100%',
    colorTheme: 'dark',
    symbol: 'NASDAQ:AAPL',
    locale: 'en',
    isTransparent: false,
  }"/>
</template>
```

--------------------------------

### Displaying Stock Market Data with Nuxt TradingView Widget

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/stock-market

This example demonstrates how to use the `<StockMarket/>` component from Nuxt TradingView to display stock market data. It utilizes the `options` prop to configure the widget's appearance and data fetching, such as width, theme, date range, and exchange. The widget updates in real-time with current market activity.

```vue
<template>
  <StockMarket :options="{
    width: '100%',
    height: 450,
    colorTheme: 'dark',
    dateRange: '12M',
    exchange: 'US',
    showChart: true,
    locale: 'en',
    largeChartUrl: '',
    isTransparent: false,
    showSymbolLogo: false,
    showFloatingTooltip: false,
    plotLineColorGrowing: 'rgba(41, 98, 255, 1)',
    plotLineColorFalling: 'rgba(41, 98, 255, 1)',
    gridLineColor: 'rgba(42, 46, 57, 0)',
    scaleFontColor: 'rgba(134, 137, 147, 1)',
    belowLineFillColorGrowing: 'rgba(41, 98, 255, 0.12)',
    belowLineFillColorFalling: 'rgba(41, 98, 255, 0.12)',
    belowLineFillColorGrowingBottom: 'rgba(41, 98, 255, 0)',
    belowLineFillColorFallingBottom: 'rgba(41, 98, 255, 0)',
    symbolActiveColor: 'rgba(41, 98, 255, 0.12)'
  }"/>
</template>

<script setup>
// Import the StockMarket component if not globally registered
// import StockMarket from '~/components/StockMarket.vue';
</script>
```

--------------------------------

### Add module to Nuxt config

Source: https://nuxt-tradingview.volkanakkus.com/documentation/getting-started/setup

Code snippet to add the nuxt-tradingview module to the modules array in nuxt.config.ts. This enables the module in your Nuxt application.

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

--------------------------------

### Implement CryptoHeatMap Widget in Vue/Nuxt Template

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/crypto-heat-map

Demonstrates how to integrate the TradingView Crypto Heatmap widget into a Vue/Nuxt application using component props. The example shows a complete configuration object with options for theming, sizing, data source, and interactive features. Requires the CryptoHeatMap component to be properly registered and the TradingView widget library to be available in the project.

```vue
<template>
  <CryptoHeatMap :options="{
    dataSource: 'Crypto',
    width: '100%',
    height: 450,
    colorTheme: 'dark',
    blockSize: 'market_cap_calc',
    blockColor: 'change',
    locale: 'en',
    symbolUrl: '',
    hasTopBar: false,
    isDataSetEnabled: false,
    isZoomEnabled: true,
    hasSymbolTooltip: true,
  }"/>
</template>
```

--------------------------------

### Embed TradingView Screener in Vue Template

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/screener

This Vue template example shows how to instantiate the <Screener/> component with options prop for widget configuration. It depends on the TradingView widget library in a Nuxt.js app. Input is an options object specifying size, theme, market, and localization; output is a rendered screener UI within the template. Limitations include requiring TradingView integration and valid option values.

```vue
<template>
  <Screener :options="{
    width: '100%',
    height: 450,
    colorTheme: 'dark',
    defaultColumn: 'overview',
    defaultScreen: 'general',
    market: 'forex',
    showToolbar: true,
    locale: 'en',
  }"/>
</template>
```

--------------------------------

### Configure TradingView Ticker Widget in Nuxt.js

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/ticker

This code snippet shows how to configure and use the TradingView Ticker Widget within a Nuxt.js Vue template. It includes options for theme, symbols, transparency, logo display, and locale. Ensure the `<Ticker/>` component is correctly imported and available.

```vue
<template>
  <Ticker :options="{
    colorTheme: 'dark',
    symbols: [
        {
          proName: 'FOREXCOM:SPXUSD',
          title: 'S&P 500 Index',
        },
        {
          proName: 'FOREXCOM:NSXUSD',
          title: 'US 100 Cash CFD',
        },
        {
          proName: 'FX_IDC:EURUSD',
          title: 'EUR to USD',
        },
        {
          proName: 'BITSTAMP:BTCUSD',
          title: 'Bitcoin',
        },
        {
          proName: 'BITSTAMP:ETHUSD',
          title: 'Ethereum',
        },
      },
      isTransparent: false,
      showSymbolLogo: true,
      locale: 'en',
  }"/>
</template>

<script>
// Assuming Ticker component is imported and registered elsewhere
export default {
  name: 'TradingViewTicker'
}
</script>

```

--------------------------------

### Implement SingleTicker Widget in Vue

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/single-ticker

Example Vue.js template demonstrating how to use the SingleTicker component with TradingView widget options. Pass configuration via the options prop including color theme, symbol, dimensions, and locale settings. Requires the SingleTicker component to be registered in your Nuxt.js application and TradingView widget library to be available.

```vue
<template>
  <SingleTicker :options="{
    colorTheme: 'dark',
    symbol: 'FX:EURUSD',
    width: 350,
    isTransparent: false,
    locale: 'en',
  }"/>
</template>
```

--------------------------------

### Control Default Widget Options Override - Nuxt Config

Source: https://nuxt-tradingview.volkanakkus.com/documentation/getting-started/configuration

Manage how default widget props are merged with your custom options. Setting `overrideDefaults` to `true` (the default) allows your provided props to override specific default fields. Setting it to `false` enables an explicit merge mode, starting from defaults and applying your options.

```typescript
export default defineNuxtConfig({
  tradingview: {
    overrideDefaults: true  // Default
  }
})
```

--------------------------------

### Configure TopStories Widget in Vue Template

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/top-stories

Demonstrates how to integrate the TradingView TopStories widget into a Vue or Nuxt template. The code shows component usage with configuration options including dimensions, color theme, feed mode, transparency, display mode, and locale. This example configures a dark-themed widget displaying all symbols with regular display mode.

```vue
<template>
  <TopStories :options="{
    width: '100%',
    height: 450,
    colorTheme: 'dark',
    feedMode: 'all_symbols',
    isTransparent: false,
    displayMode: 'regular',
    locale: 'en',
  }"/>
</template>
```

--------------------------------

### CryptoMarket Component Usage (Vue.js)

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/crypto-market

Demonstrates how to use the CryptoMarket component in a Vue.js application. It shows how to pass configuration options to the component via the `options` prop. The options object controls aspects like widget dimensions, theme, default view, screener type, display currency, and locale.

```html
<template>
  <CryptoMarket :options="{
    width: '100%',
    height: 450,
    colorTheme: 'dark',
    defaultColumn: 'overview',
    screener_type: 'crypto_mkt',
    displayCurrency: 'USD',
    locale: 'en',
  }"/>
</template>
```

--------------------------------

### Configure SymbolOverview Widget Options (Vue.js)

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/symbol-overview

This snippet demonstrates how to configure the TradingView Symbol Overview widget. It uses the `:options` prop to pass an object containing various settings like theme, symbols, chart preferences, and styling. The data is passed as a Vue.js template component.

```html
<template>
  <SymbolOverview :options="{
    width: '100%',
    height: 450,
    colorTheme: 'dark',
    symbols: [
      ['Apple', 'AAPL|1D'],
      ['Google', 'GOOGL|1D'],
      ['Microsoft', 'MSFT|1D'],
    ],
    chartOnly: false,
    locale: 'en',
    autosize: false,
    showVolume: false,
    showMA: false,
    hideDateRanges: false,
    hideMarketStatus: false,
    hideSymbolLogo: false,
    scalePosition: 'right',
    scaleMode: 'Normal',
    fontFamily:
      '-apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif',
    fontSize: '10',
    noTimeScale: false,
    valuesTracking: '1',
    changeMode: 'price-and-percent',
    chartType: 'area',
    maLineColor: '#2962FF',
    maLineWidth: 1,
    maLength: 9,
    lineWidth: 2,
    lineType: 0,
    dateRanges: ['1d|1', '1m|30', '3m|60', '12m|1D', '60m|1W', 'all|1M'],
  }"/>
</template>
```

--------------------------------

### Implement TradingView Chart Widget in Nuxt.js

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/chart

Demonstrates how to use the Chart component with customizable options in a Nuxt.js template. The options include width, height, symbol, interval, and theme settings for the TradingView widget.

```Vue
<template>
  <Chart :options="{
    width: '100%',
    height: '400',
    symbol: 'NASDAQ:AAPL',
    interval: 'D',
    timezone: 'Etc/UTC',
    theme: 'dark',
    style: '1',
    backgroundColor: '#0C0C0D',
    locale: 'en',
    enable_publishing: false,
    allow_symbol_change: true,
    calendar: false,
  }"/>
</template>
```

--------------------------------

### Implement Fundamental Data Widget

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/fundamental-data

Implementation of the TradingView Fundamental Data widget with configurable options. The widget displays company fundamentals beyond stock prices. Requires TradingView widget library dependency. Accepts options object for customization including width, height, color theme, and symbol parameters.

```vue
<template>
  <FundamentalData :options="{
    width: '100%',
    height: 450,
    colorTheme: 'dark',
    isTransparent: false,
    largeChartUrl: '',
    displayMode: 'regular',
    symbol: 'NASDAQ:AAPL',
    locale: 'en',
  }"/>
</template>
```

--------------------------------

### Configure MarketOverview Widget in Vue

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/market-overview

Demonstrates how to configure the MarketOverview widget using the `options` prop in a Vue template. The options control the widget's appearance, data range, and displayed symbols.

```vue
<template>
  <MarketOverview :options="{
    width: '100%',
    height: 450,
    colorTheme: 'dark',
    dateRange: '12M',
    showChart: true,
    locale: 'en',
    largeChartUrl: '',
    isTransparent: false,
    showSymbolLogo: true,
    showFloatingTooltip: false,
    plotLineColorGrowing: 'rgba(41, 98, 255, 1)',
    plotLineColorFalling: 'rgba(41, 98, 255, 1)',
    gridLineColor: 'rgba(42, 46, 57, 0)',
    scaleFontColor: 'rgba(134, 137, 147, 1)',
    belowLineFillColorGrowing: 'rgba(41, 98, 255, 0.12)',
    belowLineFillColorFalling: 'rgba(41, 98, 255, 0.12)',
    belowLineFillColorGrowingBottom: 'rgba(41, 98, 255, 0)',
    belowLineFillColorFallingBottom: 'rgba(41, 98, 255, 0)',
    symbolActiveColor: 'rgba(41, 98, 255, 0.12)',
    tabs: [
      {
        title: 'Indices',
        symbols: [
          {"s": "FOREXCOM:SPXUSD", "d": "S&P 500 Index"},
          {"s": "FOREXCOM:NSXUSD", "d": "US 100 Cash CFD"},
          {"s": "FOREXCOM:DJI", "d": "Dow Jones Industrial Average Index"},
          {"s": "INDEX:NKY", "d": "Nikkei 225"},
          {"s": "INDEX:DEU40", "d": "DAX Index"},
          {"s": "FOREXCOM:UKXGBP", "d": "FTSE 100 Index"},
        ],
        originalTitle: 'Indices',
      },
      {
        title: 'Futures',
        symbols: [
          {"s": "CME_MINI:ES1!", "d": "S&P 500"},
          {"s": "CME:6E1!", "d": "Euro"},
          {"s": "COMEX:GC1!", "d": "Gold"},
          {"s": "NYMEX:CL1!", "d": "WTI Crude Oil"},
          {"s": "NYMEX:NG1!", "d": "Gas"},
          {"s": "CBOT:ZC1!", "d": "Corn"},
        ],
        originalTitle: 'Futures',
      },
      {
        title: 'Bonds',
        symbols: [
          {"s": "CBOT:ZB1!", "d": "T-Bond"},
          {"s": "CBOT:UB1!", "d": "Ultra T-Bond"},
          {"s": "EUREX:FGBL1!", "d": "Euro Bund"},
          {"s": "EUREX:FBTP1!", "d": "Euro BTP"},
          {"s": "EUREX:FGBM1!", "d": "Euro BOBL"},
        ],
        originalTitle: 'Bonds',
      },
      {
        title: 'Forex',
        symbols: [
          {"s": "FX:EURUSD", "d": "EUR to USD"},
          {"s": "FX:GBPUSD", "d": "GBP to USD"},
          {"s": "FX:USDJPY", "d": "USD to JPY"},
          {"s": "FX:USDCHF", "d": "USD to CHF"},
          {"s": "FX:AUDUSD", "d": "AUD to USD"},
          {"s": "FX:USDCAD", "d": "USD to CAD"},
        ],
        originalTitle: 'Forex',
      },
    ],
  }}</template>
```

--------------------------------

### Configure Economic Calendar Widget Options

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/economic-calendar

Sets up the TradingView Economic Calendar widget with customizable display and filtering options. Configure dimensions, color theme, transparency, locale, event importance levels, and country-specific filters. The widget displays upcoming economic events based on specified criteria.

```vue
<template>
  <EconomicCalendar :options="{
    width: '100%',
    height: 450,
    colorTheme: 'dark',
    isTransparent: false,
    locale: 'en',
    importanceFilter: '-1,0,1',
    countryFilter: 'ar,au,br,ca,cn,fr,de,in,id,it,jp,kr,mx,ru,sa,za,tr,gb,us,eu',
  }"/>
</template>
```

--------------------------------

### Dynamic Nuxt TradingView Chart Configuration with Ref

Source: https://nuxt-tradingview.volkanakkus.com/documentation/getting-started/usage

Illustrates configuring a TradingView Chart widget in Nuxt 3 by passing a reactive ref variable to the options prop, allowing for dynamic updates.

```vue
<template>
  <Chart :options="chartOptions" />
</template>

<script setup lang="ts">
const chartOptions = ref({
  theme: 'dark',
  autosize: true,
  symbol: 'NASDAQ:AAPL',
  timezone: 'Etc/UTC',
})
</script>
```

--------------------------------

### Import Only Specific Widgets - Nuxt Config

Source: https://nuxt-tradingview.volkanakkus.com/documentation/getting-started/configuration

Reduce the final bundle size by importing only the necessary TradingView widgets. Use the `importOnly` array in your `nuxt.config.ts` to specify the exact widget names you intend to use. Note that widget names should be the default ones, even if a prefix is defined.

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

--------------------------------

### Display Company Profile Widget Options (Vue.js)

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/company-profile

This code snippet demonstrates how to use the `<CompanyProfile/>` widget in a Vue.js template. It shows how to pass configuration options such as width, height, color theme, symbol, and locale to the widget.

```vue
<template>
  <CompanyProfile :options="{
    width: '100%',
    height: 450,
    isTransparent: false,
    colorTheme: 'dark',
    symbol: 'NASDAQ:AAPL',
    locale: 'en',
  }"/>
</template>

```

--------------------------------

### Vue Template for MiniChart Widget

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/mini-chart

This Vue.js template demonstrates how to use the `<MiniChart/>` component. It passes a configuration object to the `options` prop, specifying chart dimensions, theme, symbol, locale, date range, and other display properties. Ensure the `MiniChart` component and its dependencies are correctly imported.

```html
<template>
  <MiniChart :options="{
    width: '100%',
    height: 200,
    colorTheme: 'dark',
    symbol: 'FX:EURUSD',
    locale: 'en',
    dateRange: '12M',
    isTransparent: false,
    autosize: false,
    largeChartUrl: '',
  }"/>
</template>
```

--------------------------------

### Display Forex Cross Rates Widget with Options

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/forex-cross-rates

This Vue.js snippet demonstrates how to use the `<ForexCrossRates/>` component. It accepts an `options` prop to configure the widget's appearance, displayed currencies, and locale. Ensure the component is correctly imported before use.

```html
<template>
  <ForexCrossRates :options="{
    width: '100%',
    height: 450,
    colorTheme: 'dark',
    currencies: ['EUR', 'USD', 'JPY', 'GBP', 'CHF', 'AUD', 'CAD', 'NZD'],
    isTransparent: false,
    locale: 'en',
  }"/>
</template>

<script>
import ForexCrossRates from '~/components/ForexCrossRates.vue';

export default {
  components: {
    ForexCrossRates
  }
};
</script>
```

--------------------------------

### Multiple Nuxt TradingView Chart Instances

Source: https://nuxt-tradingview.volkanakkus.com/documentation/getting-started/usage

Explains how to use multiple instances of the same TradingView Widget (e.g., Chart) on a single Nuxt 3 page by assigning unique class names to each instance.

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

--------------------------------

### Configure Nuxt TradingView Chart Widget Options

Source: https://nuxt-tradingview.volkanakkus.com/documentation/getting-started/usage

Shows how to configure a TradingView Chart widget with specific options like theme, autosize, symbol, and timezone directly within the template in a Nuxt 3 app.

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

--------------------------------

### Render TradingView Market Data Widget with Vue

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/market-data

The snippet demonstrates embedding the TradingView Market Data widget using the <MarketData/> Vue component. It passes a comprehensive options object that defines appearance, locale, and a list of symbol groups such as Indices and Futures. Ensure the TradingView widget script is loaded in the project for the component to function correctly.

```Vue
<template>\n  <MarketData :options=\"{\n    width: '100%',\n    height: 450,\n    colorTheme: 'dark',\n    showSymbolLogo: true,\n    isTransparent: false,\n    locale: 'en',\n    backgroundColor: '#0C0C0D',\n    symbolsGroups: [\n      {\n        name: 'Indices',\n        originalName: 'Indices',\n        symbols: [\n          {\n            name: 'FOREXCOM:SPXUSD',\n            displayName: 'S&P 500 Index',\n          },\n          {\n            name: 'FOREXCOM:NSXUSD',\n            displayName: 'US 100 Cash CFD',\n          },\n          {\n            name: 'FOREXCOM:DJI',\n            displayName: 'Dow Jones Industrial Average Index',\n          },\n          {\n            name: 'INDEX:NKY',\n            displayName: 'Nikkei 225',\n          },\n          {\n            name: 'INDEX:DEU40',\n            displayName: 'DAX Index',\n          },\n          {\n            name: 'FOREXCOM:UKXGBP',\n            displayName: 'FTSE 100 Index',\n          },\n        ],\n      },\n      {\n        name: 'Futures',\n        originalName: 'Futures',\n        symbols: [\n          {\n            name: 'CME_MINI:ES1!',\n            displayName: 'S&P 500',\n          },\n          {\n            name: 'CME:6E1!',\n            displayName: 'Euro',\n          },\n          {\n            name: 'COMEX:GC1!',\n            displayName: 'Gold',\n          },\n          {\n            name: 'NYMEX:CL1!',\n            displayName: 'WTI Crude Oil',\n          },\n          {\n            name: 'NYMEX:NG1!',\n            displayName: 'Gas',\n          },\n          {\n            name: 'CBOT:ZC1!',\n            displayName: 'Corn',\n          },\n        ],\n      },\n    ],\n  }\"/>\n</template>
```

--------------------------------

### Set Widget Component Prefix - Nuxt Config

Source: https://nuxt-tradingview.volkanakkus.com/documentation/getting-started/configuration

Configure a prefix for all TradingView widget components in your Nuxt application. This helps prevent naming conflicts with local components. The prefix is set within the `tradingview` section of your `nuxt.config.ts` file.

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

--------------------------------

### Render StockHeatMap component with options in Vue

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/stock-heat-map

This snippet demonstrates how to embed the <StockHeatMap/> component within a Vue template and pass a fully defined options object. The options are generated via the TradingView widget builder and control size, theme, data source, grouping, and interactive features. No additional dependencies are required beyond the component library.

```Vue
<template>\n  <StockHeatMap :options=\"{\n    width: '100%',\n    height: 450,\n    colorTheme: 'dark',\n    exchanges: [],\n    dataSource: 'SPX500',\n    grouping: 'no_group',\n    blockSize: 'market_cap_basic',\n    blockColor: 'Perf.YTD',\n    locale: 'en',\n    symbolUrl: '',\n    hasTopBar: false,\n    isDataSetEnabled: false,\n    isZoomEnabled: true,\n    hasSymbolTooltip: true,\n  }\"/>\n</template>
```

--------------------------------

### Configure TechnicalAnalysis Widget in Nuxt Template

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/technical-analysis

Demonstrates how to integrate the TechnicalAnalysis component in a Vue template with comprehensive configuration options. Requires the widget component to be registered globally or imported. Accepts an options object prop that controls widget appearance, symbol, theme, and display settings, rendering an embedded TradingView technical analysis widget.

```vue
<template>
  <TechnicalAnalysis :options="{
    width: '100%',
    height: 450,
    colorTheme: 'dark',
    interval: '1m',
    isTransparent: false,
    symbol: 'NASDAQ:AAPL',
    showIntervalTabs: true,
    displayMode: 'single',
    locale: 'en',
  }"/>
</template>
```

--------------------------------

### TickerTape Widget Implementation

Source: https://nuxt-tradingview.volkanakkus.com/documentation/widgets/ticker-tape

Vue component implementation of TradingView TickerTape widget with configuration options. Sets up a dark-themed, non-transparent ticker with symbol logos for major financial instruments including S&P 500, US 100, EUR/USD, Bitcoin, and Ethereum. Supports adaptive display mode and English locale.

```vue
<template>
  <TickerTape :options="{
    colorTheme: 'dark',
    showSymbolLogo: true,
    isTransparent: false,
    displayMode: 'adaptive',
    locale: 'en',
    symbols: [
      {
        proName: 'FOREXCOM:SPXUSD',
        title: 'S&P 500 Index',
      },
      {
        proName: 'FOREXCOM:NSXUSD',
        title: 'US 100 Cash CFD',
      },
      {
        proName: 'FX_IDC:EURUSD',
        title: 'EUR to USD',
      },
      {
        proName: 'BITSTAMP:BTCUSD',
        title: 'Bitcoin',
      },
      {
        proName: 'BITSTAMP:ETHUSD',
        title: 'Ethereum',
      },
    ],
  }"/>
</template>
```

--------------------------------

### Dynamic Nuxt TradingView Ticker Widget in Loop

Source: https://nuxt-tradingview.volkanakkus.com/documentation/getting-started/usage

Demonstrates using a TradingView SingleTicker widget dynamically within a v-for loop in Nuxt 3, with each widget receiving unique options based on the loop item and having a unique class.

```vue
<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 Nuxt TradingView Widget

Source: https://nuxt-tradingview.volkanakkus.com/documentation/getting-started/usage

Shows how to implement dynamic color mode support for a TradingView Chart widget in Nuxt 3 using the @nuxtjs/color-mode module. The widget's theme is bound to the current color mode, and the widget is re-rendered on color change using the :key attribute.

```vue
<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>
```
Tokens:
Raw