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>
模块选项
默认情况下，该模块将注入所有小部件，但您可以配置它仅注入您需要的小部件。此外，您可以在小部件组件名称中添加前缀，以避免与其他本地组件冲突。
前缀
要更改默认的小部件组件名称，您可以在 tradingview 部分添加一个 prefix，以便使用该前缀来使用每个小部件。
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 💚