How to attach Vuetify to Laravel project?

Question

Vue.js

Good day! Can you please tell me how to install Vuetify 2.x in Laravel/Vue project? The default laravel-mix is ​​used for building . Previously, apparently, the version of Vuetify 1.5 was used and there were no problems ... although, I'm not sure about the previous version.
For example, I'm trying to connect a library of a similar purpose, 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>

Similarly, I try to connect Vuetify 2.0.5: ( example from their site )

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: ( simplest example, from their website ):

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

We get an error:

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

acc. with the Vuetify documentation I wrap all the code <v-app>in 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>

We get another error:

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

I can't figure out what the problem is and how to solve it. All examples from site, before the whole thing worked and a similar code (connections) works for another library ...

Answer 1

You need to read what has changed in Vuetify since the release of version 2. There are a lot of changes, including in the process of initializing the library https://github.com/vuetifyjs/vuetify/releases/tag/...

Answer 2

Someone confuses something, because. this code needs 60 bytes allocated, probably 64 bytes.
This code takes a byte array
|00|01|02|..|56|57|58|59|
takes 4 bytes from it and performs a transformation over a group of 4 bytes, xoring in this group all bits with r except for a certain one. Then it shifts 8 bytes, takes the next 4 bytes, and so on.