Как прикрутить Vuetify к Laravel-проекту?

Question

[Евгений Вольф]

Доброго времени суток! Подскажите пожалуйста, как в Laravel/Vue проект вкрутить Vuetify 2.x? Для сборки используется дефолтный laravel-mix. Раньше, судя по всему, использовалась версия Vuetify 1.5 и проблем не возникало... хотя, на счёт предыдущей версии я точно не уверен.

Для примера, пытаюсь подключить библиотеку аналогичного назначения, Element UI:

spoiler

app.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Vue.component('app', require('./components/App.vue').default);

const app = new Vue({
    el: '#app',
});

App.vue: (рандомный пример с их сайта)

<template>
    <div>
        <el-button @click="visible = true">Click to open me</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>You Should Try Element (This is in /resources/js/App.vue)</p>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: 'app',
        data () {
            return {
                visible: false,
            }
        },
    };
</script>

Аналогичным образом пробую подключить Vuetify 2.0.5: (пример с их сайта)

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

Vue.component('app', require('./components/App.vue').default);

const app = new Vue({
    el: '#app',
});

App.vue: (простейший пример, с их сайта):

<template>
    <v-tabs>
        <v-tab>Item One</v-tab>
        <v-tab>Item Two</v-tab>
        <v-tab>Item Three</v-tab>
    </v-tabs>
</template>
<script>
    export default {
        name: 'app',
    };
</script>

Получаем ошибку:

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

В соотв. с документацией Vuetify оборачиваю весь код в <v-app>, App.vue:

<template>
    <div>
        <v-app>
            <v-content>
                <v-tabs>
                    <v-tab>Item One</v-tab>
                    <v-tab>Item Two</v-tab>
                    <v-tab>Item Three</v-tab>
                </v-tabs>
            </v-content>
        </v-app>
    </div>
</template>
<script>
    export default {
        name: 'app',
    };
</script>

Получаем другую ошибку:

[Vue warn]: Error in beforeCreate hook: "Error: Vuetify is not properly initialized

Не могу понять, в чём проблема и как её решить. Все примеры с оф. сайта, раньше всё это дело работало и аналогичный код (подключения) работает для другой библиотеки...

Answer 1

[Кирилл Романов]

Вам нужно почитать, что изменилось во Vuetify после релиза 2 версии. Там очень много изменений, в том числе и в процессе инициализации библиотеки https://github.com/vuetifyjs/vuetify/releases/tag/...

Comments

[Евгений Вольф]

Спасибо Вам большое! Я убил целый день, в поисках причин ошибки, перечитывании различного "информационного мусора", попытках отладить JS-код и прочими подобными занятиями, а нужно было всего навсего найти/прочесть релиз-лист... и все проблемы решились за 15 минут. Ещё раз благодарю!