laravel-vuetify-howto.md

Laravel + Vuetify HOW TO

==

Installing the components

Create your laravel project and open its folder

composer create-project laravel/laravel yourappname
cd yourappname

Install Laravel UI package

composer require laravel/ui

Run Vue preset

php artisan ui vue
npm install && npm run dev

Install vuetify via npm (or yarn)

npm install vuetify -D --save

Javascript

Now we going to configurate your application to run vuetify.

Open resources/js/app.js file. Above this:

const app = new Vue({
    el: '#app'
});

import Vuetify from 'vuetify';
Vue.use(Vuetify);

Modify your instance to get a new Vuetify instance. See:

const app = new Vue({
    el: '#app',
    vuetify: new Vuetify()
});

CSS

Until here you have the javascript part configured. Let's configurate css

Install mdi icons

npm install css-loader --save
npm install @mdi/font -D --save

Open resources/scss/app.scss and replace this:

@import url('https://fonts.googleapis.com/css?family=Nunito');

by this

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons';

and

@import '~bootstrap/scss/bootstrap';

by

@import '~vuetify/dist/vuetify.min.css';
@import '~@mdi/font/css/materialdesignicons.min.css';

After all, run this commands:

npm install && npm run dev

Finishing

Download the base template

curl https://gist.githubusercontent.com/evaldobarbosa/960bfda911e667e686ae83af94d72acf/raw/33f8b96700070d3dd33517bad0098f19741f85e9/laravel-vuetify.blade.php -o resources/views/base.blade.php
curl https://raw.githubusercontent.com/vuetifyjs/vuetify/master/packages/docs/src/layouts/layouts/demos/google-contacts.vue -o resources/js/components/AppMain.vue

Create view that inherites from downloaded blade view (base.blade.php) and write anything into 'content' section. Replace the 'welcome' view call at '/' route and be happy.

To finish, up your artisan server

npm run dev
php artisan serve