nuxt-tradingview-social-card

Nuxt TradingView

在您的 Nuxt 應用程式中使用 TradingView 小工具

相容性：Nuxt >= 3
🏀 線上遊樂場

功能

🧺 單頁多個小工具
🍧 無需註冊或 TradingView API
🌴 可選的小工具包含（用於減少捆綁包大小）
🍽️ 可使用前綴選項自訂元件名稱

✨ 發布說明

文件

我們準備了詳細的文件和遊樂場，您可以在這裡找到，但您也可以參考下面的範例。

此外，您可以查看Tradingview 文件，以取得有關小工具的更多資訊和配置。

快速設定

將 nuxt-tradingview 依賴項新增至您的專案

# Using yarn
yarn add nuxt-tradingview

# Using npm
npm install nuxt-tradingview

# Using pnpm
pnpm add nuxt-tradingview

將 nuxt-tradingview 新增至 nuxt.config.ts 的 modules 區段

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

就是這樣！您現在可以在您的 Nuxt 應用程式中使用 TradingView 小工具 ✨

內建小工具

當您新增此模組時，以下小工具元件會自動匯入到專案中

圖表
公司簡介
加密貨幣熱圖
加密貨幣市場
經濟日曆
外匯交叉匯率
外匯熱圖
基本數據
市場數據
市場概覽
迷你圖表
篩選器
單一股票代碼
股票市場
股票熱圖
符號資訊
符號概覽
技術分析
股票代碼
股票行情看板
熱門新聞

範例

內建的小工具具有基於 Tradingview 的預設選項。如果您沒有定義任何選項，則會應用預設選項。請查看Tradingview 文件上可用的選項

基本用法

使用所有具有預設選項的小工具的範例

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

根據Tradingview 文件使用選項配置小工具

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

或者，您可以將 ref 變數傳遞給它

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

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

多個小工具

如果您想在單頁上多次使用相同的小工具，則應為每個小工具定義一個唯一的類別。

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

例如，在 for 迴圈中，您可以使用 key 作為唯一的類別

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

動態顏色模式

為了支援動態顏色模式，您可以使用 theme 或 colorTheme 屬性，將您的顏色模式外掛程式或 @nuxtjs/color-mode 模組整合到小工具選項中。

為了在每次顏色變更時重新渲染小工具，您還應將顏色模式繫結到範本中的 :key 屬性。

下面的範例是使用 @nuxtjs/color-mode 模組

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

模組選項

預設情況下，模組會注入所有小工具，但您可以將其設定為僅注入您需要的小工具。此外，您可以為小工具元件名稱新增前綴，以避免與其他本地元件衝突。

prefix

若要變更預設的小工具元件名稱，您可以在 tradingview 區段中新增 prefix，以便使用該前綴使用每個小工具。

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

然後您可以如下使用這些元件

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

如果未定義 prefix，則可以使用文件中所示的元件。

importOnly

若要減少捆綁包大小，您可以僅匯入您需要的小工具。在 tradingview 區段中新增 importOnly 參數，以便僅注入您需要的小工具。

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

!注意請務必使用小工具的確切名稱。即使您定義了 prefix，您也必須使用小工具的預設名稱。您可以在這裡找到所有小工具名稱。

開發

# 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

本軟體根據MIT 授權授權 | @volkanakkus | 特別感謝 @ehsan-shv 💚