Loading D3 with Nuxt/Vue

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?