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.
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.
Related
I want to display new line, I use tag but not work.
The original idea was to new a component, and then customize error-messages to div, But it’s too much trouble, so come to ask if there is an easy way
Vue.use(Vuetify);
var vm = new Vue({
el: "#app",
methods: {
},
data: {
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.3/vue.js"></script>
<script src="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.js"></script>
<link rel=stylesheet type="text/css" href="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.css">
<div id="app">
<v-app dark>
<v-text-field
label="Field"
error-messages="aaa<br>bbb"
></v-text-field>
</v-app>
</div>
This is a possible solution.
https://jsfiddle.net/ue9rqcwk/
HTML:
<div id="app">
<v-app dark>
<v-text-field
class="multiline"
label="Field"
error-messages="aaa
bbb"
></v-text-field>
</v-app>
</div>
css:
.multiline {
white-space: pre-line;
}
EDIT: Corrected URL
I am new to Vuetify and vue. I am using vue and vuetify but due some reason I am not able open my page.The error I am getting when I run my project:
[Vue warn]: Unknown custom element: - did you register the
component correctly? For recursive components, make sure to provide
the "name" option.
found in
---> at resources/js/components/appContainer.vue
My code:
appContainer.vue
<template>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
app
>
<v-list dense>
<v-list-item link>
<v-list-item-action>
<v-icon>mdi-home</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Home</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item link>
<v-list-item-action>
<v-icon>mdi-contact-mail</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Contact</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar
app
color="indigo"
dark
>
<v-app-bar-nav-icon #click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Application</v-toolbar-title>
</v-app-bar>
<v-content>
<v-container
class="fill-height"
fluid
>
<v-row
align="center"
justify="center"
>
<v-col class="text-center">
<v-tooltip left>
<template v-slot:activator="{ on }">
<v-btn
:href="source"
icon
large
target="_blank"
v-on="on"
>
<v-icon large>mdi-code-tags</v-icon>
</v-btn>
</template>
<span>Source</span>
</v-tooltip>
</v-col>
</v-row>
</v-container>
</v-content>
<v-footer
color="indigo"
app
>
<span class="white--text">© 2019</span>
</v-footer>
</v-app>
</template>
<script>
export default {
props: {
source: String,
},
data: () => ({
drawer: null,
}),
}
</script>
app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import Vuetify from './plugins/vuetify'
Vue.use(Vuetify);
Vue.component('app-container', require('./components/appContainer.vue').default);
const app = new Vue({
Vuetify,
Vue,
el: '#app',
});
spa.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<app-container></app-container>
</div>
</body>
</html>
vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
Seems like you haven't given an export name for your app-container element. Try the below.
appContainer.vue
<template>
...
</template>
<script>
export default {
name: 'app-container'
props: {
source: String,
},
data: () => ({
drawer: null,
}),
}
</script>
Try to change the drawer from null to false:
data: () => ({
drawer: false,
}),
Please make your component name camelcase.
Like Vue.component('appContainer',require('./components/apContainer.vue').default);
I'm having trouble with updating the color of my vuetify theme. I tried this method but it is not updating my button color.
App.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify, {
theme: {
primary: '#ff0000',
secondary: '#ff0000',
accent: '#ff0000',
error: '#ff0000'
}
});
// components here
const app = new Vue({
el: '#app',
vuetify: new Vuetify()
});
Component.vue
<template v-slot:activator="{ on }">
<v-btn color="primary" dark class="mb-2" v-on="on">Add Department</v-btn>
</template>
Main.blade.php
<div id="content-wrapper" class="d-flex flex-column">
<div id="content" class="bg-white" style="background-color:white!important;">
#include('layouts.topbar')
<div class="container-fluid">
<v-app id="app">
#yield('content') //This is where my components are located
</v-app>
</div>
</div>
#yield('DashboardView-main-footer')
</div>
You should use v-app vuetify tag like
Component.vue
<template v-slot:activator="{ on }">
<v-app>
<v-btn color="primary" dark class="mb-2" v-on="on">Add Department</v-btn>
</v-app>
</template>
That's because you have to change the light theme, which I assume you're using since you haven't put dark to true.
Vue.use(Vuetify, {
theme: {
themes: {
light: {
primary: '#ff0000',
secondary: '#ff0000',
accent: '#ff0000',
error: '#ff0000'
}
}
}
});
So I have tried to fix this in multiple different ways and I know Vuetify is updated because I have reinstalled it in NPM before I used it.
I have some screenshots of the current problem but the weird part is its working in another project I am using and its running the same libraries.
https://i.imgur.com/UXK9DiB.png
https://i.imgur.com/ZoRl7e8.png
Code for uncolored component
<html>
<head>
<title>XRPLife Interfaces</title>
<link rel="stylesheet" href="libraries/vuetify/dist/vuetify.min.css">
</head>
<body>
<v-app>
<div id="test">
<v-text-field label="Testing" v-model="test"></v-text-field>
</div>
</v-app>
<script src="libraries/vue/dist/vue.min.js"></script>
<script src="libraries/vuetify/dist/vuetify.min.js"></script>
<script>
var app = new Vue({
el: "#test",
data: {
test: "",
},
methods: {
}
})
</script>
</body>
How it works with the SAME library but just a different project
https://i.imgur.com/86TNKfO.png
You have an incorrect nesting of HTML tags for the application. Try this:
<div id="test">
<v-app>
<v-content>
<v-container>
<v-text-field label="Testing" v-model="test"></v-text-field>
</v-container>
</v-content>
</v-app>
</div>
[ https://jsfiddle.net/ga8kpzp0/ ]
I'm new with vuetify and i trying to implement it in laravel.
Does someone have already implement vuetify in laravel and could tell me how?
i have already install with
npm install vuetify
and try this in App.scss
#import '~vuetify/dist/vuetify.min.css';
This is my app.js file
import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
Vue.use(VueRouter)
// parents componenets
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('example', require('./components/example.vue'));
import App from './views/App'
import Hello from './views/Hello'
import Home from './views/Home'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/hello',
name: 'hello',
component: Hello,
},
],
});
but when i try to use some vuetify components it doesn't work.
This is my component.
<template>
<v-app id="inspire" dark>
<v-navigation-drawer
clipped
fixed
v-model="drawer"
app
>
<v-list dense>
<v-list-tile #click="">
<v-list-tile-action>
<v-icon>dashboard</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Dashboard</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile #click="">
<v-list-tile-action>
<v-icon>settings</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Settings</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar app fixed clipped-left>
<v-toolbar-side-icon #click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title>Application</v-toolbar-title>
</v-toolbar>
<v-content>
<v-container fluid fill-height>
<v-layout justify-center align-center>
<v-tooltip right>
<v-btn icon large :href="source" target="_blank" slot="activator">
<v-icon large>code</v-icon>
</v-btn>
<span>Source</span>
</v-tooltip>
</v-layout>
</v-container>
</v-content>
<v-footer app fixed>
<span>© 2017</span>
</v-footer>
</v-app>
</template>
<script>
export default {
data: () => ({
drawer: null
}),
props: {
source: String
}
}
</script>
and try this in App.scss
#import '~vuetify/dist/vuetify.min.css';
but when i try to use some vuetify components it doesn't work.
I will give you all steps to implement vuetify in laravel
-1 run npm command to install vuetify in your laravel project
npm install vuetify
-2 go to app.js file and add this code
import Vuetify from 'vuetify';
Vue.use(Vuetify);
const app = new Vue({
el: '#app',
vuetify: new Vuetify(),
});
-3 go to app.scss file and add this code
#import "~vuetify/dist/vuetify.min.css";
-4 and finally you can add this code in app.scss for vuetify fonts because if you do not add the following code you can not use vuetify fonts and it will not be displayed
#import url('https://fonts.googleapis.com/css?family=Material+Icons');
#import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');
#import url('https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css');
hope this can be helpful for you
I too had the same problem which solve with this
<body>
<div id="admin" dark>
<v-app id="inspire">
....
</v-app>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>`
in the javascript
const app = new Vue({
el: '#admin'
...
});