前后端分目录:frontend 为 Nuxt 应用,backend 为 Laravel 应用
laravel-nuxt-template — Nuxt 启动器模板
作者 akramghaleb
基于 Laravel 后端与 Nuxt 前端的全栈启动模板,前后端分目录组织,内置 Pinia 状态管理与本地持久化。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
目前有 1 张原始预览,可打开完整图片查看设计细节。
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
前端集成 Pinia 状态管理
支持持久化状态,将状态存入浏览器 localStorage
前端依赖安装提供 npm、pnpm、yarn、bun 四种方式
后端通过 composer 安装依赖,并使用 artisan 完成密钥生成与数据库迁移
模板详细介绍
该模板把项目拆成 frontend(Nuxt 应用)与 backend(Laravel 应用)两个目录,用于搭建前后端分离的 Web 应用。README 说明后端使用 Laravel 提供 API 与数据层基础,前端使用 Nuxt 构建 Vue 应用,并支持服务端渲染等 Nuxt 自带能力。
状态管理方面,模板集成 Pinia,并支持持久化状态,把应用状态写入浏览器 localStorage,使数据在关闭或刷新浏览器后仍可保留。
安装流程分为两条线:前端进入 frontend 目录,复制 .env.example 为 .env,用 npm、pnpm、yarn 或 bun 安装依赖并执行 generate 构建;后端进入 backend 目录,用 composer 安装依赖,复制 .env.example 并配置,执行 key:generate 生成应用密钥,配置数据库连接后运行 migrate,最后用 php artisan serve 启动本地服务,默认访问 http://localhost:8000。
仓库未提供更多关于目录结构、认证、接口约定或部署方式的说明,实际使用需自行补充。
适合你的项目吗?
适用场景
- 需要 Laravel 提供后端接口、Nuxt 负责前端的全栈项目起步
- 希望前端使用 Pinia 管理状态并保留用户偏好的 Vue 应用
- 想以现成目录结构快速搭建前后端分离的本地开发环境
适合人群
- 熟悉 Laravel 与 Nuxt 基本工作流的开发者
- 需要前后端分离目录结构的全栈项目
- 接受自行补充认证、接口约定与部署配置的团队
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
克隆仓库后分别进入 frontend 与 backend 目录安装依赖
- 2
前端复制 .env.example 为 .env,用 npm、pnpm、yarn 或 bun 安装依赖并执行 generate 构建
- 3
后端用 composer install 安装依赖,复制 .env.example 为 .env 并配置
- 4
后端执行 php artisan key:generate 生成应用密钥
- 5
迁移前先在 .env 中设置数据库连接,再运行 php artisan migrate,最后用 php artisan serve 启动
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- README 中的 Buy Me A Coffee 链接仅为自愿捐赠,不影响代码的免费使用,也不构成使用限制。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
https://github.com/akramghaleb/laravel-nuxt-template/blob/main/LICENSEhttps://github.com/akramghaleb/laravel-nuxt-template/blob/main/README.mdIf you enjoy my work, consider buying me a coffee to keep the creativity flowing!
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料一般 · 70 / 100
- 技术栈
- Nuxt · Laravel · Vue
- 网站类型
- 启动器
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2025-04-16
- 截图检查日期
- 2026-10-02
目前没有记录演示链接。请依据仓库说明在本地评估;仅凭截图无法确认交互行为。
目录记录的主要技术栈是 Nuxt。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: 7531a03b3bd2fa5f7748ab7c896432db8d82191b5858bb7aebf996667bc1e154
2026-10-02T10:28:05.637Z
来源文件 / 仓库<p align="center"> <img src="https://raw.githubusercontent.com/fumeapp/laranuxt/main/resources/laranuxt.png" width="200" /> </p> # laravel-nuxt-template This repository provides a starter template for building web applications using Laravel as the backend and Nuxt.js as the frontend framework. ## This project built with Laravel 11 + Nuxt 3 <br> - This template build with Laravel v11.0 & Nuxt v3.11 - This template Support Pinia State Management - If you like this work you can <a href="https://github.com/akramghaleb">see more here</a> ## Features 1. **Technology Stack:** This release leverages **Laravel version 11.0** for the backend framework and **Nuxt version 3.11** for the frontend framework. Laravel provides a robust foundation for developing web applications with its elegant syntax and powerful features, while Nuxt.js enhances the development experience by offering a framework for building server-side rendered Vue.js applications with features like automatic code splitting, hot module replacement, and more. 2. **State Management:** The release incorporates **Pinia version 2.1** for state management. Pinia is a modern and lightweight state management solution for Vue.js applications. It provides a simple and intuitive API for managing application state, making it easier to organize and manage complex data in Vue.js applications. With Pinia v2.1, developers can take advantage of improved features and optimizations for state management in their applications. 3. **Persisted State:** The release introduces support for persisted state, allowing for the storage of application state data in the local storage of the user's browser. This feature ensures that user data persists even after the browser is closed or refreshed, enhancing the user experience by providing continuity and preserving important application data. By leveraging local storage, developers can create more resilient and user-friendly applications that remember user preferences and maintain session state across sessions. ## Installation Clone the repository ``` git clone https://github.com/akramghaleb/laravel-nuxt-template.git ``` Switch to the repo folder ``` cd laravel-nuxt-template ``` switch to frontend folder (nuxt app) ``` cd frontend cp .env.example .env ``` Make sure to install the dependencies: ```bash # npm npm install # pnpm pnpm install # yarn yarn install # bun bun install ``` Build your code: ```bash # npm npm run generate # pnpm pnpm run generate # yarn yarn generate # bun bun run generate ``` switch to backend folder (laravel app) ``` cd ../backend ``` Install all the dependencies using composer ``` composer install ``` Copy the example env file and make the required configuration changes in the .env file ``` cp .env.example .env ``` Generate a new application key ``` php artisan key:generate ``` Run the database migrations (**Set the database connection in .env before migrating**) ``` php artisan migrate ``` Start the local development server ``` php artisan serve ``` You can now access the server at http://localhost:8000 <br> --- [Github Repo](https://github.com/akramghaleb/laravel-nuxt-template) Thanks, If you enjoy my work, consider buying me a coffee to keep the creativity flowing! <a href="https://www.buymeacoffee.com/akramghaleb" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-red.png" alt="Buy Me A Coffee" width="150" ></a> <br><br>
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

laravel-nuxt
A Laravel-Nuxt starter kit.
Nuxt · 启动器

canvas
Portfolio template made with Nuxt 3, Nuxt Content v3, NuxtUI v3 and TailwindCSS v4
Nuxt · 作品集

nuxt3-starter
💚 A Better Nuxt 3 Starter Template,generate by nuxi.
Nuxt · 启动器

starter
Nuxt Starter Template for Nuxt UI.
Nuxt · 启动器

bloggrify
Run a blog from Markdown files. Themes, SEO, analytics, newsletter and comments preconfigured. Like Docus, but…
Nuxt · 博客

vitify-nuxt
🔽🏔 Vuetify + Nuxt Starter Template
Nuxt · 后台
