vue.js Error in render: "TypeError: Cannot read property 'width' of undefined" vuetify

Question

I'm trying to use vuetify (first time user) and I'd like to add a datatable using vuetify. But, when I add an example from the documentation, I get these two errors twice:

[Vue warn]: Error in render: "TypeError: Cannot read property 'width' of undefined"

found in

---> <VData>
       <VDataTable>
         <VCard>
           <VueDataTable> at Content/js/vue/components/datatable/VueDataTable.vue
             <IvrList> at Content/js/vue/components/ivr/IVRList.vue
               <Root>

--

TypeError: Cannot read property 'width' of undefined
    at VueComponent.isMobile (vuetify.js:9076)
    at Watcher.get (vue.runtime.esm.js:4473)
    at Watcher.evaluate (vue.runtime.esm.js:4578)
    at VueComponent.computedGetter [as isMobile] (vue.runtime.esm.js:4830)
    at VueComponent.genHeaders (vuetify.js:9193)
    at VueComponent.genDefaultScopedSlot (vuetify.js:9498)
    at Object.normalized [as default] (vue.runtime.esm.js:2590)
    at Proxy.render (vuetify.js:8007)
    at VueComponent.Vue._render (vue.runtime.esm.js:3542)
    at VueComponent.updateComponent (vue.runtime.esm.js:4060)

the code is pretty simple ( I think)

<template>
  <v-card>
    <v-card-title>
      Nutrition
      <div class="flex-grow-1"></div>
      <v-text-field v-model="search" append-icon="search" label="Search" single-line hide-details></v-text-field>
    </v-card-title>
    <v-data-table :headers="headers" :items="desserts" :search="search"></v-data-table>
  </v-card>
</template>

<script>
import "vuetify";
export default {
  components: {},
  data() {
    return {
      search: "",
      headers: [
        {
          text: "Dessert (100g serving)",
          align: "left",
          sortable: false,
          value: "name"
        },
        { text: "Calories", value: "calories" },
        { text: "Fat (g)", value: "fat" },
        { text: "Carbs (g)", value: "carbs" },
        { text: "Protein (g)", value: "protein" },
        { text: "Iron (%)", value: "iron" }
      ],
      desserts: [
        {
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: "1%"
        },
        {
          name: "Ice cream sandwich",
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: "1%"
        },
        {
          name: "Eclair",
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: "7%"
        },
        {
          name: "Cupcake",
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: "8%"
        },
        {
          name: "Gingerbread",
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: "16%"
        },
        {
          name: "Jelly bean",
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: "0%"
        },
        {
          name: "Lollipop",
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: "2%"
        },
        {
          name: "Honeycomb",
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: "45%"
        },
        {
          name: "Donut",
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: "22%"
        },
        {
          name: "KitKat",
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: "6%"
        }
      ]
    };
  },
  computed: {},
  created() {
    // eslint-disable-next-line no-console
    console.log("VueTable created");
  },
  mounted() {},
  methods: {}
};
</script>

<style scoped>
.flex-grow-1 {
  flex-grow: 1;
}
</style>

I pretty much copied it from vuetify line by line. Why am I get the errors above? It seems pretty odd (and generic).Any ideas?

Looks like it's a known bug without any fixes so far :(

https://github.com/vuetifyjs/vuetify/issues/7410

Answer 1

I solved this by adding vuetify: new Vuetify() to:

const app = new Vue({
    vuetify: new Vuetify(),
    el: '#app',
    router: Routes,
    render: h => h(App),
});

Read more here: https://vuetifyjs.com/getting-started/releases-and-migrations

Answer 2

Can you try with "vue add vuetify" command instead of installing the package, i had similar issue resolved by doing this.