Cách tích hợp Vue.js vào Laravel và làm một ứng dụng căn bản

Cách cài đặt Laravel và Vue.js trên máy tính của bạn, sau đó, ta sẽ tìm hiểu về cách tích hợp Vue.js vào Laravel bằng cách sử dụng các công cụ như Laravel Mix hoặc Webpack.

Tích hợp Vue.js vào Laravel giúp phát triển các ứng dụng web động một cách nhanh chóng và hiệu quả hơn bằng cách kết hợp các tính năng mạnh mẽ của Laravel và Vue.js, đồng thời cung cấp cho người dùng trải nghiệm tuyệt vời với các tính năng phong phú của Vue.js trong một môi trường Laravel ổn định và an toàn. Bài viết cũng sẽ đưa ra một ví dụ minh họa để bạn có thể áp dụng các kiến thức đã học vào thực tế.

Vue.js Laravel là gì?

Vue.je

Vue.js là một thư viện JavaScript được sử dụng rộng rãi để xây dựng các ứng dụng đơn trang (SPA) và các ứng dụng web tương tác. Vue.js có nhiều tính năng hữu ích bao gồm data binding, directives, computed properties, watch properties, lifecycle hooks, component, slot, event và nhiều hơn nữa.

Bài viết này được đăng tại [free tuts .net]

Khi tích hợp Vue.js vào Laravel, chúng ta có thể tận dụng được các tính năng mạnh mẽ của cả hai để phát triển ứng dụng web. Vue.js có thể được sử dụng để xây dựng các thành phần giao diện người dùng động, trong khi Laravel có thể được sử dụng để xử lý các yêu cầu HTTP và tương tác với cơ sở dữ liệu. Khi tích hợp Vue.js và Laravel, chúng ta có thể tận dụng được tính năng SPA của Vue.js để tạo ra các ứng dụng web tương tác nhanh chóng và mượt mà, trong khi vẫn sử dụng các tính năng mạnh mẽ của Laravel để xử lý các yêu cầu HTTP và tương tác với cơ sở dữ liệu.

Tại sao cần tích hợp Vue.js vào Laravel?

Có nhiều lý do để tích hợp Vue.js vào Laravel, trong đó có những lý do sau đây:

Xây dựng ứng dụng đơn trang (SPA): Vue.js là một thư viện rất phổ biến để xây dựng các ứng dụng đơn trang, trong đó một trang web duy nhất được tải một lần và các nội dung khác được tải bằng cách sử dụng JavaScript. Laravel có thể được sử dụng để xử lý các yêu cầu HTTP và cung cấp dữ liệu cho Vue.js, trong khi Vue.js có thể được sử dụng để xây dựng các giao diện người dùng động.

Tăng tốc độ phát triển: Sử dụng Vue.js trong Laravel có thể giúp tăng tốc độ phát triển. Vue.js cung cấp các thành phần giao diện người dùng đơn giản và dễ sử dụng, trong khi Laravel cung cấp các tính năng mạnh mẽ để xử lý các yêu cầu HTTP và tương tác với cơ sở dữ liệu.

Tăng tính tương tác của ứng dụng: Vue.js là một thư viện rất phổ biến để xây dựng các ứng dụng web tương tác, trong đó người dùng có thể tương tác với các thành phần trên trang web một cách nhanh chóng và mượt mà. Tích hợp Vue.js vào Laravel có thể giúp tăng tính tương tác của ứng dụng.

Giảm tải cho máy chủ: Khi tích hợp Vue.js vào Laravel, một phần của tải trọng xử lý được chuyển sang máy khách (client) thay vì chỉ xử lý trên máy chủ (server). Điều này có thể giúp giảm tải cho máy chủ và cải thiện hiệu suất của ứng dụng.

Tích hợp dễ dàng: Laravel cung cấp tích hợp đơn giản và dễ dàng với Vue.js, giúp cho việc tích hợp trở nên nhanh chóng và dễ dàng hơn.

Cài đặt Laravel và Vue.js

Để cài đặt Laravel, bạn cần thực hiện các bước sau:

Bước 1: Cài đặt composer

Composer là một công cụ quản lý thư viện PHP, nó được sử dụng để cài đặt các thư viện, framework và ứng dụng PHP. Bạn có thể tải Composer tại trang web https://getcomposer.org/. Sau đó, bạn chỉ cần chạy file cài đặt và làm theo hướng dẫn.

Bước 2: Tạo mới dự án Laravel

