NuxtVueLaravel启动器

laravel-nuxt — Nuxt 启动器模板

作者 cretueusebiu

基于 Laravel 与 Nuxt 的前后端分离启动器,内置登录、注册、邮箱验证、密码重置与 Socialite 第三方登录,可在 SPA 与 SSR 之间切换。

看看你的网站会是什么样

浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局,交互效果请以实际项目为准。

采集于 2026-10-01查看来源

值得关注的模板亮点

从已有项目资料中,快速了解它的特点。

01

Laravel 提供后端 API,Nuxt 作为前端客户端,前后端代码在同一仓库中

02

内置登录、注册、邮箱验证与密码重置流程

03

集成 Laravel Socialite,以 GitHub 作为第三方登录示例

04

前端包含 VueI18n、ESLint、Bootstrap 4 与 Font Awesome 5

05

可在 SPA 与 SSR 模式之间切换,SSR 需修改配置与环境变量

模板详细介绍

这是一个把 Laravel 作为后端 API、Nuxt 作为前端客户端的启动项目模板,适合需要 Vue 前端与 Laravel 后端配合的 Web 应用起步。仓库同时包含服务端与客户端代码,前端位于 client 目录,通过 Nuxt 的 router-module 手动维护路由。

功能层面,模板已包含登录、注册、邮箱验证和密码重置流程,并集成 Laravel Socialite,以 GitHub 作为示例提供方。前端使用 VueI18n 做国际化,配合 ESLint、Bootstrap 4 与 Font Awesome 5。项目支持 SPA 与 SSR 两种模式,默认按 SPA 使用,开启 SSR 需要修改 nuxt.config.js 并调整环境变量。

使用上有若干明确限制:路由需在 client/router.js 中手动添加;邮箱验证要求 App\User 模型实现 MustVerifyEmail 契约;Socialite 需要自行创建 GitHub 应用并配置客户端 ID 与密钥。生产部署需要额外的进程管理工具保持 Node 服务运行,README 以 pm2 为例,并给出 Nginx 反向代理配置示例。仓库最近更新时间为 2021 年,依赖版本以仓库当时的清单为准。

NuxtVueLaravel启动器

适合你的项目吗?

适用场景

  • 需要 Vue 前端与 Laravel 后端配合的新项目起步
  • 希望直接获得登录、注册、邮箱验证与密码重置基础流程
  • 需要接入 GitHub 等第三方登录的 Web 应用
  • 需要在 SPA 与 SSR 之间做选择的 Nuxt 项目

适合人群

  • 熟悉 Laravel 与 Vue 生态的开发者
  • 需要前后端分离结构的 Web 应用项目
  • 希望以现成认证流程为起点继续开发的项目

上手与定制指南

结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。

  1. 1

    使用 composer create-project --prefer-dist cretueusebiu/laravel-nuxt 创建项目

  2. 2

    配置 .env 中的数据库连接,通过 git clone 或下载安装时还需运行 php artisan key:generate 与 php artisan jwt:secret

  3. 3

    执行 php artisan migrate 完成数据库迁移,并运行 npm install 安装前端依赖

  4. 4

    开发时分别启动 php artisan serve 与 npm run dev,访问 http://localhost:3000

  5. 5

    启用 SSR 需在 client/nuxt.config.js 中设置 ssr: true,并配置 APP_URL 与 CLIENT_URL,生产环境需进程管理工具保持 Node 服务运行

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供;担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 使用 router-module,路由不会自动生成,必须手动在 client/router.js 中添加路由。
  • 邮箱验证功能默认未启用,需让 App\User 模型实现 MustVerifyEmail 契约后才可用。
  • Socialite 第三方登录需自行创建 GitHub 应用,并配置回调地址与客户端 ID、密钥。
  • 生产环境需额外安装进程管理工具(如 pm2)以保持 Node 服务常驻运行。
  • 默认按 SPA 运行,启用 SSR 需手动修改 nuxt.config.js 并调整环境变量。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

