Guide to setting up trading-vue-js plugins within a nuxt.js environment

I've been working on a website using nuxt.js and the trading-vue-js plugins, similar to Tradingview.com.

After installing the trading-vue-js plugins in my project and attempting to write the code, I encountered an error in the 'trading-vue-js' import section. The error message is as follows:

[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';

Due to my limited English proficiency, I attempted to insert the following code

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

into nuxt.config.js. However, the issue persisted. Can anyone offer some guidance? Here is the code I am using:

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

Answer №1

It is essential to adhere to the Nuxt Plugin flow when incorporating vue plugins in nuxt

Begin by running

npm install @types/trading-vue-js

Next, establish a file named plugins/tradingVue.js

Within tradingVue.js

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

Vue.use(TradingVue)

Lastly, in nuxt.config.js

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

For further information, you can refer to Nuxt Plugins

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

TypeORM's one-to-many relationship alters the primary entity once the relationship has been established

When working on my side project, I decided to implement a friend request system using NestJS + TypeORM for the backend. However, I encountered a peculiar issue where every time I tried to associate a Friend entity with a specific user, the target field of ...

Having trouble loading AngularJS 2 router

I'm encountering an issue with my Angular 2 project. Directory : - project - dev - api - res - config - script - js - components - blog.components.js ...

Issue: NG04002 encountered post migration from Angular to Angular Universal

Having recently created a new Angular app and converted it to Angular Universal, I encountered an issue when running the project using npm run dev:ssr. The error displayed in the terminal is as follows: ERROR Error: Uncaught (in promise): Error: NG04002 Er ...

Convert an array into a JSON object for an API by serializing it

Currently, I am working with Angular 12 within my TS file and have encountered an array response from a file upload that looks like this- [ { "id": "7", "name": "xyz", "job": "doctor" ...

Unable to pass props to component data using Vue framework

I'm facing an issue with passing props in my component to the same component's data object. For some reason, I'm only receiving null values. Does anyone have any suggestions on how I should approach this problem? It seems like my Vue compone ...

Creating void functions in TypeScript

I encountered a section of code within a custom component that is proving to be quite puzzling for me to comprehend. public onTouch: () => void = () => {} The function onTouch is being assigned by the private method registerOnTouch(fn: any) { ...

Is there a way for me to steer clear of using optional chaining in Typescript?

I'm currently working on storing object data known as Targetfarms in redux. I've defined a type named Farmstype for the Targetfarms. However, when I retrieve the Targetfarms using useSelector in the MainPage component and try to access targetfar ...

Error in Angular 2 after transition to @types: encountering "require" name not found issue

After transitioning my project from old typings to types-publisher, I have successfully resolved most of my dependencies. However, I am consistently encountering an error that reads Cannot find name 'require'. Below is a snippet from my tsconfig. ...

In Laravel blade, Vue components are not being loaded properly

I attempted to incorporate Vue.js into my Laravel project, but I encountered an issue. Despite following all the steps correctly, the Vue Components are not displaying in my php blade file. Below is the code for app.js: /** * First we will load all of th ...

Creating personalized functions in Object.prototype using TypeScript

My current situation involves the following code snippet: Object.prototype.custom = function() { return this } Everything runs smoothly in JavaScript, however when I transfer it to TypeScript, an error surfaces: Property 'custom' does not ex ...

Vue is having trouble accessing properties of an undefined value, specifically the '0' property

Struggling with dynamically rendering weather data from an API. The API request successfully returns data that can be viewed in the log and on the page. However, encountering issues when trying to display specific items within response arrays. The web cons ...

Angular rxjs: Wait for another Observable to emit before subscribing

My setup involves having 2 subscriptions - one is related to my ActivatedRoute, and the other is from ngrx Store. ngOnInit() { this.menuItems$ = this.store.select('menuItems'); this.menuItems$.subscribe(data => { this.menuItem ...

The show-word-limit feature is malfunctioning on the element.eleme.io platform

After attempting to utilize the show-word-limit attribute of the input element, unfortunately the character count did not display. Below is the code snippet that was used: <el-input type="textarea" placeholder="Please input" ...

Navigable Vuetify Tabs with routing capabilities

Within my Vue application, I have a page that contains various tabs. My goal is to display different tabs based on the routes being accessed. To achieve this functionality, I followed an answer provided in this link. Overall, it's working well! I ca ...

Unable to swap out string with text box in TypeScript

I am trying to swap __ with a text box in Angular 2/4. Take a look at the example provided in the link below. https://stackblitz.com/edit/angular-ajkvyq?file=app%2Fapp.component.ts ...

Vue 3's Paged.js does not respond to requests for page breaks

Currently, I'm working on implementing page breaks in Vue.js 3. Despite my efforts and utilization of the specified CSS code, I am facing challenges with the ".page-break" class parameter. While I can successfully modify other elements like titlePage ...

Troubleshooting Bootstrap 4 Modal in JavaScript and Vue: Uncaught ReferenceError: $ is not defined

I'm struggling to figure out how to trigger a Bootstrap 4 modal from my Vue 3 app using JavaScript. Whenever I try to launch the modal, I keep encountering this error message: $ is not defined at eval When looking for solutions, I noticed that most a ...

"Creating a visual representation of models exchanged between the client and server through Rest

Currently, I am working on a project that involves client-server communication via rest API, with Angular 2 calling restful web services as the primary method. The client side is written in Typescript, which is a subset of JavaScript. My main challenge li ...

The specified module 'node:stream' lacks an export called 'getDefaultHighWaterMark'

I've encountered an issue while working on my Nuxt 3 project. After reinstalling Node using npm i, I'm getting the error message The requested module 'node:stream' does not provide an export named 'getDefaultHighWaterMark'. T ...

Exploring the world of Typescript class decorators and accessing its content from within

Greetings, I am searching for a method to define a class in TypeScript and retrieve its value from within the parent. abstract class Base{ fetchCollectionName(): string{ // code here to return child class attribute value } } @Collectio ...