VueJS: Tạo SPA với Laravel và Nuxt

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Trong hướng dẫn này, chúng ta sẽ sử dụng Laravel làm API và Nuxt làm Ứng dụng Trang Đơn (SPA). Chúng có thể làm việc cùng nhau, nhưng đó không phải là một nhiệm vụ dễ dàng. Ở đây ta sẽ sử dụng các gói (package) laravel-nuxt và laravel-nuxt-js.

Có nhiều lý do hơn để sử dụng các gói này, chẳng hạn như khi sử dụng Laravel Passport và CreateFreshApiToken. Phần mềm trung gian sẽ tạo cookie api_token trên routes web sử dụng http get và đó là một vấn đề nếu bạn không phục vụ SPA từ bên trong Laravel.

Bắt đầu

Cài đặt Laravel

Hãy bắt đầu với cài đặt Laravel mới:

laravel new spa

Cài đặt laravel-nuxt (cho PHP)

# cd spa
composer require pallares/laravel-nuxt

Gói này sẽ được tự động phát hiện. Nếu bạn đang sử dụng các phiên bản cũ của Laravel, chỉ cần thêm ServiceProvider vào file config/app.php:

<?php
return [
    // ...
    'providers' => [
        // ...
        Pallares\LaravelNuxt\LaravelNuxtServiceProvider::class,
    ],
];

Thêm một route để hiển thị trang SPA trong file routes/web.php. Hãy route mặc định đi kèm với framework:

<?php
// Route::get('/', function () {
//     return view('welcome');
// });

Route::get(
    '{uri}',
    '\\'.Pallares\LaravelNuxt\Controllers\NuxtController::class
)->where('uri', '.*');

Bây giờ, backend của bạn đã sẵn sàng để phục vụ các asset được biên dịch mà Nuxt sẽ tạo cho bạn. Mỗi route sẽ trả lại 404 bây giờ sẽ phục vụ trang SPA của chúng ta.

Cài đặt laravel-nuxt (cho JS)

Hãy thay tệp package.json bằng điều này:

{
    "private": true,
    "scripts": {
        "start": "laravel-nuxt dev",
        "build": "laravel-nuxt build"
    },
    "dependencies": {
        "laravel-nuxt": "^1.0.0"
    }
}

Cài đặt các phụ thuộc:

npm install

Gói laravel-nuxt sẽ cài đặt Nuxt cho bạn, cùng với Vue, vue-router, @nuxtjs/Axios,... Hãy tạo file nuxt.config.js:

const laravelNuxt = require("laravel-nuxt");

module.exports = laravelNuxt({
  // Options such as mode, srcDir and generate.dir are already handled for you.
  modules: [],
  plugins: [],
});

Từ giờ trở đi, Nuxt sẽ tìm kiếm các tệp nguồn trong resources/nuxtthư mục. Tạo một lộ trình thế giới xin chào trong resources/nuxt/pages/index.vue:

<template>
  <h1>Hello {{ name }}!</h1>
</template>

<script>
export default {
  data: () => {
    return { name: 'world' };
  },
};
</script>

Cuối cùng, chạy:

npm start

Truy cập http: // localhost: 8000 . Bạn nên thấy nó:

 

Đó là nó! Máy chủ của nghệ nhân Laravel và máy chủ dev của Nuxt đang hoạt động và làm việc cùng nhau một cách minh bạch. Hãy thử chỉnh sửa trang chủ của bạn ngay bây giờ, thật thú vị khi thấy hoạt động tải lại trực tiếp. Dưới vỏ bọc, máy chủ dev của Nuxt đang ủy quyền mọi cuộc gọi đến máy chủ của Laravel, bao gồm cả kết xuất SPA. Vì @nuxtjs/axiosmô-đun được bao gồm (và cũng được ủy quyền), bạn có thể thực hiện các cuộc gọi API bình thường.

Gọi API từ SPA

SPA chắc chắn sẽ cần gọi API của chúng tôi, vì vậy hãy thêm một tuyến đường routes/api.phpđể lấy thông tin người dùng:

<?php
Route::get('me', function () {
    // Let's return fake information.
    return [
        'name' => 'John Doe',
    ];
});

Bây giờ, chỉnh sửa resources/nuxt/pages/index.vue:

<template>
  <h1>Hello {{ user.name }}!</h1>
</template>

<script>
export default {
    // https://github.com/nuxt-community/axios-module
    async asyncData({ app }) {
        const user = await app.$axios.$get('api/me');
        return { user };
    },
};
</script>

Voila! Trang của bạn sẽ trông như thế này!

 
Để giữ cho hướng dẫn đơn giản, chúng tôi không sử dụng bất kỳ loại xác thực nào ở đây. Tích hợp Hộ chiếu nên gần như không đáng kể ở đây.

Triển khai

Nếu bạn muốn triển khai ứng dụng của mình, chỉ cần chạy npm run build. Các tài sản được biên dịch sẽ được đặt trong public/_nuxtthư mục. Bạn có thể xem trước ứng dụng cuối cùng của mình với lệnh nghệ nhân nổi tiếng php artisan serve.

Bạn có thể muốn thêm  .nuxtvà các public/_nuxtthư mục của bạn  .gitignore.
» Tiếp: Cách kiểm tra phiên bản VueJS
« Trước: vue-meta full
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!