This project uses [router-module](https://github.com/nuxt-community/router-module), so you have to add the routes manually in `client/router.js`.

README 原文

To enable email verification make sure that your `App\User` model implements the `Illuminate\Contracts\Auth\MustVerifyEmail` contract.

README 原文

To enable the provider create a new GitHub application and use `https://example.com/api/oauth/github/callback` as the Authorization callback URL.

README 原文

In production you need a process manager to keep the Node server alive forever:

README 原文

Edit `client/nuxt.config.js` and set `ssr: true`

README 原文
https://github.com/cretueusebiu/laravel-nuxt/blob/master/LICENSEhttps://github.com/cretueusebiu/laravel-nuxt/blob/master/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 77 / 100
技术栈
Nuxt · Vue · Laravel
网站类型
启动器
这个分数如何计算

本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2021-05-30
截图检查日期
2026-10-01

已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Nuxt。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 4a3529d63b373d80c0f58ca8b85f39d062a0e60492cde009b25ada451d4838ea

2026-10-01T02:28:34.813Z

来源文件 / 仓库
# Laravel-Nuxt

<a href="https://github.com/cretueusebiu/laravel-nuxt/actions"><img src="https://github.com/cretueusebiu/laravel-nuxt/workflows/tests/badge.svg" alt="Build Status"></a>
<a href="https://packagist.org/packages/cretueusebiu/laravel-nuxt"><img src="https://poser.pugx.org/cretueusebiu/laravel-nuxt/d/total.svg" alt="Total Downloads"></a>
<a href="https://packagist.org/packages/cretueusebiu/laravel-nuxt"><img src="https://poser.pugx.org/cretueusebiu/laravel-nuxt/v/stable.svg" alt="Latest Stable Version"></a>

> A Laravel-Nuxt starter project template.

<p align="center">
<img src="https://i.imgur.com/NHFTsGt.png">
</p>

## Features

- Nuxt 2
- Laravel 8
- SPA or SSR
- Socialite integration
- VueI18n + ESlint + Bootstrap 4 + Font Awesome 5
- Login, register, email verification and password reset

## Installation

- `composer create-project --prefer-dist cretueusebiu/laravel-nuxt`
- Edit `.env` and set your database connection details 
- (When installed via git clone or download, run `php artisan key:generate` and `php artisan jwt:secret`)
- `php artisan migrate`
- `npm install`

## Usage

### Development

```bash
# start Laravel
php artisan serve

# start Nuxt
npm run dev
```

Access your application at `http://localhost:3000`.

### Production

```bash
npm run build
```

### Enable SSR

- Edit `client/nuxt.config.js` and set `ssr: true` 
- Edit `.env` to set `APP_URL=http://api.example.com` and `CLIENT_URL=http://example.com`
- Run `npm run build` and `npm run start`

#### Nginx Proxy

For Nginx you can add a proxy using the follwing location block:

```
server {
    location / {
        proxy_pass http://http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}
```

#### Process Manager

In production you need a process manager to keep the Node server alive forever:

```bash
# install pm2 process manager
npm install -g pm2

# startup script
pm2 startup

# start process
pm2 start npm --name "laravel-nuxt" -- run start

# save process list
pm2 save

# list all processes
pm2 l
```

After each deploy you'll need to restart the process:

```bash
pm2 restart laravel-nuxt 
```

Make sure to read the [Nuxt docs](https://nuxtjs.org/).

## Socialite

This project comes with GitHub as an example for [Laravel Socialite](https://laravel.com/docs/5.8/socialite).

To enable the provider create a new GitHub application and use `https://example.com/api/oauth/github/callback` as the Authorization callback URL.

Edit `.env` and set `GITHUB_CLIENT_ID` and `GITHUB_CLIENT_SECRET` with the keys form your GitHub application.

For other providers you may need to set the appropriate keys in `config/services.php` and redirect url in `OAuthController.php`.

## Email Verification

To enable email verification make sure that your `App\User` model implements the `Illuminate\Contracts\Auth\MustVerifyEmail` contract.

## Notes

- This project uses [router-module](https://github.com/nuxt-community/router-module), so you have to add the routes manually in `client/router.js`.
- If you want to separate this in two projects (client and server api), move `package.json` into `client/` and remove config path option from the scripts section. Also make sure to add the env variables in `client/.env`.

## Changelog

Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。