Bạn có thể sử dụng Composer để tạo mới dự án Laravel. Điều này sẽ tự động tạo ra các thư mục và file cần thiết để bắt đầu phát triển ứng dụng. Chạy lệnh sau trong command prompt hoặc terminal của bạn:

composer create-project --prefer-dist laravel/laravel project-name

Bước 3: Kiểm tra cài đặt

Sau khi đã tạo mới dự án, bạn có thể kiểm tra xem Laravel đã được cài đặt thành công hay chưa bằng cách chạy lệnh sau:

php artisan serve

Nếu thành công, bạn sẽ nhìn thấy thông báo "Laravel development server started" và bạn có thể truy cập vào địa chỉ localhost:8000 để xem trang chủ của ứng dụng Laravel.

Hướng dẫn cài đặt Vue.js

Để cài đặt Vue.js, bạn cần thực hiện các bước sau:

Bước 1: Cài đặt Node.js

Vue.js là một framework JavaScript, do đó bạn cần cài đặt Node.js trước. Bạn có thể tải Node.js từ trang chủ https://nodejs.org/en/. Sau đó, bạn chỉ cần chạy file cài đặt và làm theo hướng dẫn.

Bước 2: Cài đặt Vue CLI

Vue CLI là một công cụ giúp bạn tạo mới dự án Vue.js một cách nhanh chóng và dễ dàng. Bạn có thể cài đặt Vue CLI bằng lệnh sau:

npm install -g @vue/cli

Bước 3: Tạo mới dự án Vue.js

Sau khi đã cài đặt Vue CLI, bạn có thể tạo mới dự án Vue.js bằng lệnh sau:

vue create project-name

Bước 4: Kiểm tra cài đặt

Sau khi đã tạo mới dự án, bạn có thể kiểm tra xem Vue.js đã được cài đặt thành công hay chưa bằng cách chạy lệnh sau:

npm run serve

Nếu thành công, bạn sẽ nhìn thấy thông báo "App running at: http://localhost:808

Tích hợp Vue.js vào Laravel

Để tích hợp Vue.js vào Laravel và sử dụng Laravel Mix hoặc Webpack để tự động hóa quá trình kết hợp, bạn có thể thực hiện các bước sau:

Tạo các component phía client bằng Vue.js

Để tạo các component phía client bằng Vue.js, bạn có thể sử dụng Vue CLI hoặc tạo các component bằng cách viết code bằng tay.

Sử dụng Vue CLI để tạo các component

Vue CLI là một công cụ dòng lệnh giúp bạn tạo các project Vue.js nhanh chóng và dễ dàng. Để tạo một component Vue.js mới, bạn có thể sử dụng lệnh sau trong terminal:

vue create project-name

Sau đó, bạn chọn các tùy chọn để tạo project và chọn "Manually select features" để chọn các tính năng mà bạn muốn sử dụng, bao gồm Vuex, Vue Router, CSS pre-processors và linter/formatter.

Sau khi tạo project, bạn có thể sử dụng lệnh sau để tạo một component mới:

vue generate component component-name

Component mới sẽ được tạo trong thư mục src/components của project.

Tạo các component bằng cách viết code bằng tay

Bạn cũng có thể tạo các component Vue.js bằng cách viết code bằng tay. Để làm điều này, bạn cần tạo một file mới có đuôi .vue. File này bao gồm ba phần chính:

• <template>: chứa HTML code của component.
• <script>: chứa JavaScript code để định nghĩa component và xử lý logic.
• <style>: chứa CSS code để thiết lập giao diện cho component.

Ví dụ về việc tạo một component bằng cách viết code bằng tay:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="count++">Click me</button>
    <p>You clicked the button {{ count }} times.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Vue.js!',
      count: 0
    }
  }
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

Trong ví dụ trên, chúng ta đang tạo một component đơn giản với một nút bấm và một đoạn text. Khi người dùng nhấn vào nút bấm, biến count sẽ được tăng lên một và giá trị mới sẽ được hiển thị trên giao diện.

Sau khi tạo các component, bạn có thể sử dụng chúng trong ứng dụng Laravel của bạn bằng cách import và sử dụng chúng như các component thông thường của Vue.js.

Xử lý yêu cầu phía server bằng Laravel

Để xử lý yêu cầu phía server bằng Laravel, bạn cần tạo các route, controller và model để thực hiện các tác vụ xử lý dữ liệu và trả về kết quả cho phía client.

Tạo các route

Route là định tuyến cho các yêu cầu được gửi đến server từ phía client. Bạn có thể tạo các route bằng cách thêm chúng vào file routes/web.php. Ví dụ:

