VueLaravel后台启动器

laravel-viltf-starter-kit — Vue 后台模板

作者 thaolaptrinh

基于 Laravel、Vue 3、Inertia.js、Tailwind CSS 与 Filament 的全栈启动器,内置 SPA 前端与 /admin 后台面板,并集成 Fortify 认证与 Pest 测试。

看看你的网站会是什么样

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

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

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

全部页面与视图 2

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

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

值得关注的模板亮点

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

01

Vue 3 + TypeScript + Inertia.js 构建 SPA 前端,并支持 SSR

02

Filament 后台面板默认挂载在 /admin

03

Laravel Fortify 提供登录、注册、邮箱验证、密码重置、2FA 与 passkeys

04

Laravel Wayfinder 生成类型安全的路由,Spatie laravel-data 配合 laravel-typescript-transformer 自动生成 TypeScript 类型

05

Pest PHP 测试框架,支持 Playwright 浏览器测试

06

内置 Laravel Sail(Docker),命令在容器内运行

模板详细介绍

这是一个 Laravel 启动器模板,把前端 SPA 与后台管理面板放在同一个代码库中。前端使用 Vue 3、TypeScript 与 Inertia.js,样式采用 Tailwind CSS v4 并支持深色模式;后台使用 Filament 面板,默认挂载在 /admin 路径。认证由 Laravel Fortify 提供,覆盖登录、注册、邮箱验证、密码重置、双因素认证(二维码与恢复码)以及 passkeys。路由通过 Laravel Wayfinder 生成 TypeScript 类型,数据对象使用 Spatie laravel-data 并借助 laravel-typescript-transformer 自动生成类型。开发与测试工具包括 Laravel Pail 实时日志、Laravel Boost、Pest PHP 以及 Pint、Rector、Larastan、ESLint、Prettier 等代码质量工具。项目附带 Laravel Sail(Docker),命令在 Sail 容器内运行,无需本地安装 PHP 或 Postgres。安装入口为 composer setup,它会依次执行依赖安装、复制 .env、生成应用密钥、迁移数据库、安装前端依赖并构建前端资源。

VueLaravel后台启动器

适合你的项目吗?

适用场景

  • 需要同时搭建 Vue SPA 前端与 Filament 后台面板的 Laravel 项目
  • 希望开箱即用 Fortify 认证(含 2FA 与 passkeys)的后台系统
  • 偏好 TypeScript 类型安全路由与数据对象的全栈开发
  • 使用 Docker/Sail 统一开发环境并需要 Pest 测试与代码质量工具链的团队

适合人群

  • 使用 Laravel 与 Vue 构建后台管理系统的开发者
  • 需要 SPA 前端与 Filament 管理面板共存的项目
  • 接受 Docker/Sail 作为开发环境的前后端团队
  • 需要 Fortify 认证与 Pest 测试起步配置的 Laravel 项目

