[Vue warn]: Error in render: "ReferenceError: File is not defined" [Vuetify + NuxtJS]

(I'm using Vuetify and NuxtJS)

I get this error when I'm trying to implement the component : v-file-input

screenshot of error

file.vue :

<template>
    <v-file-input
        counter
        multiple
        show-size
        truncate-length="15"
    ></v-file-input>
</template>

I just have this problem in this file, not in other one.

When I copy paste some other code from my project in this file, it works, if I don't modify it.

Any idea why it happens ?

Solution 1:

It is because v-file-input uses browser only APIs.

you can tell nuxt to render this only client side with client-only

<client-only>
  <v-file-input
    counter
    multiple
    show-size
    truncate-length="15"
  ></v-file-input>
</client-only>

https://nuxtjs.org/docs/features/nuxt-components/#the-client-only-component