Vue 3 + TypeScript + Inertia.js 构建 SPA 前端,并支持 SSR
laravel-viltf-starter-kit — Vue 后台模板
作者 thaolaptrinh
基于 Laravel、Vue 3、Inertia.js、Tailwind CSS 与 Filament 的全栈启动器,内置 SPA 前端与 /admin 后台面板,并集成 Fortify 认证与 Pest 测试。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 2
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
Filament 后台面板默认挂载在 /admin
Laravel Fortify 提供登录、注册、邮箱验证、密码重置、2FA 与 passkeys
Laravel Wayfinder 生成类型安全的路由,Spatie laravel-data 配合 laravel-typescript-transformer 自动生成 TypeScript 类型
Pest PHP 测试框架,支持 Playwright 浏览器测试
内置 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、生成应用密钥、迁移数据库、安装前端依赖并构建前端资源。
适合你的项目吗?
适用场景
- 需要同时搭建 Vue SPA 前端与 Filament 后台面板的 Laravel 项目
- 希望开箱即用 Fortify 认证(含 2FA 与 passkeys)的后台系统
- 偏好 TypeScript 类型安全路由与数据对象的全栈开发
- 使用 Docker/Sail 统一开发环境并需要 Pest 测试与代码质量工具链的团队
适合人群
- 使用 Laravel 与 Vue 构建后台管理系统的开发者
- 需要 SPA 前端与 Filament 管理面板共存的项目
- 接受 Docker/Sail 作为开发环境的前后端团队
- 需要 Fortify 认证与 Pest 测试起步配置的 Laravel 项目
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
环境要求 PHP 8.5+、Composer 2.x、Node.js 20+(使用 pnpm),Docker 用于 Laravel Sail
- 2
克隆仓库后运行 composer setup,脚本会安装依赖、复制 .env、生成应用密钥、执行迁移、安装前端依赖并构建资源
- 3
启动开发环境:vendor/bin/sail up -d 后运行 vendor/bin/sail composer run dev
- 4
应用访问 http://localhost,Filament 面板访问 http://localhost/admin
- 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 原文
https://github.com/thaolaptrinh/laravel-viltf-starter-kit/blob/main/LICENSEhttps://github.com/thaolaptrinh/laravel-viltf-starter-kit/blob/main/README.mdPHP | `8.5+`
README 原文
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. [](https://laravel.com) [](https://vuejs.org) [](https://inertiajs.com) [](https://tailwindcss.com) [](https://filamentphp.com) [](https://php.net) [](https://pestphp.com) [](LICENSE) [](https://github.com/thaolaptrinh/laravel-viltf-starter-kit/stargazers) [](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>
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

vuestic-admin
Vuestic Admin is an open-source, ready-to-use admin template suite designed for rapid development, easy mainte…
Vue · 后台

vitesse
🏕 Opinionated Vite + Vue Starter Template
Vue · 启动器

v3-admin-vite
v3-admin-vite 是一个主打 AI 编程友好体验的 Vue3 后台管理模板,基于 Vue3、Vite、TypeScript、Element Plus 构建。
Vue · 后台

vue-typescript-admin-template
vue-typescript-admin-template 是一套面向后台管理界面的前端解决方案,基于 Vue 2.6、TypeScript 和 Element UI 构建。
Vue · 后台

vue-antd-admin
Vue Antd Admin 是 Ant Design Pro 的 Vue 实现版本,目标是为中后台项目提供一套开箱即用的前端与设计解决方案。
Vue · 后台

coreui-free-vue-admin-template
Free Vue Admin & Dashboard Template Built for AI-Assisted Development
Vue · 后台
