1) composer require laravel/ui
2) php artisan ui vue
3) npm install && npm install vue-router vuetify
4) in welcome.blade.php's body write div#app
5) npm run watch
(
for vue error:
in webpack use .vue() &
For getting Vue.use is not a function:
For those who would be in the same case, in your app.js file, you must replace
the line :
window.Vue = require('vue');
With :
window.Vue = require('vue').default;
)
Reference:
https://www.youtube.com/watch?v=jPpsT6KFDl4&list=PL9fcHFJHtFabrQMoRlfit6kSxXZE5YWU9&index=1
Configure vuetify and vue-router:
6) create vuetify.js and router.js file inside resources js folder.
7) in app.js import vuetify.js file and import router.js file
8) in app.js instead of using
Vue.component('example-component', require('./components/ExampleComponent.vue')
.default);
use
import Example from './components/ExampleComponent'
and
const app = new Vue({
el: '#app',
router,
vuetify,
components: {
'example-component': Example
}
});
9) Now as we will use vuetify we will not use bootstrap
so, stop the npm run watch and
run:
npm uninstall bootstrap jquery
and,
in resource's bootstrap.js file remove this try catch
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
also,
remove all lines from app.scss
Now run: npm run watch
As off now we have totally removed bootstrap from laravel project.
10) In app.scss:
@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900");
@import url('https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min
.css');
@import '~vuetify/dist/vuetify.css'
as described in vuetify installation documentation.
11) in welcome.blade.php:
use this:
<v-app id="app">
<example-component/>
</v-app>
12) In examplecomponent:
use:
<template>
<v-container>
<v-alert type="info">I'm vuetify component</v-alert>
</v-container>
</template>
Now test the url. congratulations you have successfully configured
vuetify.
13) in router.js define testing routes:
const routes = [
{
path: '/foo',
component: foo
},
{
path: '/bar',
component: bar
},
{
path: '/user/:name',
component: user
}
];
14) in examplecomponent define the router-view:
<template>
<div>
<v-container>
<v-alert type="info">I'm vuetify component</v-alert>
<v-btn link to="/foo"> Load Foo </v-btn>
<v-btn link to="/bar"> Load Bar </v-btn>
</v-container>
<v-main>
<router-view></router-view>
</v-main>
</div>
</template>
use router-view where you want to show the url contents.
and use router-link/ ' v-btn link to ' change the link
NOTE: all of the above codes are for setting up puproses. you can name it mainapp
instead of examplecomponent. and can set up according to that.
16) Install material design icons:
npm install material-design-icons-iconfont -D
17) import material design icon css in app.js:
import 'material-design-icons-iconfont/dist/material-design-icons.css'
visit: https://fonts.google.com/icons
18) Create navbar as it is defined inside mainapp. and inside navbar
you can define copy and paste the navbar default css.
default css of navbar starts here:
<template>
<nav>
<v-snackbar v-model="snackbar" :timeout="4000" top color="success">
<span>Awesome! You added a new project.</span>
<v-btn text color="white" @click="snackbar = false"> Close </v-btn>
</v-snackbar>
<v-app-bar flat app>
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title class="text-uppercase grey--text">
<span class="font-weight-light">Todo</span>
<span>Ninja</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<!-- dropdown menu -->
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn
class="mx-2"
outlined
color="primary"
dark
v-bind="attrs"
v-on="on"
>
<v-icon left>expand_more</v-icon>
<span>Menu</span>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="link in links"
:key="link.text"
router
:to="link.route"
>
<v-list-item-title>{{ link.text }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<!-- dropdown ends here -->
<v-btn color="grey" outlined>
<span>Sign Out</span>
<v-icon right>exit_to_app</v-icon>
</v-btn>
</v-app-bar>
<!-- absolute temporary -->
<v-navigation-drawer app v-model="drawer" class="primary">
<v-layout column align-center>
<v-flex class="mt-5">
<div class="text-center">
<v-avatar size="100">
<img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="" />
</v-avatar>
<p class="white--text subheading mt-1">Pritam Datta</p>
</div>
</v-flex>
<v-flex class="mt-4 mb-3"> </v-flex>
</v-layout>
<v-list nav dense>
<v-list-item-group>
<v-list-item
v-for="link in links"
:key="link.text"
router
:to="link.route"
>
<v-list-item-icon>
<v-icon class="white--text">{{ link.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title class="white--text">{{
link.text
}}</v-list-item-title>
</v-list-item>
</v-list-item-group>
</v-list>
</v-navigation-drawer>
</nav>
</template>
<script>
export default {
components: {},
data() {
return {
drawer: true,
links: [{ icon: "dashboard", text: "Dashboard", route: "/" }],
snackbar: false,
};
},
};
</script>
<style>
</style>
default css of navbar ends here
19) create dashboard.vue inside components->pages->dashboard.
20) Use this:
Route::any('{slug}', function(){
return view('welcome');
});
as because, suppose you are on '/projects' url and when you reload the laravel
project it says /projects are not found because it loaded from dom. that's
when using any route in web.php redirects to homepage and from app.js it finds
/projects route.
That's it. Setting up vue vuetify and laravel completes here.
Now you can use authentication, and crud operation etc. as per the project
requirement.
Comments
Post a Comment