Nuxt.js中安装trading-vue-js插件遇类型声明错误求解决

Hey there! Let's work through your problems with getting trading-vue-js up and running in your Nuxt.js TypeScript project. I'll break this down into clear, actionable steps to fix both the type declaration error and the component registration issue.

1. Resolve the TypeScript Declaration File Error #

The error you're seeing happens because TypeScript can't find official type definitions for trading-vue-js (the library doesn't have maintained @types packages right now). Here are two ways to fix this:

Option 1: Check for community type definitions first #

Run this command to see if a community-maintained type package exists:

npm install @types/trading-vue-js --save-dev
# Or use yarn:
yarn add @types/trading-vue-js --dev

If this installs successfully, your type error should vanish immediately.

Option 2: Create a custom declaration file #

If the above command fails (which is likely for this library), make a manual type declaration file:

• Create a new file named trading-vue-js.d.ts in your project's root directory (or inside a types folder if you have one).
• Add this single line to the file:

  declare module 'trading-vue-js';
  

• Nuxt's default TypeScript setup should automatically pick up this file, but you can double-check by adding this to your tsconfig.json if needed:

  {
    "include": [
      "types/**/*.d.ts",
      "*.d.ts",
      // ... other existing included paths
    ]
  }
  

2. Properly Register trading-vue-js in Nuxt.js #

Your initial plugin configuration didn't work because you missed component registration logic, and you need to account for Nuxt's SSR environment. Here's the fix:

Step 1: Create a valid plugin file #

Make a file at ~/plugins/trading-vue-js.ts (or .js if you prefer) with this code:

import Vue from 'vue'
import TradingVue from 'trading-vue-js'

// Register the component globally for use across your app
Vue.component('TradingVue', TradingVue)

Step 2: Update Nuxt config for client-side only loading #

Modify your nuxt.config.js (or nuxt.config.ts) to load the plugin only on the client — trading-vue-js relies on browser APIs and will break during server-side rendering:

export default {
  // ... other config options
  plugins: [
    { src: '~/plugins/trading-vue-js.ts', mode: 'client' }
  ]
}

3. Adjust Your Page Component Code #

There are two small fixes needed in your component:

• The trading-vue component expects a specific data structure (not the entire component's $data object).
• You don't need to re-register the component in @Component if you've set up the global plugin.

Here's the revised component code:

<template>
  <!-- Pass the structured chart data to the component -->
  <trading-vue :data="chartData"></trading-vue>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component
export default class extends Vue {
  // Organize data to match trading-vue's expected format
  chartData = {
    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>

Quick Bonus Tip #

If you'd rather not register the component globally, you can import it directly in your component but wrap it in Nuxt's <client-only> tag to avoid SSR issues:

<client-only>
  <trading-vue :data="chartData"></trading-vue>
</client-only>

内容的提问来源于stack exchange，提问作者drunkdolphin