Route::get('/users', 'UserController@index');
Route::get('/users/{id}', 'UserController@show');
Route::post('/users', 'UserController@store');
Route::put('/users/{id}', 'UserController@update');
Route::delete('/users/{id}', 'UserController@delete');

Trong ví dụ trên, chúng ta tạo các route cho việc lấy danh sách người dùng (/users), lấy thông tin của một người dùng (/users/{id}), thêm mới người dùng (/users với phương thức POST), cập nhật thông tin người dùng (/users/{id} với phương thức PUT) và xóa người dùng (/users/{id} với phương thức DELETE).

Tạo các controller

Controller là nơi chứa các phương thức xử lý logic của ứng dụng. Bạn có thể tạo một controller mới bằng lệnh sau:

php artisan make:controller UserController

Sau khi tạo controller, bạn có thể định nghĩa các phương thức để xử lý các yêu cầu tương ứng. Ví dụ:

namespace App\Http\Controllers;

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

class UserController extends Controller
{
    public function index()
    {
        $users = User::all();
        return response()->json($users);
    }

    public function show($id)
    {
        $user = User::findOrFail($id);
        return response()->json($user);
    }

    public function store(Request $request)
    {
        $user = User::create($request->all());
        return response()->json($user);
    }

    public function update(Request $request, $id)
    {
        $user = User::findOrFail($id);
        $user->update($request->all());
        return response()->json($user);
    }

    public function delete($id)
    {
        $user = User::findOrFail($id);
        $user->delete();
        return response()->json(null, 204);
    }
}

Trong ví dụ trên, chúng ta định nghĩa các phương thức tương ứng với các route đã tạo trước đó. Ví dụ, phương thức index() sẽ trả về danh sách người dùng, phương thức show($id) sẽ trả về thông tin của một người dùng cụ thể, phương thức store(Request $request) sẽ thêm mới một người dùng, phương thức update(Request $request, $id) sẽ cập nhật thông tin của một người dùng và phương thức delete($id)

Cách sử dụng Laravel Mix hoặc Webpack để tự động hóa quá trình kết hợp

Laravel Mix là một công cụ được tích hợp sẵn trong Laravel để quản lý và tự động hóa quá trình biên dịch các tài nguyên như Sass, Less, JavaScript, TypeScript, Vue.js components, Blade templates, và hình ảnh. Laravel Mix sử dụng Webpack để thực hiện các tác vụ này.

Để sử dụng Laravel Mix, bạn cần cài đặt Node.js và NPM trên máy tính của mình. Sau đó, bạn cần cài đặt Laravel Mix thông qua Composer bằng lệnh sau:

composer require laravel/ui "^3.0" --dev
php artisan ui vue
npm install

Lệnh trên sẽ cài đặt Laravel UI và Vue.js và tạo một số file mẫu để bạn có thể bắt đầu tạo các component Vue.js và quản lý các tài nguyên của dự án.

Sau khi cài đặt Laravel Mix, bạn có thể tạo một file webpack.mix.js để định nghĩa các tác vụ biên dịch và tối ưu hóa các tài nguyên của dự án. Ví dụ:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

Trong đoạn mã trên, chúng ta định nghĩa các tác vụ để biên dịch các file JavaScript và Sass. Cụ thể, file resources/js/app.js sẽ được biên dịch thành file public/js/app.js, và file resources/sass/app.scss sẽ được biên dịch thành file public/css/app.css.

Bạn có thể chạy các tác vụ biên dịch bằng lệnh sau:

npm run dev

Lệnh này sẽ thực hiện các tác vụ biên dịch và tạo các file kết quả trong thư mục public. Nếu bạn muốn tự động hóa quá trình biên dịch khi có thay đổi trong các file, bạn có thể chạy lệnh sau:

npm run watch

Lệnh này sẽ giám sát các file trong thư mục resources và tự động biên dịch các tài nguyên khi có thay đổi.

Ngoài Laravel Mix, bạn cũng có thể sử dụng Webpack trực tiếp để quản lý các tài nguyên của dự án. Tuy nhiên, Laravel Mix đã được tích hợp sẵn trong Laravel và cung cấp các tác vụ tiện ích cho việc quản lý các tài nguyên, nên việc sử dụng Laravel Mix sẽ đơn giản và nhanh chóng hơn.

Ví dụ tạo một ứng dụng web đơn giản sử dụng Laravel và Vue.js

Để tạo một ứng dụng web đơn giản sử dụng Laravel và Vue.js, chúng ta có thể làm theo các bước sau:

