Vuetify คือ Material framework ที่ถูกพัฒนามาตั้งแต่ปี 2016 ใช้สำหรับสร้าง web application โดยใช้ Material Design และ Vue.
laravel version ล่าสุดขณะที่ Post คือ 5.8 ครับ ฉะนั้นเราจะใช้ version นี้กัน
ติดตั้ง Laravel
ใช้ชื่อโปรเจคว่า vuetify ครับ
composer create-project --prefer-dist laravel/laravel vuetifyติดตั้ง Package
cd เข้าไปที่ folder vuetify แล้วใช้คำสั่ง
npm installถ้าใช้คำสั่ง npm ไม่ได้ ให้ติดตั้ง Node.js ก่อนนะครับ
ติดตั้ง Vuetify
npm install vuetify --save–save เป็นการบันทึก vuetify ลงไปที่ไฟล์ package.json
แก้ไข Source code
เพิ่ม code ที่ไฟล์ resource\assets\js\app.js
import Vue from 'vue';
import Vuetify from 'vuetify'
Vue.use(Vuetify)
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app',
vuetify: new Vuetify(),
});แก้ไข code ที่ไฟล์ resources\assets\sass\app.scss
// Fonts
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons');
@import '~vuetify/dist/vuetify.min.css';ลบ code bootstrap ที่ไฟล์เดิม
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';ใช้คำสั่งแปลงไฟล์นามสกุล .vue ให้เป็นไฟล์ javascript อัตโนมัติ เมื่อมีแก้ไขไฟล์
npm run watchสร้างไฟล์ resources\views\home.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="{{asset('css/app.css')}}">
</head>
<body>
<div id="app">
<v-app>
<v-toolbar>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn>
</v-toolbar-items>
</v-toolbar>
</v-app>
</div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>แก้ไฟล์ routes\web.php
Route::get('/', function () {
return view('home');
});ใช้คำสั่ง run server ที่ command line
php artisan serveเปิด web browser เข้า URL http://localhost:8000
ขั้นตอนการติดตั้ง Vuetify ใน Laravel
3 เทคนิค เพิ่มความเร็วใน Laravel
ฟังก์ชันวันเวลาที่น่าสนใจใน MySQL
เคล็ดลับการเรียงลำดับข้อมูลใน MySQL
เชื่อมตารางตัวเองใน MySQL ด้วย SELF JOIN
เคล็ดลับเพิ่มประสิทธิภาพการใช้ Google Docs
เทคนิคการใช้ ChatGPT Plus ให้คุ้มค่า คุ้มราคา
เชื่อมหลายฐานข้อมูล MySQL ใน Codeigniter4