vue-tradingview-widgets
Tradingview widgets for Vue3. Demo
Installation
npm i vue-tradingview-widgetsWidgets
- ForexHeatMap
- ForexCrossRates
- CryptoMarket
- Chart
- TechnicalAnalysis
- MarketOverview
- MarketData
- StockMarket
- EconomicCalendar
- Ticker
- TickerTape
- SingleTicker
- MiniChart
- SymbolOverview
- SymbolInfo
- Screener
- FundamentalData
- CompanyProfile
- Snaps
Vue Example
<template>
<Chart />
<CryptoMarket />
<Snaps/>
<Screener/>
</template>
<script lang="ts">
import { Chart,CryptoMarket, Snaps, Screener } from 'vue-tradingview-widgets';
export default defineComponent({
name: 'App',
components: {
Chart,
CryptoMarket,
Screener,
Snaps,
},
});
</script>Options
All components have default options based on Tradingview. Check available options on Tradingview
<template>
<Chart
:options="{
theme: 'dark',
}"
/>
</template>
<script lang="ts">
import { Chart } from 'vue-tradingview-widgets';
export default defineComponent({
name: 'App',
components: {
Chart,
},
});
</script>Nuxt Example
First import in /plugins/widgets.client.ts:
import Chart from 'vue-tradingview-widgets'
import Screener from 'vue-tradingview-widgets'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Chart)
nuxtApp.vueApp.use(Screener)
})Then use in components. Plugin is auto-registered.