title: How to load a resource on the client side only in Nuxt.js
body: <p>I'm trying to build an app using Tone.js on top of Nuxt.js. Tone.js requires the browser's Web Audio API and as Nuxt renders stuff on the server side my build keeps failing. </p>
  
  <p>Nuxt addresses this in the <a href="https://nuxtjs.org/guide/plugins/#client-side-only" rel="nofollow noreferrer">plugin documentation</a> and I've followed that approach in my <code>nuxt.config.js</code> file writing: </p>
  
  <pre><code>module.exports = {
    plugins: [{src: '~node_modules/tone/build/Tone.js', ssr: false }],
  }
  </code></pre>
  
  <p>however that results in this error: <code>[nuxt] Error while initializing app TypeError: Cannot read property 'isUndef' of undefined</code>. Looking at Tone's source I'm pretty sure this is because I'm getting it because the code is still being executed on the server side. </p>
  
  <p>I've seen solutions putting the js file into the <code>static</code> folder and checking <code>process.browser</code> but both result in <code>Tone</code> being undefined. </p>
  
  <p>My question seems to be the <a href="https://stackoverflow.com/questions/44121264/loading-d3-with-nuxt-vue">same as this one</a> if it's helpful additional context</p>