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?