Laravel + VueJS + Vuetify: Installation

Laravel secara default telah pun didatangkan dengan Vuejs. Anda boleh lihat dalam file package.json.

Jadi untuk mula menggunakannya. Pertama sekali sila pastikan anda telah install npm yang membantu anda compile semua asset bagi menguruskan semua js dependencies.

Berikut command install NPM.

npm install

Run command berikut untuk install Vuetify

npm install vuetify --save

package.json akan dikemaskini seperti berikut

Selepas install vuetify. Compile semua asset melalui command npm berikut. 

npm run watch

atau

npm run watch-poll

Command npm run watch ini akan sentiasa update sebarang perubahan yang dibuat pada code kita.

Remember, you should run the npm run dev command each time you change a Vue component. Or, you may run the npm run watch command to monitor and automatically recompile your components each time they are modified.

Buka resources/js/app.js update

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

Buka resources/sass/app.css update

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

@import '~vuetify/dist/vuetify.min.css';

Edit main(cth home.blade.php) blade. Tambah pada header seperti berikut

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

Tambah pada sebelum close tag body.

<script src="{{ asset('js/app.js') }}"></script>

Rujukan

• https://vuetifyjs.com/en/getting-started/quick-start
• https://laravel.com/docs/5.7/frontend