$vuetify.breakpoint 为空

Question

在我生成并安装 Vuetify 的任何 VueJS 项目上，我无法使用 this.$vuetify.breakpoint.ANYTHING，因为 this.$vuetify.breakpoint 是空的。

我尝试使用从 1.0.10 到 1.0.17 的任何 Vuetify 版本。我不明白为什么。我的 main.ts 文件如下所示：

import './hooks' // This must be imported before any component
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.min.css'
import 'roboto-fontface/css/roboto/roboto-fontface.css'
import './styles/global.css'

import App from './App.vue'
import router from './router'

Vue.use(Vuetify, {
  theme: {
    primary: '#0031FF',
    secondary: '#424242'
  }
})

// tslint:disable-next-line:no-unused-expression
new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app')

我是不是做错了什么？

Answer 1

来自docs：

In order for your application to work properly, you must wrap it in a v-app component. This component is used for dynamically managing your content area and is the mounting point for many components.

$vuetify.breakpoint 为空

$vuetify.breakpoint is empty

breakpoints

vue.js

vuejs2

vuetify.js