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

Question

(I'm using Vuetify and NuxtJS)

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

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 ?

Pierre Said · Accepted Answer · 2022-01-13 17:12:06Z

5

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>

answered Sep 11, 2021 at 18:38

Pierre Said

3,8901 gold badge22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1