CODEWITHSUNDEEP
laravelvue.jsvuetify.js
gman
gman

Reputation: 89

How to use Vuetify (VAutocomplete) with Laravel

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!

Upvotes: 1

Views: 1883

Answers (2)

zidanex
zidanex

Reputation: 524

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.

Upvotes: 1

Vrian7
Vrian7

Reputation: 598

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

Upvotes: 0

Related Questions