Bước 1: Tạo dự án Laravel

Đầu tiên, chúng ta cần tạo một dự án Laravel bằng lệnh sau:

composer create-project --prefer-dist laravel/laravel example-app

Bước 2: Cài đặt Vue.js và Laravel UI

Sau khi tạo dự án Laravel, chúng ta cần cài đặt Vue.js và Laravel UI bằng lệnh sau:

composer require laravel/ui
php artisan ui vue
npm install

Lệnh trên sẽ cài đặt Vue.js và Laravel UI, và tạo các file mẫu để bắt đầu tạo các component Vue.js và quản lý các tài nguyên của dự án.

Bước 3: Thiết lập router và controller

Chúng ta cần thiết lập router và controller để xử lý yêu cầu từ phía client. Trong ví dụ này, chúng ta sẽ tạo một trang đơn giản hiển thị danh sách sản phẩm.

Trong file routes/web.php, chúng ta thêm đoạn mã sau:

Route::get('/products', 'ProductController@index');

Trong file app/Http/Controllers/ProductController.php, chúng ta tạo method index để trả về danh sách sản phẩm:

public function index()
{
    $products = Product::all();
    return view('products.index', compact('products'));
}

Bước 4: Tạo component Vue.js

Chúng ta cần tạo một component Vue.js để hiển thị danh sách sản phẩm. Trong thư mục resources/js/components, chúng ta tạo file ProductList.vue với nội dung như sau:

<template>
  <div>
    <h2>Product List</h2>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products" :key="product.id">
          <td>{{ product.name }}</td>
          <td>{{ product.price }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    products: {
      type: Array,
      required: true
    }
  }
}
</script>

Trong component này, chúng ta sử dụng v-for để lặp lại danh sách sản phẩm, và sử dụng props để truyền danh sách sản phẩm từ component cha vào component con.

Bước 5: Hiển thị component Vue.js trên trang

Chúng ta cần hiển thị component Vue.js trên trang. Trong file resources/views/products/index.blade.php, chúng ta thêm đoạn mã sau:

@extends('layouts.app')

@section('content')
  <product-list :products="{{ $products }}"></product-list>
@endsection

@section('scripts')
  <script src="{{ mix('js/app.js') }}"></script>
@endsection

Ở đây, chúng ta sử dụng Blade template của Laravel để hiển thị component Vue.js trên trang. Chúng ta truyền danh sách sản phẩm vào component `ProductList` thông qua thuộc tính `:products="{{ $products }}"`.

Bước 6: Tạo và sử dụng API

Trong ví dụ này, chúng ta sẽ sử dụng Laravel để tạo API để lấy danh sách sản phẩm. Đầu tiên, chúng ta cần tạo route để xử lý yêu cầu API:

Route::get('/api/products', 'ProductController@apiIndex');

Sau đó, chúng ta thêm method apiIndex vào ProductController để trả về danh sách sản phẩm dưới dạng JSON:

public function apiIndex()
{
    $products = Product::all();
    return response()->json($products);
}

Bước 7: Sử dụng axios để gọi API

Cuối cùng, chúng ta sử dụng axios để gọi API và lấy danh sách sản phẩm. Trong component ProductList.vue, chúng ta thêm đoạn mã sau:

<script>
import axios from 'axios'

export default {
  props: {
    products: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      apiProducts: []
    }
  },
  mounted() {
    axios.get('/api/products').then(response => {
      this.apiProducts = response.data
    })
  }
}
</script>

Trong đoạn mã này, chúng ta sử dụng axios để gọi API /api/products, và lưu danh sách sản phẩm trả về vào thuộc tính apiProducts.

Các tính năng chính của ứng dụng

• Hiển thị danh sách sản phẩm trên trang
• Lấy danh sách sản phẩm từ API và hiển thị trên trang
• Sử dụng Vue.js để tạo component hiển thị danh sách sản phẩm
• Sử dụng Laravel để xử lý yêu cầu và tạo API để lấy danh sách sản phẩm.

Kết bài viết

Trong tổng quan, tích hợp Vue.js vào Laravel mang lại nhiều lợi ích cho người phát triển và người dùng. Nó giúp cho việc phát triển các ứng dụng web động, tương tác và đẹp mắt hơn, đồng thời giúp cho việc quản lý mã nguồn trở nên dễ dàng hơn. Vì vậy, nếu bạn đang phát triển các ứng dụng web, hãy cân nhắc sử dụng Vue.js và Laravel để tận dụng những lợi ích của việc tích hợp hai công nghệ này.