### Install nuxt-tradingview module via Yarn, npm, or pnpm

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/1.getting-started/1.setup.md

Installs the nuxt-tradingview package using the chosen package manager. No additional dependencies are required. Run the appropriate command in your project root.

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

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

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

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

### Install nuxt-tradingview Dependency

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/README.md

This section shows how to add the nuxt-tradingview module to your project using different package managers (yarn, npm, pnpm). This is the first step to enable TradingView widgets in your Nuxt app.

```bash
# Using yarn
yarn add nuxt-tradingview

# Using npm
npm install nuxt-tradingview

# Using pnpm
pnpm add nuxt-tradingview
```

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

### Nuxt Module Setup and Component Registration (TypeScript)

Source: https://context7.com/volkanakkus/nuxt-tradingview/llms.txt

Defines the Nuxt module for integrating TradingView components. It handles module options, registers available widgets globally with an optional prefix, and adds runtime configuration for features like overriding defaults and experimental settings. Dependencies include `@nuxt/kit` utilities.

```typescript
// src/module.ts
import { defineNuxtModule, addComponent, createResolver } from '@nuxt/kit'

export interface ModuleOptions {
  prefix?: string
  importOnly?: Partial<AllWidgets>[]
  overrideDefaults?: boolean
  experimental?: {
    anonymousCrossOrigin?: boolean
  }
}

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: 'nuxt-tradingview',
    configKey: 'tradingview',
    compatibility: {
      nuxt: '>=3.0.0'
    }
  },
  defaults: {
    prefix: '',
    importOnly: undefined,
    overrideDefaults: true,
    experimental: {
      anonymousCrossOrigin: false
    }
  },
  setup(options, nuxt) {
    const { resolve } = createResolver(import.meta.url)

    const components: AllWidgets[] = [
      'Chart', 'SingleTicker', 'Ticker', 'TickerTape',
      'SymbolInfo', 'SymbolOverview', 'StockMarket', 'StockHeatMap',
      'Screener', 'MiniChart', 'MarketOverview', 'MarketData',
      'FundamentalData', 'ForexHeatMap', 'ForexCrossRates',
      'EconomicCalendar', 'TechnicalAnalysis', 'CryptoMarket',
      'CryptoHeatMap', 'CompanyProfile', 'TopStories'
    ]

    // Filter components if importOnly is specified
    const importWidgets = options.importOnly
      ? components.filter((component) => options.importOnly?.includes(component))
      : components

    // Register components with optional prefix
    importWidgets.forEach((component) => {
      addComponent({
        name: `${options.prefix}${component}`,
        global: true,
        filePath: resolve(`./runtime/components/${component}.vue`)
      })
    })

    // Add runtime config
    nuxt.options.runtimeConfig.public.tradingview = {
      overrideDefaults: !!options.overrideDefaults,
      experimental: {
        anonymousCrossOrigin: !!options.experimental?.anonymousCrossOrigin
      }
    }
  }
})

```

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

### Nuxt TradingView Development Commands

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/README.md

These Bash scripts manage development tasks for the nuxt-tradingview project, including dependency installation, type generation, playground development, building, and documentation. They require npm and Node.js. Commands produce no outputs but set up environments, with no limitations beyond standard npm requirements.

```bash
# 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
```

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

### Configure Nuxt TradingView module

Source: https://context7.com/volkanakkus/nuxt-tradingview/llms.txt

Set up the Nuxt TradingView module in your Nuxt configuration file. Supports basic installation with all widgets or advanced configuration with selective imports and component prefixing. Dependencies include a Nuxt 3 project. Outputs configured TradingView widgets with optional customization.

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

```typescript
export default defineNuxtConfig({
  modules: [
    'nuxt-tradingview'
  ],
  tradingview: {
    prefix: 'TV',
    importOnly: ['Chart', 'CryptoMarket', 'TopStories', 'Screener'],
    overrideDefaults: true,
    experimental: {
      anonymousCrossOrigin: false
    }
  }
})
```

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

### Configure TradingView options in Nuxt config

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/1.getting-started/1.setup.md

