Home

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(...)). I referred to the Nuxt documentation regarding of client-side only plugins and I attempted to implement the pattern in my nuxt.config.js file:

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. Would someone be able to point to what I’m doing wrong?