javascript - vuetify this.$vuetify.breakpoint is undefined

Question

im want to build a table with vuetify and vue.

Currently im receiving this error message: TypeError: this.$vuetify.breakpoint is undefined

It appears when i use the v-data-table from vuetify.

error:

[Vue warn]: Error in render: "TypeError: this.$vuetify.breakpoint is undefined"

found in

---> <VData>
      <VDataTable>
        <AngebotsTable> at src/components/AngebotsTable.vue
          <AngebotsWrapper> at src/components/AngebotsWrapper.vue
            <App> at src/App.vue
              <Root>

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>
</template>

<script>
  export default {

  }
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import VueRouter from 'vue-router'

Vue.use(Vuetify)
Vue.use(VueRouter);

export default new Vuetify({  })


const router = new VueRouter({})

new Vue({
  el: '#wp-vue-app',
  router: router,
  Vuetify: Vuetify,
  render: h => h(App)
})

could anyone help me?

Answer 1

You're missing the vuetify option in your instance :

import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import VueRouter from 'vue-router'

Vue.use(Vuetify)
Vue.use(VueRouter);

const vuetify= new Vuetify({  })


const router = new VueRouter({})

new Vue({
  el: '#wp-vue-app',
  router: router,
  vuetify:vuetify,
  render: h => h(App)
})