上手与定制指南

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

  1. 1

    环境要求 PHP 8.5+、Composer 2.x、Node.js 20+(使用 pnpm),Docker 用于 Laravel Sail

  2. 2

    克隆仓库后运行 composer setup,脚本会安装依赖、复制 .env、生成应用密钥、执行迁移、安装前端依赖并构建资源

  3. 3

    启动开发环境:vendor/bin/sail up -d 后运行 vendor/bin/sail composer run dev

  4. 4

    应用访问 http://localhost,Filament 面板访问 http://localhost/admin

  5. 5

    提交前可运行 vendor/bin/sail composer test 执行测试套件

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
  • 使用 Laravel Sail 开发环境需要安装 Docker;README 说明所有命令在 Sail 容器内运行,因此本地开发依赖 Docker。
  • 项目默认以 Laravel Sail(Docker)方式运行,README 中的命令均在 Sail 容器内执行,需要 Docker 环境。
  • 前端依赖安装与构建要求 Node.js 20+ 并使用 pnpm 包管理器。
  • 运行该项目需要 PHP 8.5 或更高版本。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Docker | required for [Laravel Sail](https://laravel.com/docs/sail) |

README 原文

> This project ships with **Laravel Sail** (Docker). All commands below run inside Sail — no local PHP/Postgres setup required.

README 原文

Node.js | `20+` (with `pnpm`)

README 原文

PHP | `8.5+`

README 原文
https://github.com/thaolaptrinh/laravel-viltf-starter-kit/blob/main/LICENSEhttps://github.com/thaolaptrinh/laravel-viltf-starter-kit/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

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

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

这个项目需要核对什么

记录的仓库更新时间
2026-09-17
截图检查日期
2026-10-05

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

审核声明: [email protected] · 2026-10-05

查看当时使用的来源资料

SHA-256: 687ac886daa9678299c906019bc06a4f1014d26a02cc0a28eef3d357bbb79197

2026-10-05T11:32:22.639Z

来源文件 / 仓库
<a id="top"></a>

# 🚀 Laravel VILTF Starter Kit

<div align="center">

A modern, full-featured Laravel starter kit with **Vue 3**, **Inertia.js**, **Tailwind CSS**, and **Filament** — ready for building fullstack applications and admin dashboards.

[![Laravel](https://img.shields.io/badge/Laravel-13.x-FF2D20?style=for-the-badge&logo=laravel)](https://laravel.com)
[![Vue](https://img.shields.io/badge/Vue-3.5-4FC08D?style=for-the-badge&logo=vue.js)](https://vuejs.org)
[![Inertia](https://img.shields.io/badge/Inertia-3.x-9553E9?style=for-the-badge)](https://inertiajs.com)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind-4.x-38B2AC?style=for-the-badge&logo=tailwind-css)](https://tailwindcss.com)
[![Filament](https://img.shields.io/badge/Filament-5.x-F59E0B?style=for-the-badge)](https://filamentphp.com)
[![PHP](https://img.shields.io/badge/PHP-8.5-777BB4?style=for-the-badge&logo=php)](https://php.net)
[![Pest](https://img.shields.io/badge/Pest-4.x-FF3064?style=for-the-badge)](https://pestphp.com)
[![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)](LICENSE)

[![GitHub Stars](https://img.shields.io/github/stars/thaolaptrinh/laravel-viltf-starter-kit?style=social)](https://github.com/thaolaptrinh/laravel-viltf-starter-kit/stargazers)
[![GitHub Forks](https://img.shields.io/github/forks/thaolaptrinh/laravel-viltf-starter-kit?style=social)](https://github.com/thaolaptrinh/laravel-viltf-starter-kit/network/members)

</div>

---

## ✨ What's Included

- **Vue 3** + **TypeScript** + **Inertia.js v3** — Modern SPA-like experience with SSR support
- **Tailwind CSS v4** — Utility-first styling with dark mode
- **Filament v5** — Beautiful admin panel out of the box (mounted at `/admin`)
- **Laravel Fortify** — Complete authentication: login, registration, email verification, password reset, **2FA** (QR + recovery codes), and **passkeys**
- **Laravel Wayfinder** — Type-safe route generation for TypeScript
- **Reka UI** — Beautiful, accessible headless Vue components
- **@lucide/vue** + **VueUse** — Icon set and composable utilities
- **Spatie laravel-data** + **laravel-typescript-transformer** — Typed data objects with automatic TypeScript type generation
- **Laravel Pail** — Real-time log tailing during development
- **Laravel Boost** — Development tooling and MCP server integration
- **Pest PHP v4** — Modern testing framework with browser testing support (Playwright)
- Code quality tools: **Pint**, **Rector**, **Larastan**, **ESLint**, **Prettier** (via [vite-plus](https://viteplus.dev))

---

## 📋 Requirements

| Tool     | Version                                                    |
| -------- | ---------------------------------------------------------- |
| PHP      | `8.5+`                                                     |
| Composer | `2.x`                                                      |
| Node.js  | `20+` (with `pnpm`)                                        |
| Docker   | required for [Laravel Sail](https://laravel.com/docs/sail) |

> This project ships with **Laravel Sail** (Docker). All commands below run inside Sail — no local PHP/Postgres setup required.

---

## 📦 Installation

### Quick start

```bash
git clone https://github.com/thaolaptrinh/laravel-viltf-starter-kit.git
cd laravel-viltf-starter-kit
composer setup
```

The `composer setup` script runs the full bootstrap for you:

1. `composer install`
2. Copies `.env.example` → `.env`
3. Generates the app key
4. Runs migrations
5. `pnpm install`
6. `pnpm run build`

### Start the dev environment

```bash
vendor/bin/sail up -d        # start Postgres + Redis + app
vendor/bin/sail composer run dev
```

Then visit **http://localhost** (app) and **http://localhost/admin** (Filament panel).

---

## 📚 Documentation

- [Laravel](https://laravel.com/docs) · [Inertia.js](https://inertiajs.com) · [Vue.js](https://vuejs.org/docs)
- [Tailwind CSS v4](https://tailwindcss.com/docs) · [Filament](https://filamentphp.com/docs) · [Livewire](https://livewire.laravel.com/docs)
- [Laravel Fortify](https://laravel.com/docs/fortify) · [Wayfinder](https://github.com/laravel/wayfinder) · [Laravel Boost](https://github.com/laravel/boost)
- [Pest](https://pestphp.com) · [Reka UI](https://reka-ui.com) · [VueUse](https://vueuse.org) · [Rector](https://getrector.org/documentation)

---

## 🤝 Contributing

Pull requests are welcome! Please ensure the test suite passes before submitting:

```bash
vendor/bin/sail composer test
```

---

## 📝 License

Created by [@thaolaptrinh](https://github.com/thaolaptrinh) — released under the [MIT License](LICENSE).

---

<div align="center">

**Built with ❤️ using Laravel, Vue, Inertia, Tailwind CSS, and Filament**

⭐ Star this repo if you find it helpful!

[⬆ Back to Top](#top)

</div>
反馈内容错误

看看同类模板

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