Menu
Getting this error when attempting to use a Vuetify component out of the box. Perhaps just my lack of understanding how to implement Vuetify components in Laravel.
Laravel v5.8.35, Vue v2.6.10, Vuetify v2.0.18.
error:
[Vue warn]: Error in render: "TypeError: Cannot read property 't' of undefined"
found in
---> < VSelect > < Test > at resources/js/components/Test.vue < Root >
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
import Vuetify from 'vuetify';
Vue.use(Vuetify);
Vue.component('test', require('./components/Test.vue').default);
const app = new Vue({
el: '#app',
});
layouts/vue.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Vue Examples</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div id="app">
@yield("content")
</div>
<script src="{{ asset('/js/app.js') }}"></script>
</body>
</html>
test.blade.php
@extends('layouts.vue')
@section('content')
<test></test>
@endsection
components/Test.vue
<template>
<v-container fluid>
<v-row align="center">
<v-col class="d-flex" cols="12" sm="6">
<v-select
:items="items"
label="Standard"
></v-select>
</v-col>
<v-col class="d-flex" cols="12" sm="6">
<v-select
:items="items"
filled
label="Filled style"
></v-select>
</v-col>
<v-col class="d-flex" cols="12" sm="6">
<v-select
:items="items"
label="Outlined style"
outlined
></v-select>
</v-col>
<v-col class="d-flex" cols="12" sm="6">
<v-select
:items="items"
label="Solo field"
solo
></v-select>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data: () => ({
items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
}),
}
</script>
As you can see, the vue file is exactly the source from Vuetify for the v-select component. Components that don't include this works:
export default {
data: () => ({
All other components (e.g. ExampleComponent) work fine.
756
You need to create an instance of Vuetify. e.g.:
new Vue({
el: '#app',
vuetify: new Vuetify()
})
This is documented here, though they do hide it quite a long way down the page.
135
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
