Home » vue » How to install trading-vue-js plugins in nuxt.js?

How to install trading-vue-js plugins in nuxt.js?

Posted by: admin November 26, 2021 Leave a comment

Questions:

I try to make web site using nuxt.js and trading-vue-js plugins like Tradingview.com.

So I installed trading-vue-js plugins in my project and tried
to make code. but it didn’t work and error occurred in ‘trading-vue-js’ import part. error messages is below.

[error message] Could not find a declaration file for module ‘trading-vue-js’. ‘c:/Users/naoyuki/nuxt-website-project/website-project/node_modules/trading-vue-js/dist/trading-vue.js’ implicitly has an ‘any’ type.
Try npm install @types/trading-vue-js if it exists or add a new declaration (.d.ts) file containing `declare module ‘trading-vue-js’;

I’m not good at English. So I tried to put that code

plugins :[{sorce:’~/plugins/trading-vue-js’}]

to nuxt.config.js.
but it didn’t work.
Does anyone advise me?
My code is below.

    <template>
    <trading-vue :data="this.$data"></trading-vue>    
</template>
<script lang="ts">
import {Component,Vue} from 'nuxt-property-decorator'
import TradingVue from 'trading-vue-js'

@Component({components:{TradingVue}})
export default class extends Vue{
    data() {
        return {
            ohlcv: [
                [ 1551128400000, 33,  37.1, 14,  14,  196 ],
                [ 1551132000000, 13.7, 30, 6.6,  30,  206 ],
                [ 1551135600000, 29.9, 33, 21.3, 21.8, 74 ],
                [ 1551139200000, 21.7, 25.9, 18, 24,  140 ],
                [ 1551142800000, 24.1, 24.1, 24, 24.1, 29 ],
            ]
        }
    }
}
</script>
Answers:

you need to follow Nuxt Plugin flow for implementing vue plugins in nuxt

First npm install @types/trading-vue-js

Then create a file plugins/tradingVue.js

In tradingVue.js

import Vue from 'vue'
import TradingVue from '@types/trading-vue-js'

Vue.use(TradingVue)

finally in nuxt.config.js

plugins: ['@/plugins/tradingVue.js']

you can read details in Nuxt Plugins