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'
...
});
Related
I am new to Laravel and Vue Js. I am facing an issue and I am not being able to figure out what the exact problem is.
app.blade.php
<body>
<v-app id="app">
<example-component/>
</v-app>
<script src="{{ asset('js/app.js') }}"></script>
</body>
app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
import vuetify from './vuetify';
import router from './router';
import Example from './components/ExampleComponent';
new Vue({
el: '#app',
router,
vuetify
});
ExampleComponent.vue
<template>
<div>
<v-content>
<v-container>
<v-btn color="primary" link to="/foo">Foo</v-btn>
<v-btn color="primary" link to="/bar">Bar</v-btn>
</v-container>
<router-view></router-view>
</v-content>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify)
export default new Vuetify({
})
router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
const foo = {templates: '<v-alert type="success">I am Foo</v-alert>'}
const bar = {templates: '<v-alert type="success">I am Bar</v-alert>'}
Vue.use(VueRouter)
const routes = [
{
path: '/foo',
component: foo,
},
{
path: '/bar',
component: bar,
}
]
export default new VueRouter({
routes
})
It is giving me this error in the console:
app.js:23169 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<VContent>
<ExampleComponent> at resources/js/components/ExampleComponent.vue
<VApp>
<Root>
My buttons are not loading the router-view. Also, I would like to know what is the difference between registering components using import and Vue.component? Please help me.
It looks like there is a typo. Change:
const foo = {templates: '<v-alert type="success">I am Foo</v-alert>'}
const bar = {templates: '<v-alert type="success">I am Bar</v-alert>'}
to
const foo = {template: '<v-alert type="success">I am Foo</v-alert>'}
const bar = {template: '<v-alert type="success">I am Bar</v-alert>'}
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'
}
}
}
});
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.
I am trying to set up laravel scout with Algolia.
I am following Algolia indications from:
https://www.algolia.com/doc/framework-integration/laravel/searching/client-side-search/?language=php
The problem I am facing is when I try to use VUE in the blade with the following code:
......
<script src="{{ asset('public/js/app.js') }}"></script> <!-- I have tried async too -->
......
<div id="app">
<!-- In a default Laravel app, Vue will render inside an #app div -->
<ais-instant-search
:search-client="searchClient"
index-name="{{ (new App\Article)->searchableAs() }}"
>
<ais-search-box placeholder="Search articles..."></ais-search-box>
<ais-hits>
<template slot="item" slot-scope="{ item }">
<div>
<h1>#{{ item.title }}</h1>
<h4>#{{ item.summary }}</h4>
</div>
</template>
</ais-hits>
</ais-instant-search>
</div>
<script>
new Vue({
data: function() {
return {
searchClient: algoliasearch(
'{{ config('scout.algolia.id') }}',
'{{ Algolia\ScoutExtended\Facades\Algolia::searchKey(App\Article::class) }}',
),
};
},
el: '#app',
});
</script>
And my app.js looks like this:
window.Vue = require('vue');
import algoliasearch from 'algoliasearch/lite';
window.algoliasearch = algoliasearch;
import InstantSearch from 'vue-instantsearch';
Vue.use(InstantSearch);
I have been reading online load of stuff about the same issue but it does not matter what I try the Vue is not recognized:
Uncaught ReferenceError: Vue is not defined
Vue can start in app.js because I tried but I need it on the blade because as you can see I need to print some algolia info. Ideas?
I import the vue-route to my app.js in my laravel vue website. Sadly, there's an error. Can you please guide me thanks
app.js
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let routes = [
{path: '/', component: require('./components/Welcome.vue') }
]
const router = new VueRouter({
mode: 'history',
routes
})
const app = new Vue({
el: '#app',
router,
});
master.blade.php
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<body>
<div id="app">
#yield('content')
</div>
</body
welcome.blade.php
#extends('layouts.master')
#section('content')
<router-view></router-view>
<vue-progress-bar> </vue-progress-bar>
#endsection
The result should be the Welcome.vue will display.
If you use a newer version of Vue.js you should have .default to require('./components/Welcome.vue')
So line 5 would look like this
{path: '/', component: require('./components/Welcome.vue').default }
Stack Overflow: Why need default after require() method in Vue?
As per documentation, you should inject router option to make your whole app router aware.
So you should have something like this:
const app = new Vue({
router
}).$mount('#app')
I think this is duplicate of this.