[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 ?

1 answer

  • answered 2021-09-11 18:38 Pierre Said

    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/2.x/features/nuxt-components

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum