nuxt-tradingview-social-card

Nuxt TradingView

在你的 Nuxt 应用中使用 TradingView 小部件

兼容性: Nuxt >= 3
🏀 在线 Playground

特性

🧺 单页多小部件
🍧 无需注册或 TradingView API
🌴 可选的小部件引入（用于减小 bundle 体积）
🍽️ 可通过前缀选项自定义组件名称

✨ 发行说明

文档

我们准备了详细的文档和 playground，你可以在这里找到，但你也可以参考下面的示例。

此外，你可以查看 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>

多个小部件

如果你想在单个页面上多次使用相同的小部件，你应该为每个小部件定义一个唯一的 class。

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

例如，在一个 for 循环中，你可以使用 key 作为唯一的 class

<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

为了减小 bundle 体积，你可以仅导入你需要的小部件。将 importOnly 参数添加到 tradingview 部分，以仅注入你需要的小部件。

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

!NOTE 确保使用小部件的确切名称。即使你定义了 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 💚