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 devcommand each time you change a Vue component. Or, you may run thenpm run watchcommand 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