Adds an optional tradingview section to customize widget behavior. Insert this object within the Nuxt config alongside other settings. The section accepts various TradingView options.

```js
tradingview: {
  // Options
}
```

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

### Configure Screener Widget with Options Prop

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/2.widgets/13.screener.md

Vue template example demonstrating how to implement the Screener component with configuration options. The snippet shows passing an options object with width, height, theme, market, and display settings. Requires the nuxt-tradingview package and TradingView widget integration.

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

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

### Use prefixed components in template

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/1.getting-started/2.configuration.md

Example showing how to use components with a custom prefix in a Vue template. Requires prefix configuration in nuxt.config.ts.

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

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

### CryptoMarket Widget Vue Component Example

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/2.widgets/5.crypto-market.md

This snippet shows how to use the `<CryptoMarket/>` component in a Vue template. It configures the widget with options like width, height, theme, default column, screener type, display currency, and locale.

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

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

### Render MiniChart Widget in Vue.js

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/2.widgets/12.mini-chart.md

This Vue.js template example demonstrates how to use the MiniChart component by passing options like symbol, theme, and dimensions as props. It requires the Nuxt-TradingView library to be installed and the component imported. The component outputs a rendered mini chart widget with specified settings, ideal for embedding in pages without full backend integration.

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

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

### Add nuxt-tradingview module to Nuxt configuration

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/1.getting-started/1.setup.md

Registers the nuxt-tradingview module in the Nuxt config so that its widgets are automatically injected. Place this inside nuxt.config.ts or nuxt.config.js. Requires Nuxt 3 or newer.

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

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

### Implement Chart widget

Source: https://context7.com/volkanakkus/nuxt-tradingview/llms.txt

Use the Chart widget for advanced financial charting with technical analysis capabilities. Supports default configurations, custom options via props, multiple instances on the same page, and dynamic theming. Requires a Nuxt 3 project with the TradingView module installed.

```vue
<template>
  <div>
    <Chart />
    <Chart :options="chartOptions" />
    <Chart class="apple-chart" :options="appleOptions" />
    <Chart class="nvidia-chart" :options="nvidiaOptions" />
    <Chart
      :key="$colorMode.value"
      :options="dynamicChartOptions"
    />
  </div>
</template>

<script setup lang="ts">
const chartOptions = ref({
  theme: 'dark',
  autosize: true,
  symbol: 'NASDAQ:AAPL',
  interval: 'D',
  timezone: 'Etc/UTC',
  style: '1',
  backgroundColor: '#0C0C0D',
  locale: 'en',
  enable_publishing: false,
  allow_symbol_change: true,
  calendar: false
})

const appleOptions = ref({ symbol: 'NASDAQ:AAPL', theme: 'dark', autosize: true })
const nvidiaOptions = ref({ symbol: 'NASDAQ:NVDA', theme: 'dark', autosize: true })

const { $colorMode } = useNuxtApp()
const dynamicChartOptions = computed(() => ({
  theme: $colorMode.value,
  width: '100%',
  height: '400',
  symbol: 'NASDAQ:AAPL'
}))
</script>
```

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

### Basic Usage of TradingView Widgets in Nuxt

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/1.getting-started/3.usage.md

Displays multiple TradingView widgets using default options provided by the module. Requires the nuxt-tradingview module installed in Nuxt 3. No custom inputs needed; outputs rendered widgets on the page. Limited to default TradingView configurations without further options.

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

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

### Configure StockMarket Widget Options (Vue)

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/2.widgets/16.stock-market.md

Demonstrates how to configure the `<StockMarket/>` component by passing an `options` prop. The options object allows customization of the widget's appearance, data range, exchange, and more, as per TradingView's widget documentation. This example shows a dark theme with a 12-month date range for the US exchange.

```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>
```

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

### Using Ref for Chart Options in Nuxt Vue Component

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/1.getting-started/3.usage.md

Defines widget options in a reactive ref within script setup for better state management. Requires Composition API in Nuxt 3 with TypeScript support. Inputs via ref object; outputs bound to Chart component. Allows dynamic updates but needs manual reactivity handling.

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

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

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

