Nuxt/VueでD3をロード

Question

私はNuxtを使ってビルドしているアプリケーションでD3を実装しようとしています。 <script>セクションのビューにimport * as d3 from 'd3'という名前のビューにインポートできましたが、ブラウザが不足しているため、アプリケーションがサーバー側のD3の機能が動作しないため（つまりd3.select(...)）レンダリングされています。 documentを探している間しかしD3はReferenceErrorをスロー

module.exports = { 
    head: { 
    title: 'My Demo App', 
    meta: [...], 
    link: [...] 
    }, 

    loading: {...}, 

    plugins: [ 
    { src: '~node_modules/d3/build/d3.js', ssr: false} 
    ] 
} 

：私は私のプロジェクトのnuxt.config.jsでパターンを実装しようとし

​​

：Nuxt plugin documentationでは、クライアントのみの外部プラグインのパターンを提案していますNuxtはSyntaxErrorをコンソールに入力してプラグインフィールドnuxt.config.jsの何かを指し示します。参考のため

、demo.vue：

<template> 
    <div class="demo-container"></div> 
</template> 

<script> 
    import * as d3 from 'd3'; 
    d3.select('.demo-container'); 
</script> 

誰かが私が間違ってやっているにポイントすることができますか？

Answer 1

は、誰もが解決策を探して、このページに来て、piyushchauhan2011 here on GitHubから これらの提案は正しい方向に私を送っ -

を私が行うために必要なすべてが私の単一ファイルコンポーネントで輸入D3だったし、その後いずれかを実行します。もちろんyarn add d3（またはnpm install d3 --save）と私のプロジェクトにD3を追加するには、すべてこの前here

のようなだけmounted()内のD3とDOM操作は、私が持っていました。