VueJS: Tạo SPA với Laravel và Nuxt
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/nuxt
thư 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/axios
mô-đ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/_nuxt
thư 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.nuxt
và cácpublic/_nuxt
thư mục của bạn.gitignore
.
Giải phóng thời gian, khai phóng năng lực