VueLaravel启动器

laravel-vue-tailwind-spa — Vue 启动器模板

作者 skrypt-nl

基于 Laravel 8 的 Vue SPA 启动器，集成 Vue Router、Vuex、JWT 认证与 Tailwind CSS，并包含登录、注册、邮箱验证和密码重置页面。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

1 个预览视图
作者提供的预览
作者提供的预览

来自项目 README 的原始预览。

目前有 1 张原始预览，可打开完整图片查看设计细节。

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

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

值得关注的模板亮点

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

01

Laravel 8 后端与 Vue 单页应用结合

02

集成 Vue Router、Vuex 与 ESlint

03

JWT 认证，含登录、注册、邮箱验证和密码重置

04

已集成 Laravel Socialite，以 GitHub 为示例

05

使用 Tailwind CSS 与 Font Awesome 5

06

页面支持动态导入与自定义布局

模板详细介绍

这是一个 Laravel + Vue 的单页应用启动模板，仓库说明其基于 cretueusebiu/laravel-vue-spa 的旧版本修改而来，主要改动是引入 Tailwind 并适配作者自身需求。前端使用 Vue、Vue Router、Vuex，并配置了 ESlint；页面采用动态导入和自定义布局。认证方面使用 JWT，提供登录、注册、邮箱验证和密码重置流程，并已集成 Laravel Socialite（以 GitHub 为例），但默认未在登录和注册页面启用。样式使用 Tailwind 与 Font Awesome 5，部分页面带有基础 Tailwind 设计。

模板的待办清单显示，侧边栏图标与切换、VueI18n 组件、GitHub Socialite 组件、测试修复和更多组件尚未完成；README 也说明 VueI18n 与 Socialite 当前处于禁用状态，测试因源自原项目而暂时无法正常运行。安装步骤包括通过 Composer 创建项目、配置 .env 中的数据库与邮件连接、执行迁移、安装 npm 依赖；开发时可用 npm run watch 或 npm run hot，生产构建使用 npm run production。

VueLaravel启动器

适合你的项目吗？

适用场景

  • 需要一个带 JWT 认证的 Laravel + Vue 单页应用起点
  • 希望用 Tailwind CSS 快速搭建后台或仪表盘界面
  • 想参考 Laravel Socialite 的 GitHub 登录集成方式
  • 作为学习 Laravel 与 Vue 前后端分离结构的示例项目

适合人群

  • 熟悉 Laravel 与 Vue 的开发者
  • 需要现成认证流程的 SPA 项目
  • 以 Tailwind 为样式方案的前端项目
  • 可接受模板部分功能尚未完成并自行调整的团队

上手与定制指南

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

  1. 1

    使用 composer create-project --prefer-dist skrypt-nl/laravel-vue-tailwind-spa 创建项目

  2. 2

    编辑 .env 设置数据库与邮件连接；若通过 git clone 或下载安装，需运行 php artisan key:generate 和 php artisan jwt:secret

  3. 3

    运行 php artisan migrate 创建数据表，并执行 npm install 安装前端依赖

  4. 4

    开发时使用 npm run watch 或 npm run hot，生产构建使用 npm run production

  5. 5

    启用邮箱验证需让 App\User 模型实现 Illuminate\Contracts\Auth\MustVerifyEmail 契约

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • Socialite 集成默认未在登录和注册页面启用，需自行添加相关组件才能使用。
  • 启用 GitHub 登录需自行创建 GitHub 应用并配置回调地址，属于外部服务依赖。
  • 使用 Socialite 需在 .env 中配置 GitHub 应用的 CLIENT_ID 与 CLIENT_SECRET 密钥。
  • 测试当前无法正常运行，因其源自原项目，需自行修复后才能使用。
  • VueI18n 当前处于禁用状态，国际化功能尚未启用。
  • Socialite 集成当前处于禁用状态，需手动启用。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Socialite has been integrated, but hasn't been added by default on the login & sign up pages.

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 原文

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