### Dynamic Multiple Ticker Widgets in Loop in Nuxt

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/1.getting-started/3.usage.md

Uses a v-for loop to render SingleTicker widgets dynamically for a list of symbols, assigning unique classes based on keys. Requires reactive symbols array in script setup. Inputs are symbols ref; outputs multiple ticker widgets. Supports dynamic data but classes ensure separation.

```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>
```

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

### useInitWidget Composable (TypeScript)

Source: https://context7.com/volkanakkus/nuxt-tradingview/llms.txt

The core composable for initializing TradingView widgets. It merges default and user-provided options, manages container and script IDs, and asynchronously appends the TradingView script to the DOM after the component mounts. Dependencies include Vue's `ref`, `onMounted`, and Nuxt's `useRuntimeConfig`.

```typescript
// src/runtime/composables/useInitWidget.ts
import { ref, onMounted } from 'vue'
import { useRuntimeConfig } from '#app'

export default ( 
  defaultOptions: any, 
  userOptions: any, 
  widgetKey: string, 
  src: string 
): ReturnedObject => {
  const runtimeConfig = useRuntimeConfig().public.tradingview

  // Merge options based on overrideDefaults setting
  const options = runtimeConfig?.overrideDefaults === true
    ? (userOptions || defaultOptions)
    : { ...defaultOptions, ...userOptions }

  const container = ref(`tw-${widgetKey}-container`)
  const scriptID = ref(`tw-${widgetKey}-script`)
  const tradingview = ref<HTMLDivElement>()

  // Append TradingView script after component mount
  onMounted(() => {
    setTimeout(() => {
      const script = document.createElement('script')
      script.id = scriptID.value
      script.type = 'text/javascript'
      script.async = true
      script.src = src

      if (runtimeConfig.experimental?.anonymousCrossOrigin) {
        script.crossOrigin = 'anonymous'
      }

      script.textContent = JSON.stringify(options)
      if (tradingview.value) tradingview.value.appendChild(script)
    }, 300)
  })

  return { container, tradingview }
}

```

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

### Create market overview in Vue/Nuxt

Source: https://context7.com/volkanakkus/nuxt-tradingview/llms.txt

Renders a multi-tab market overview widget with customizable instrument groups. Supports indices, cryptocurrencies, and other asset classes with configurable display options.

```vue
<template>
  <div>
    <MarketOverview :options="marketOptions" />
  </div>
</template>

<script setup lang="ts">
const marketOptions = ref({
  width: '100%',
  height: 450,
  colorTheme: 'dark',
  dateRange: '12M',
  showChart: true,
  locale: 'en',
  isTransparent: false,
  showSymbolLogo: true,
  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' }
      ]
    },
    {
      title: 'Crypto',
      symbols: [
        { s: 'BITSTAMP:BTCUSD', d: 'Bitcoin' },
        { s: 'BITSTAMP:ETHUSD', d: 'Ethereum' },
        { s: 'BINANCE:BNBUSDT', d: 'Binance Coin' }
      ]
    }
  ]
})
</script>
```

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

### Configure ForexCrossRates Widget with Options (Vue)

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/2.widgets/7.forex-cross-rates.md

This snippet demonstrates how to use the `<ForexCrossRates/>` component in Vue. It shows passing a configuration object to the `options` prop to customize currency display, theme, and dimensions. Dependencies include the Vue framework and the Nuxt TradingView library.

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

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

### Import only specific widgets in Nuxt TradingView

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/1.getting-started/2.configuration.md

Reduces bundle size by importing only specified widgets. Widget names must match exactly, regardless of prefix configuration.

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

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

### Display symbol overview in Vue/Nuxt

Source: https://context7.com/volkanakkus/nuxt-tradingview/llms.txt

Renders a multi-symbol overview with mini charts. Supports multiple instruments with configurable chart types, indicators, and display options.

