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>
動態色彩模式
為了支援動態色彩模式，您可以將您的色彩模式外掛程式或 @nuxtjs/color-mode 模組整合到小工具選項中，並使用 theme 或 colorTheme 屬性。
為了在每次顏色變更時重新渲染小工具，您還應該將色彩模式綁定到範本中的 :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
若要變更預設的小工具組件名稱，您可以將 prefix 新增到 tradingview 區段，以便為每個小工具使用該前綴。
export default defineNuxtConfig({
tradingview: {
prefix: 'TV'
}
})
然後您可以如下使用這些組件
<template>
<TVChart />
<TVCryptoMarket />
<TVTopStories/>
<TVScreener/>
</template>
如果未定義 prefix，您可以按照文件中所示使用這些組件。
importOnly
為了減少套件大小，您可以僅匯入您需要的小工具。將 importOnly 參數新增到 tradingview 區段，以僅注入您需要的小工具。
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 💚