How to use Vuetify (VAutocomplete) with 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!

zidanex · Accepted Answer · 2019-07-30 15:40:56Z

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.

answered Jul 30, 2019 at 15:40

zidanex

5243 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gman Over a year ago

That actually worked! Don't know exactly, what was the problem before, but now its working!

Vrian7 · Accepted Answer · 2019-07-30 13:05:54Z

0

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'],
        }
    },
})

answered Jul 30, 2019 at 13:05

Vrian7

6082 gold badges7 silver badges19 bronze badges

3 Comments

gman Over a year ago

The missing ' is just a copy&paste error, but I've now added 'vuetify: new Vuetify()' and added the id. Now I get: ``` [Vue warn]: Error in beforeCreate hook: "TypeError: Vue.observable is not a function. (In 'Vue.observable(options.vuetify.framework)', 'Vue.observable' is undefined)" ```

Vrian7 Over a year ago

Check this working. codepen.io/anon/pen/ymMdgW?&editable=true&editors=101

gman Over a year ago

As soon as I add 'vuetify: new Vuetify(),' I get the error 'Vue.observable is not a function'. I guess something could be wrong with my vue installation?

Collectives™ on Stack Overflow

How to use Vuetify (VAutocomplete) with Laravel

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related