```vue
<template>
  <div>
    <SymbolOverview :options="symbolOverviewOptions" />
  </div>
</template>

<script setup lang="ts">
const symbolOverviewOptions = ref({
  width: '100%',
  height: 450,
  colorTheme: 'dark',
  symbols: [
    ['Apple', 'AAPL|1D'],
    ['Google', 'GOOGL|1D'],
    ['Microsoft', 'MSFT|1D']
  ],
  chartOnly: false,
  locale: 'en',
  showVolume: true,
  showMA: true,
  chartType: 'area'
})
</script>
```

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

### Implement Screener widget

Source: https://context7.com/volkanakkus/nuxt-tradingview/llms.txt

Use the Screener widget for filtering and analyzing financial instruments across different markets. Supports forex, crypto, and stock markets with customizable options. Requires a Nuxt 3 project with TradingView module. Each screener instance can be configured for specific market types and display preferences.

```vue
<template>
  <div>
    <Screener :options="forexScreener" />
    <Screener :options="cryptoScreener" />
    <Screener :options="stockScreener" />
  </div>
</template>

<script setup lang="ts">
const forexScreener = ref({
  width: '100%',
  height: 450,
  colorTheme: 'dark',
  defaultColumn: 'overview',
  defaultScreen: 'general',
  market: 'forex',
  showToolbar: true,
  locale: 'en'
})

const cryptoScreener = ref({
  width: '100%',
  height: 450,
  colorTheme: 'dark',
  defaultColumn: 'overview',
  defaultScreen: 'general',
  market: 'crypto',
  showToolbar: true,
  locale: 'en'
})

const stockScreener = ref({
  width: '100%',
  height: 450,
  colorTheme: 'dark',
  defaultColumn: 'overview',
  defaultScreen: 'general',
  market: 'america',
  showToolbar: true,
  locale: 'en'
})
</script>
```

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

### Show cryptocurrency market in Vue/Nuxt

Source: https://context7.com/volkanakkus/nuxt-tradingview/llms.txt

Displays a cryptocurrency market overview widget with rankings. Configurable dimensions, color theme, and display options. Requires TradingView widget library.

```vue
<template>
  <div>
    <CryptoMarket :options="cryptoOptions" />
  </div>
</template>

<script setup lang="ts">
const cryptoOptions = ref({
  width: '100%',
  height: 450,
  colorTheme: 'dark',
  defaultColumn: 'overview',
  screener_type: 'crypto_mkt',
  displayCurrency: 'USD',
  locale: 'en'
})
</script>
```

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

### Configure Ticker Widget Options in Vue.js

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/2.widgets/20.ticker.md

This Vue.js snippet demonstrates how to configure the TradingView Ticker Widget using the `options` prop. It includes settings for theme, symbols with their professional names and titles, transparency, symbol logo display, and locale. The `symbols` array allows for up to 15 entries.

```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>
```

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

### Configure Symbol Overview Widget in Vue

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/2.widgets/18.symbol-overview.md

This Vue.js snippet demonstrates how to configure the `<SymbolOverview/>` component by passing a detailed options object to its `options` prop. The options control various aspects of the widget, such as dimensions, theme, symbols to display, locale, and chart-specific settings. Dependencies include the `<SymbolOverview/>` component itself.

```vue
<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>
```

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

### Implementing SingleTicker Widget in Vue

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/2.widgets/14.single-ticker.md

The SingleTicker component displays the price and change percentage of a specified trading symbol using TradingView's widget. It requires an options object prop including properties like colorTheme, symbol, width, isTransparent, and locale. No additional dependencies are needed beyond the component; inputs are the options config, outputting an embedded widget; limitations include reliance on TradingView's API and builder for customization.

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

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

### Configure Market Overview Widget with Options in Vue

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/2.widgets/11.market-overview.md

This Vue.js snippet demonstrates how to configure the `<MarketOverview/>` component by passing a detailed options object to its `options` prop. The options control various aspects of the widget's appearance and data display, such as theme, date range, chart visibility, locale, and symbol lists for different market categories. This allows for a highly customized market overview display.

