https://github.com/ehsan-shv/vue-tradingviewwidgets

Tradingview widgets for Vue 3 and Nuxt 3.
https://github.com/ehsan-shv/vue-tradingviewwidgets

chart nuxt3 trading-view vue vue-components vue3 vuejs widget

Last synced: 3 days ago
JSON representation

Tradingview widgets for Vue 3 and Nuxt 3.

• Host: GitHub
• URL: https://github.com/ehsan-shv/vue-tradingviewwidgets
• Owner: ehsan-shv
• License: mit
• Created: 2022-02-19T21:26:15.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-05-30T13:11:09.000Z (4 months ago)
• Last Synced: 2024-09-26T03:19:58.909Z (8 days ago)
• Topics: chart, nuxt3, trading-view, vue, vue-components, vue3, vuejs, widget
• Language: Vue
• Homepage:
• Size: 516 KB
• Stars: 92
• Watchers: 2
• Forks: 19
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-tradingview-widgets



> [Tradingview](https://www.tradingview.com/widget/) widgets for Vue3. [Demo](https://codesandbox.io/s/vue-tradingview-widgets-demo-tyypvy/)

## Installation

```bash

npm i vue-tradingview-widgets

```

or

```bash

yarn add vue-tradingview-widgets

```

## Widgets

-   ForexHeatMap

-   ForexCrossRates

-   CryptoMarket

-   Chart

-   TechnicalAnalysis

-   MarketOverview

-   MarketData

-   StockMarket

-   EconomicCalendar

-   Ticker

-   TickerTape

-   SingleTicker

-   MiniChart

-   SymbolOverview

-   SymbolInfo

-   Screener

-   FundamentalData

-   CompanyProfile

-   Snaps

## Vue Example

```js

  

  

  

  

import { Chart,CryptoMarket, Snaps, Screener } from 'vue-tradingview-widgets';

export default defineComponent({

  name: 'App',

  components: {

    Chart,

    CryptoMarket,

    Screener,

    Snaps,

  },

});

```

## Options

All components have default options based on Tradingview. Check available options on [Tradingview](https://www.tradingview.com/widget/)

```js

  

import { Chart } from 'vue-tradingview-widgets';

export default defineComponent({

  name: 'App',

  components: {

    Chart,

  },

});

```

## Nuxt Example

First import in _/plugins/widgets.client.ts_:

```js

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**.