README 原文

Currently, the tests are not working properly as these were created for the original project.

README 原文

Vue + VueRouter + Vuex + VueI18n (disabled for now) + ESlint

README 原文

Socialite integration (disabled for now)

README 原文
https://github.com/skrypt-nl/laravel-vue-tailwind-spa/blob/master/LICENSEhttps://github.com/skrypt-nl/laravel-vue-tailwind-spa/blob/master/README.md

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

项目核对记录与介绍依据

模板资料

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

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

这个项目需要核对什么

记录的仓库更新时间
2023-01-07
截图检查日期
2026-10-02

目前没有记录演示链接。请依据仓库说明在本地评估；仅凭截图无法确认交互行为。

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: d7ba20f473eeeb906c21d8797ce570265bb3d437c9973193ca23719b7993b8f6

2026-10-02T14:42:46.692Z

来源文件 / 仓库
# Laravel 8, Vue & Tailwind SPA 

> A Laravel, Vue & Tailwind SPA starter project template.

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

## Please note
This project is based on an older version of [cretueusebiu/laravel-vue-spa](https://github.com/cretueusebiu/laravel-vue-spa).
All credits should go to [Cretu Eusebiu](https://github.com/cretueusebiu),
this version only contains some changes for the use of Tailwind and to fit our own needs.

## Features

- Laravel 8
- Vue + VueRouter + Vuex + VueI18n (disabled for now) + ESlint
- Pages with dynamic import and custom layouts
- Login, register, email verification and password reset
- Authentication with JWT
- Socialite integration (disabled for now)
- Tailwind + Font Awesome 5
- Basic Tailwind design for some pages

## To Do - v1.0.0
- [x] ~~Upgrade to Laravel 8~~
- [x] ~~Fix npm hot reloading~~
- [x] ~~Redesign auth pages~~
- [x] ~~Redesign dashboard pages~~
- [x] ~~Remove redundant components~~
- [ ] Sidebar icons & sidebar toggle
- [ ] Create VueI18n components and implement them
- [ ] Create Socialite components for GitHub
- [ ] Fix all tests
- [ ] Add more components
- [ ] Create a changelog and track changes

## Installation

- `composer create-project --prefer-dist skrypt-nl/laravel-vue-tailwind-spa`
- Edit `.env` and set your database & email 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
# Build and watch
npm run watch

# Serve with hot reloading
npm run hot
```

#### Production

```bash
npm run production
```

## Socialite

_Socialite has been integrated, but hasn't been added by default on the login & sign up pages._ 

This project comes with GitHub as an example for [Laravel Socialite](https://laravel.com/docs/8.x/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.

## Testing

_Currently, the tests are not working properly as these were created for the original project._
_We will do our best to get them up and running as soon as possible again._

```bash
# Run unit and feature tests
vendor/bin/phpunit

# Run Dusk browser tests
php artisan dusk
```

## Changelog

_Coming soon_

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

看看同类模板

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

vitesse

vitesse

🏕 Opinionated Vite + Vue Starter Template

Vue · 启动器

vitesse-webext

vitesse-webext

⚡️ WebExtension Vite Starter Template

Vue · 启动器

laravel-vue-spa

laravel-vue-spa

A Laravel-Vue SPA starter kit.

Vue · 启动器

vue3-h5-template

vue3-h5-template

vue3-h5-template 是一个面向移动端 H5 项目的启动模板，基于 Vue3、Vite 和 Vant4 构建，同时集成了 TypeScript、Tailwindcss、Pinia、Vue-router 等常用…

Vue · 启动器

tov-template

tov-template

vite + vue3 + ts 开箱即用现代开发模板 | vite + vue3 + ts out-of-the-box modern development template

Vue · 启动器

shadcn-vue-landing-page

shadcn-vue-landing-page

New design 🎉 Vue + Shadcn-vue + TypeScript + Tailwind. Landing page template ease-to-use

Vue · 企业官网