```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 component prefix in Nuxt TradingView

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/1.getting-started/2.configuration.md

Adds a prefix to all TradingView widget component names to avoid naming conflicts. The prefix is applied globally in the Nuxt configuration file.

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

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

### Configure nuxt-tradingview in nuxt.config.ts

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/README.md

This code snippet demonstrates how to register the nuxt-tradingview module in your Nuxt application's configuration file (`nuxt.config.ts`). After adding the dependency, this step enables the module's functionality.

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

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

### Show forex cross rates in Vue/Nuxt

Source: https://context7.com/volkanakkus/nuxt-tradingview/llms.txt

Displays a foreign exchange cross rates matrix for major currencies. Configurable currency list, dimensions, and display options. Requires TradingView widget library.

```vue
<template>
  <div>
    <ForexCrossRates :options="forexRates" />
  </div>
</template>

<script setup lang="ts">
const forexRates = ref({
  width: '100%',
  height: 450,
  colorTheme: 'dark',
  currencies: ['EUR', 'USD', 'JPY', 'GBP', 'CHF', 'AUD', 'CAD', 'NZD'],
  isTransparent: false,
  locale: 'en'
})
</script>
```

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

### Implementing Advanced TradingView Chart in Vue

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/2.widgets/2.chart.md

The <Chart/> component renders a customizable real-time chart widget from TradingView. It depends on the options prop generated via the TradingView Chart Widget builder, which configures aspects like dimensions, symbol, interval, theme, and interactivity. Inputs are the options object; outputs a rendered chart; limitations include reliance on external TradingView services and no direct code-level modifications to the widget internals.

```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>
```

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

### Show technical analysis in Vue/Nuxt

Source: https://context7.com/volkanakkus/nuxt-tradingview/llms.txt

Renders a technical analysis widget with indicators and ratings. Configurable time intervals, display modes, and analysis parameters for specific instruments.

```vue
<template>
  <div>
    <TechnicalAnalysis :options="technicalOptions" />
  </div>
</template>

<script setup lang="ts">
const technicalOptions = ref({
  width: '100%',
  height: 450,
  colorTheme: 'dark',
  interval: '1m',
  isTransparent: false,
  symbol: 'NASDAQ:AAPL',
  showIntervalTabs: true,
  displayMode: 'single',
  locale: 'en'
})
</script>
```

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

### Display stock heatmap in Vue/Nuxt

Source: https://context7.com/volkanakkus/nuxt-tradingview/llms.txt

Visualizes stock market performance as a heatmap. Configurable data source, grouping method, block sizing, and coloring options. Supports zoom and tooltips.

```vue
<template>
  <div>
    <StockHeatMap :options="heatmapOptions" />
  </div>
</template>

<script setup lang="ts">
const heatmapOptions = ref({
  width: '100%',
  height: 450,
  colorTheme: 'dark',
  dataSource: 'SPX500',
  grouping: 'sector',
  blockSize: 'market_cap_basic',
  blockColor: 'change',
  locale: 'en',
  hasTopBar: true,
  isZoomEnabled: true,
  hasSymbolTooltip: true
})
</script>
```

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

### Render SymbolInfo component with options in Vue

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/2.widgets/17.symbol-info.md

Shows how to embed the SymbolInfo component and pass a configuration object to customize the TradingView widget. Requires the TradingView Symbol Info widget builder for valid option values. The component renders the widget based on the provided options.

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

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

### TopStories Widget Configuration (Vue)

Source: https://context7.com/volkanakkus/nuxt-tradingview/llms.txt

Configures the TopStories widget to display financial news. It supports displaying news for all symbols or for a specific stock symbol. Options include width, height, color theme, feed mode, and locale.

```vue
<template>
  <div>
    <!-- All symbols news -->
    <TopStories :options="allNews" />

    <!-- Symbol-specific news -->
    <TopStories :options="symbolNews" />
  </div>
</template>

<script setup lang="ts">
const allNews = ref({
  width: '100%',
  height: 450,
  colorTheme: 'dark',
  feedMode: 'all_symbols',
  isTransparent: false,
  displayMode: 'regular',
  locale: 'en'
})

