🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Chào mừng đến với Cafedev! Trong bài viết này, chúng ta sẽ tìm hiểu cách cài đặt Vue 3 trong Laravel 10 với Vite. Vue 3 là một trong những phiên bản mới nhất của thư viện JavaScript phổ biến, còn Laravel là một framework phát triển ứng dụng web mạnh mẽ. Kết hợp với Vite, một công cụ xây dựng hiệu quả, chúng ta có thể tạo ra các ứng dụng web hiện đại và mạnh mẽ. Hãy bắt đầu khám phá cách thức cài đặt Vue 3 trong Laravel 10 và tận hưởng sự tiện lợi mà nó mang lại!


Bạn sẽ tìm thấy repo cho dự án này trên github tại Liên kết

1. Xem Trước

Tiếp tục!
Tiếp tục!
Làm thế nào để cài đặt Vue 3 trong Laravel với Vite

2. Laravel là gì

  • Laravel là một framework ứng dụng web với cú pháp đẹp và uyển chuyển.
  • Một framework web cung cấp một cấu trúc và điểm bắt đầu để tạo ứng dụng của bạn, cho phép bạn tập trung vào việc tạo ra điều gì đó tuyệt vời trong khi chúng tôi lo lắng cho những chi tiết.

3. Vue js là gì!

Vue là một framework JavaScript để xây dựng giao diện người dùng. Nó xây dựng trên cơ sở của HTML, CSS, và JavaScript chuẩn. Nó giúp bạn phát triển giao diện người dùng một cách hiệu quả, dù đó có là đơn giản hay phức tạp.

4. Vite js là gì!

Vite là một công cụ xây dựng mà mục tiêu là cung cấp một trải nghiệm phát triển nhanh hơn và nhẹ nhàng hơn cho các dự án web hiện đại. Nó bao gồm hai phần chính:

  • Một máy chủ phát triển cung cấp những cải tiến tính năng phong phú hơn so với các ES modules cơ bản, ví dụ như Hot Module Replacement (HMR) cực kỳ nhanh chóng.
  • Một lệnh xây dựng kết hợp mã của bạn với Rollup, được cấu hình trước để tạo ra tài nguyên tĩnh tối ưu hóa cho môi trường sản xuất.

Chúng ta kết luận từ những điều trên rằng điều quan trọng nhất phân biệt vite là tốc độ khởi đầu của máy chủ, cũng như tạo một bản gói tập tin khi hoàn thành dự án.

5. Bước 1: Tạo Dự Án Laravel Mới

composer create-project laravel/laravel laravel10-vue3

6. Bước 2: Cách Cài Đặt Vue 3 trên Laravel 10

npm install
npm install vue@next vue-loader@next

7. Bước 3: Cài Đặt Plugin Vue Từ Vite

npm i @vitejs/plugin-vue

8. Bước 4: Chỉnh sửa Tệp vite.config.js

// vite.config.js
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,
        }),
    ],
});

9. Bước 5: Chỉnh sửa Tệp app.js Bên trong Thư mục resources/js

import {createApp} from 'vue'

\import App from './App.vue'

createApp(App).mount("#app")

10. Bước 6: Tạo Tệp app.blade.php Bên trong Thư mục resources/views

Đảm bảo thêm tệp css và javascript như được hiển thị và cũng thêm div với id=app

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>ًApplication</title>
        @vite('resources/css/app.css')
    </head>
    <body>
        <div id="app"></div>
        @vite('resources/js/app.js')
    </body>
</html>

11. Bước 7: Tạo Tệp App.vue Bên trong Thư mục resources/js

<template>
    <h1>
        How To Install Vue 3 in Laravel 10 : ZWebCourses :)
    </h1>
</template>

12. Bước 8: Chỉnh sửa Tệp web.php Bên trong Thư mục routes

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('app');
})
->name('application');

13. Bước 9: Chạy Máy Chủ PHP Local

php artisan serve

14. Bước 10: Chạy Máy Chủ Node Local

npm run dev

Đi đến liên kết sau **http://127.0.0.1:8000/** và bạn sẽ thấy như sau

Bạn sẽ tìm thấy repo cho dự án này trên github tại Liên kết

Trên đây là hướng dẫn chi tiết về cách cài đặt Vue 3 trong Laravel 10 với Vite. Công việc này không chỉ đơn giản mà còn mang lại sự tiện lợi và hiệu suất cao cho quá trình phát triển ứng dụng web của bạn. Cafedev hy vọng rằng bài viết này đã cung cấp cho bạn những thông tin hữu ích và đưa bạn một bước gần hơn đến việc xây dựng các ứng dụng web chất lượng với Vue 3 và Laravel 10. Đừng quên theo dõi chúng tôi để cập nhật thêm nhiều hướng dẫn và bài viết hữu ích khác từ Cafedev.“

Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!