Loading D3 with Nuxt/Vue

Question

I am trying to implement D3 in an app I am building with Nuxt. I have successfully imported it into a view in the <script> section with import * as d3 from 'd3' however because the app is being rendered server-side D3's functionality doesn't work (i.e. d3.select(...)) due to the lack of browser. In the Nuxt plugin documentation it suggests a pattern for client-only external plugins:

module.exports = {
  plugins: [
    { src: '~plugins/vue-notifications', ssr: false }
  ]
}

I attempted to implement the pattern in the nuxt.config.js of my project:

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

  loading: {...},

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

However D3 throws a ReferenceError while looking for document and Nuxt throws a SyntaxError in the console pointing to something in the plugins field of nuxt.config.js.

For reference, demo.vue:

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

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

Would someone be able to point to what I'm doing wrong?

You should accept an answer if it solved your problem. Otherwise, the question remains in the queue as unresolved. — ba_ul

ba_ul ba_ul · Accepted Answer · 2017-08-28T07:33:02

For anyone coming to this page looking for a solution, these suggestions from piyushchauhan2011 here on GitHub sent me in the right direction.

All I needed to do:

import d3 in my single-file component, and then
do any DOM manipulation with d3 only within mounted()

Before all this, I had to of course add d3 to my project with yarn add d3 (or npm install d3).

[Edit: removed link that no longer works. It wasn't that relevant anyway.]

Loading D3 with Nuxt/Vue

1 Answers