const symbolNews = ref({
  width: '100%',
  height: 450,
  colorTheme: 'dark',
  feedMode: 'symbol',
  symbol: 'NASDAQ:AAPL',
  isTransparent: false,
  displayMode: 'regular',
  locale: 'en'
})
</script>
```

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

### CompanyProfile Widget Configuration (Vue)

Source: https://context7.com/volkanakkus/nuxt-tradingview/llms.txt

Configures the CompanyProfile widget to display detailed company information. It requires a stock symbol and allows customization of dimensions, transparency, color theme, and locale.

```vue
<template>
  <div>
    <CompanyProfile :options="profileOptions" />
  </div>
</template>

<script setup lang="ts">
const profileOptions = ref({
  width: '100%',
  height: 450,
  isTransparent: false,
  colorTheme: 'dark',
  symbol: 'NASDAQ:AAPL',
  locale: 'en'
})
</script>
```

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

### Configuring TradingView Chart Widget with Options in Nuxt

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/1.getting-started/3.usage.md

Configures the Chart widget with custom options like theme, autosize, symbol, and timezone per TradingView docs. Depends on nuxt-tradingview module. Inputs are passed as props; outputs a customized chart widget. Options must match TradingView's supported parameters.

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

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

### Configure overrideDefaults for widget options

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/1.getting-started/2.configuration.md

Controls how default widget options are merged with custom options. When true, custom options override defaults; when false, options are explicitly merged.

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

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

### Implement TickerTape widget

Source: https://context7.com/volkanakkus/nuxt-tradingview/llms.txt

Display real-time price information using the scrolling TickerTape widget. Supports default configuration or custom symbol lists. Requires a Nuxt 3 project with TradingView module. Customizable with various display options and symbol configurations.

```vue
<template>
  <div>
    <TickerTape />
    <TickerTape :options="tickerOptions" />
  </div>
</template>

<script setup lang="ts">
const tickerOptions = ref({
  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' }
  ]
})
</script>
```

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

### Vue.js Forex Heatmap Widget Configuration

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/2.widgets/8.forex-heat-map.md

This Vue.js snippet demonstrates how to use the `<ForexHeatmap/>` component with custom options. It configures the widget's dimensions, theme, currencies to display, transparency, and locale. Ensure the TradingView widget builder is used to generate valid options.

```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>
```

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

### Vue.js CryptoHeatMap Widget Configuration

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/2.widgets/4.crypto-heat-map.md

This snippet demonstrates how to integrate and configure the `<CryptoHeatMap/>` component in a Vue.js application. It shows how to pass various options to customize the heatmap's appearance and data source, such as width, height, color theme, and data segmentation.

```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>
```

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

### Implementing CompanyProfile Vue Component

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/2.widgets/3.company-profile.md

The CompanyProfile component renders a TradingView widget showing company profile details such as description, sector, and industry. It requires an options object with properties like width, height, isTransparent, colorTheme, symbol, and locale; dependencies include the TradingView widget library. Inputs are passed via the options prop, outputting an embedded widget; limitations include reliance on TradingView's API and fixed locale support.

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

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

### Display single ticker in Vue/Nuxt

Source: https://context7.com/volkanakkus/nuxt-tradingview/llms.txt

Renders a single TradingView ticker widget for a specific instrument. Supports multiple tickers via v-for loop. Requires TradingView widget library.

```vue
<template>
  <div>
    <!-- Single ticker -->
    <SingleTicker :options="{ symbol: 'NASDAQ:AAPL' }" />

    <!-- Multiple tickers with loop -->
    <div v-for="symbol in symbols" :key="symbol">
      <SingleTicker
        :class="`ticker-${symbol}`"
        :options="{ symbol, colorTheme: 'dark', width: 350 }"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
