Is it possible to use vue-record with NuxtJS?

[ChristianFenn]

Hello, I'd love to use this in a NuxtJS application I'm building.

Currently when importing the component I'm seeing this in the terminal:

I think this is basically saying Tone.js isn't supported in the browser, which is actually not even a browser, it's first rendering on the server side.

I'm importing it into my component as follows:

  import VueRecord from '@codekraft-studio/vue-record'

  export default {
    mixins: [authenticated],
    components: {
      // other components
      VueRecord,
    },
...

and the component used in the HTML section is like:

<client-only> <!-- client-only doesn't help here -->
    <VueRecordAudio @result="onResult" />
</client-only>

In the browser I get a 500 saying "document is not defined". Any ideas what I might be missing to use this in a NuxtJS application, or is the library not supported outside of vue-only applications?

[hamidm21]

i have the same problem

[hamidm21]

hi @NitroStoutPlz, i think i found the solution to this problem, this happens because the document object is not accessible for the package to work if you're using SSR within your nuxt app.

and to work around this you need to add .client.js at the end of your plugin file, according to this answer in stack overflow.

it worked for me, i hope it solves your problem too.

[ChristianFenn]

@hamidm21 Awesome! Thank you very much for letting me know about this 👍

[hamidm21]

happy i could help. 🙏