Nuxt TradingView
NuxtアプリケーションでTradingViewウィジェットを使用する
- 互換性:
Nuxt >= 3 - 🏀 オンラインプレイグラウンド
機能
- 🧺 1ページに複数のウィジェット
- 🍧 TradingViewの登録やAPIは不要
- 🌴 ウィジェットの選択的インクルード (バンドルサイズ削減のため)
- 🍽️ プレフィックスオプションによるコンポーネント名のカスタマイズ
ドキュメント
詳細なドキュメントとプレイグラウンドをご用意しました。こちらからアクセスできます。以下の例も参考にしてください。
さらに、ウィジェットの詳細な情報と設定については、TradingViewドキュメントをご覧ください。
クイックセットアップ
nuxt-tradingview依存関係をプロジェクトに追加します
# Using yarn
yarn add nuxt-tradingview
# Using npm
npm install nuxt-tradingview
# Using pnpm
pnpm add nuxt-tradingview
nuxt.config.tsのmodulesセクションにnuxt-tradingviewを追加します
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>
複数のウィジェット
同じウィジェットを1つのページで複数回使用する場合、各ウィジェットに一意のクラスを定義する必要があります。
<template>
<Chart class="apple-chart"/>
<Chart class="nvidia-chart"/>
</template>
たとえば、forループでは、キーを一意のクラスとして使用できます
<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>
モジュールオプション
デフォルトでは、モジュールは**すべてのウィジェット**をインジェクトしますが、必要なウィジェットのみをインジェクトするように設定できます。さらに、他のローカルコンポーネントとの競合を避けるために、ウィジェットコンポーネント名にプレフィックスを追加できます。
プレフィックス
デフォルトのウィジェットコンポーネント名を変更するには、`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 に感謝します 💚