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 循环中，您可以使用键作为唯一的类

<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添加到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 💚