Kết hợp Laravel 11 – Inertia – vue 3

Posted on May 2, 2024May 4, 2024 by Admin

Đánh giá bài viết

Bạn muốn sử dụng laravel 11 làm backend và vue 3 làm frontend cho ứng dụng của mình nhưng lại không muốn phải đụng đúng API mà chạy trực tiếp như cách dùng laravel thuần. Thì dưới đây sẽ hướng dẫn bạn kết hợp Laravel 11 với vue3 thông qua Inertia một cách hoàn hảo mà không cần dùng đến API.

Nội dung bài viết

Cài đặt laravel 11

Mở cửa số command tại vị trí mà bạn muốn cài đặt laravel 11 và chạy đoạn lênh bên dưới.

composer create-project laravel/laravel example-app

Bạn thay đổi “example-app” thành tên dự án mà bạn muốn đặt trước khi bấm enter.

laravel 11

Cài đặt Inertia

Sau khi cài đặt laravel 11 xong, tại cửa số command bạn gõ

cd example-app

Để di chuyển tới thư mục dự án laravel của bạn (ở đây thư mục dự án ví dụ là example-app).

Rồi tiến hành cài đặt inertia bằng cách chạy đoạn code dưới đây

composer require inertiajs/inertia-laravel

Tiếp tục trong thư mục resources/views của dự án laravel của bạn, bạn tạo một file đặt tên là app.blade.php và dán đoạn html bên dưới vào rồi lưu lại

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite('resources/js/app.js')
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

Thiết lập middleware cho Inertia bằng cách chạy câu lệnh

php artisan inertia:middleware

Rồi vào bootstrap/app.php và thêm

use App\Http\Middleware\HandleInertiaRequests;

->withMiddleware(function (Middleware $middleware) {
    $middleware->web(append: [
        HandleInertiaRequests::class,
    ]);
})

Cuối cùng trong resources/js/app.js bạn thêm vào đoạn code bên dưới để để có thể chạy được ứng dụng với Inertia

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
        return pages[`./Pages/${name}.vue`]
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el)
    },
})

Thảm khảo thêm: cách cài đặt và thiết lập inertia tại đây

Cài đặt vue 3

Để cài đặt vue3 thì chạy câu lệnh

npm install @inertiajs/vue3

Sau bước này dự án của chúng ta chưa thể chạy được vì vite không thể phân tích được cấu trúc của vue, vì vậy cần phải cài thêm plugin @vitejs/plugin-vue để vite có thể xử lý được các tập tin .vue

npm install @vitejs/plugin-vue --save-dev

Khi chạy xong câu lệnh trên lúc này bạn cần phải mở tập tin vite.config.js lên và thêm plugin vue() vào trong nó như đoạn code dưới đây để có thể chạy được vue trong vite

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Sau đó chạy npm run dev để triển khai ứng dụng.

Chạy vue3 trong laravel 11

Sau khi thiết lập các bước trên lúc này ta đã có thể bắt đầu xây dựng ứng dụng của mình. Dưới đây sẽ là một số hướng dẫn cơ bản để kết hợp chạy vue với controller trong laravel.

Laravel controller

Tạo một controller như cách bạn sử dụng laravel thuần để xây dựng dự án bằng cách chạy command “php artisan make:controller UserController”.

Như đoạn code controller dưới đây thay vì cách viết bình thường trước kia là return view(‘Users/Index’) thì bây giờ chúng ta sẽ truyền dữ liệu về thông qua Inertia.

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Inertia\Inertia;
use Illuminate\Http\Request;

class UserController extends Controller
{
    public function index()
    {
        $users = User::all(); 

        return Inertia::render('Users/Index', [
            'users' => $users
        ]);
    }
}

Tạo giao diện hiển thị vue

Ở cách làm trước đây chúng ta sẽ tạo giao diện hiển thị dưới dạng blade của laravel tuy nhiên ở đây chúng ta dùng vue 3 nên chắc chắn là giao diện sẽ sử dụng vue.

Trong thư mục resources/js lần lượt tạo các thư mục Components, Layouts, Pages.

Trong Pages chúng ta sẽ lưu trữ các trang giao diện ứng dụng của mình, các bạn có thể đặt tên khác tuỳ thích.

Trong Pages chúng ta sẽ tạo ra một thư mục có tên là Users để chứ các giao diện xử lý liên quan đến Users. Ví dụ ở đây tôi tạo ra một tập tin Index.vue để hiển thị danh sách user trả về từ UserController. Trong tập tin Index.vue này là nơi chúng ta viết code bằng vue với cú pháp như dưới đây

<script setup>
    import Layout from '@/Layout/DefaultLayout.vue'
    import { Head } from '@inertiajs/vue3'

    defineProps([ 'users' ])
</script>

<template>
    <Layout>
        <Head title="Welcome" />
        <h2>Danh sách người dùng</h2>
        <ul>
            <li v-for="user in users" :key="user.id">
                <div>{{ user.name }}</div>
                <div>{{ user.email }}</div>
            </li>
        </ul>
    </Layout>
</template>

Và trên tất cả cách viết route vẫn không thay đổi gì so với cách viết route laravel không kèm vue, điều đó làm chúng ta có thể dễ dàng sử dụng vue trong laravel mà không gặp nhiều khó khăn.

Route::get('/',[UserController::class, 'index']);