const symbols = ref(['FX:EURUSD', 'FX:GBPUSD', 'FX:USDJPY', 'NASDAQ:AAPL', 'BITSTAMP:BTCUSD'])
</script>
```

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

### Render TechnicalAnalysis widget with options in Vue

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/2.widgets/19.technical-analysis.md

Shows how to embed the TradingView Technical Analysis widget using the <TechnicalAnalysis/> component in a Vue template. The options prop configures size, theme, symbol, interval, and display mode. Requires the TradingView widget library and a valid symbol string.

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

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

### Configure Stock Heatmap Widget in Vue

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/2.widgets/15.stock-heat-map.md

Demonstrates how to use the `<StockHeatmap/>` component in a Vue.js application. The widget is configured by passing an options object to the `options` prop, controlling aspects like dimensions, theme, data source, grouping, and display features.

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

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

### Implementing FundamentalData Widget in Vue.js

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/2.widgets/9.fundamental-data.md

This code snippet demonstrates how to use the FundamentalData component in a Vue.js template within a Nuxt project. It takes an options object as a prop to configure the TradingView widget, including dimensions, theme, and symbol details. Dependencies include the Nuxt-TradingView library; inputs are configuration options, output is the rendered widget; limitations include reliance on TradingView's API and specified options.

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

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

### Display economic calendar in Vue/Nuxt

Source: https://context7.com/volkanakkus/nuxt-tradingview/llms.txt

Shows an economic events calendar with configurable country and importance filters. Supports multiple economies and importance levels with customizable display options.

```vue
<template>
  <div>
    <EconomicCalendar :options="calendarOptions" />
  </div>
</template>

<script setup lang="ts">
const calendarOptions = ref({
  width: '100%',
  height: 450,
  colorTheme: 'dark',
  isTransparent: false,
  locale: 'en',
  importanceFilter: '-1,0,1', // All importance levels
  countryFilter: 'us,eu,jp,cn,gb' // Major economies
})
</script>
```

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

### Embed mini chart in Vue/Nuxt

Source: https://context7.com/volkanakkus/nuxt-tradingview/llms.txt

Displays a compact chart widget for embedding in tight spaces. Configurable symbol, date range, and display options. Ideal for dashboards with limited space.

```vue
<template>
  <div>
    <MiniChart :options="miniOptions" />
  </div>
</template>

<script setup lang="ts">
const miniOptions = ref({
  width: '100%',
  height: 200,
  colorTheme: 'dark',
  symbol: 'FX:EURUSD',
  locale: 'en',
  dateRange: '12M',
  isTransparent: false,
  autosize: false
})
</script>
```

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

### Vue Component for TradingView Top Stories Widget

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/2.widgets/22.top-stories.md

This Vue component integrates the TradingView Top Stories Widget to display market news. It accepts options for customization such as width, height, color theme, and feed mode. The widget is designed to be embedded within a Vue application.

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

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

### Configure Override Defaults in Nuxt Config

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/README.md

This TypeScript configuration controls how default widget options merge with user-provided props in Nuxt.js. It uses the nuxt-tradingview module for deep merging. When true, user options override defaults; when false, explicit merge preserves defaults, aiding partial option provision without dependencies.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  tradingview: {
    overrideDefaults: true // Default
  }
})
```

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

### Rendering Multiple Chart Widgets with Unique Classes in Nuxt

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/1.getting-started/3.usage.md

Renders multiple instances of the same widget on one page using unique CSS classes to avoid conflicts. Depends on nuxt-tradingview module. Inputs are class props; outputs distinct widget instances. Limitation: Classes must be unique for proper isolation.

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

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

### Dynamic Color Mode for TradingView Widgets in Nuxt

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/1.getting-started/3.usage.md

Integrates with @nuxtjs/color-mode module to dynamically update widget theme on color changes, using computed options and key binding. Depends on color-mode module and nuxt-tradingview. Inputs from $colorMode; outputs re-rendered widget on theme switch. Limitation: Theme must be 'light' or 'dark'.

```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>
```

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

### Vue Implementation of Economic Calendar Widget

Source: https://github.com/volkanakkus/nuxt-tradingview/blob/main/docs/content/1.documentation/2.widgets/6.economic-calendar.md

This component embeds the TradingView Economic Calendar widget in a Vue template. It requires the options prop with properties like width, height, theme, transparency, locale, importance filters, and country codes. The widget displays economic events; limitations include dependency on TradingView's widget builder for options generation and no server-side rendering support for interactive features.

```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>
```