How to use Vuetify (VAutocomplete) with Laravel - laravel

Question

I'm trying to use VAutocomplete within a vue component in my laravel project.
I installed vuetify like this:
npm install vuetify
The .js with which I load the component looks like this:
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
import 'vuetify/dist/vuetify.min.css';
import MyComponent from './components/MyComponent.vue';
const app = new Vue({
el: '#my-component,
components: {
MyComponent
},
render: h => h(MyComponent)
});
MyComponent.vue:
<template>
<div>
<v-autocomplete
label="Components"
:items="components"
></v-autocomplete>
</div>
</template>
<script>
export default {
name: "MyComponent",
data: function () {
return {
components: [
'Autocompletes', 'Comboboxes', 'Forms', 'Inputs', 'Overflow Buttons', 'Selects', 'Selection Controls', 'Sliders', 'Textareas', 'Text Fields',
],
}
},
}
</script>
I see the following error in the browsers console:
[Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating 'this.$vuetify.lang.t')"
found in
---> <VAutocomplete>
Laravel is 5.6
Vue 2.9.6
Vuetify 2.0.2
Can someone please give me a hint to get started with vuetify? Thanks!

Answer 1

I had the same problem. Here is how you could solve it:
Make sure to add the correct vue and vue-template-compiler versions to your package.json.
Then remove your 'node_modules' folder and reinstall it:
npm install
You also should import the VueLoaderPlugin in you webpack.mix.js.
const VueLoaderPlugin = require('vue-loader/lib/plugin')
Your mix call should look something like this:
mix.js('resources/assets/js/app.js', 'public/js').extract(['vue'])
.js('resources/assets/js/mycomponent.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css').webpackConfig({
plugins: [
new VueLoaderPlugin()
]
}).sourceMaps();
.sourceMap() to avoid missing vuetify.js.map error.

Answer 2

Error is because you missed a "
const app = new Vue({
el: '#my-component', <=here
components: {
MyComponent
},
render: h => h(MyComponent)
});
The other error is that you don't have ID in your template.
It should work in this way:
<div id="my-component">
<v-app id="inspire">
<div>
<v-autocomplete
label="Components"
:items="components"
></v-autocomplete>
</div>
</v-app>
</div>
Script:
new Vue({
el: '#my-component',
vuetify: new Vuetify(),
data () {
return {
components: [
'Autocompletes', 'Comboboxes', 'Forms', 'Inputs', 'Overflow Buttons', 'Selects', 'Selection Controls', 'Sliders', 'Textareas', 'Text Fields'],
}
},
})