ใช้งาน Vuetify บน Laravel 6.0 ฉบับมือใหม่ก็เข้าใจได้

ใช้งาน Vuetify บน Laravel 6.0 ฉบับมือใหม่ก็เข้าใจได้

ถ้าพูดถึง Laravel 6.0 แล้ว ก็ต้องนึกถึงการใช้งานร่วมกันระหว่าง Vue.js Framework เป็นแน่ เพราะ Laravel 6.0 นั้นทำมาให้สนับสนุนการทำงานร่วมกันได้แบบลงตัวสุดๆสังเกตุได้จากการสร้าง auth แบบ Authentication Quickstart เป็นตัวอย่าง และถ้าจะพูดถึง Vue.js แล้วเราก็ต้องใช้ libary ต่างๆ เพื่อความรวดเร็วในการพัฒนา และวันนี้เราจะมาทำให้ Vue.js ที่ทำงานบน Laravel ใช้งาน Vuetify กันครับ

Vuetify คืออะไรกัน ?

Vuetify คือ Material Design Component Framework ใช้ในการเพิ่มสีสันในส่วนของ User Interface (UI) ให้ดูดีมากขึ้น คล้ายๆ กับ Bootstrap แต่การใช้งานจะเน้นไปทาง javascript เยอะกว่า สามารถหาข้อมูลเพิ่มเติมเกี่ยวกับ Vuetify ตามนี้เลย https://vuetifyjs.com/

สำหรับการใช้งานบน Laravel ทำตามนี้ได้เลยครับ

noppadollanngain/vuetify_laravel6 Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and…github.com

ก่อนอื่นเราทำการสร้าง Project ทางฝั่ง Laravel ขึ้นมา หลังจากนั้นทำการติดตั้งตามคำสั่งนี้เลยครับ

yarn add vue // ติดตั้ง vue.js

yarn add vue-router // ติดตั้ง route สำหรับ SPA

yarn add vuetify // ติดตั้ง vuetify

yarn add @mdi/font // ติดตั้ง material icon

จากนั้นเพิ่ม route ทางฝั่ง Laravel ครับ

Route::get(‘/vuetify/{any}’, function() {

  return view(‘vuetify’);

})->where(‘any’,’.*’);

ทำการสร้าง vuetify.blade.php สำหรับรองรับ vue.js และ route แบบ SPA

แก้ไขไฟล์ app.js

เพิ่มไฟล์ route.js

แก้ไขไฟล์ SCSS

@import ‘~vuetify/dist/vuetify.min.css’;

@import ‘~@mdi/font/css/materialdesignicons.min.css’;

สร้าง folder pages

สร้างไฟล์ Dashboard

สร้างไฟล์ Calendar

จากนั้นสั่งให้ Vue.js build javascript ( สำหรับ Dev ) และสั่งให้ Laravel ทำงาน

yarn dev

php artisan serve

เท่านี้เราก็ได้ UI สวยๆ แล้วครับ

สรุป

จากการใช้งาน Vuetify แล้วโดยส่วนตัวคิดว่า “ ครบครัน ” เลยครับ เหมาะสมทั้งการใช้งานในส่วนของ หน้าการจัดการข้อมูล หน้าเเสดงผล หน้ารายงานผล แจ้งเตือน หน้าไหนๆ เจ้าตัว Vuetify มีให้ใช้งานครบเครื่องเลยครับ