NuxtLaravelVueStarter

laravel-nuxt-template — Nuxt Starter Template

By akramghaleb

A full-stack starter template with a Laravel backend and Nuxt frontend, organized into separate frontend and backend directories, with built-in Pinia state management and local persistence.

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

1 previews
Author preview
Author-provided previewTop of page

Preview provided in the project README.

One original preview is available. Open the full image to inspect the design.

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

01

Separate frontend and backend directories: frontend is a Nuxt application, backend is a Laravel application

02

Frontend integrates Pinia state management

03

Supports persistent state by storing state in the browser's localStorage

04

Frontend dependency installation offers four options: npm, pnpm, yarn, and bun

05

Backend installs dependencies via composer and uses artisan for key generation and database migration

Template Details

The template splits the project into two directories: frontend (a Nuxt application) and backend (a Laravel application), for building web applications with separated frontend and backend. The README states that the backend uses Laravel to provide the API and data layer foundation, while the frontend uses Nuxt to build the Vue application and supports Nuxt's built-in capabilities such as server-side rendering.

For state management, the template integrates Pinia and supports persistent state, writing application state to the browser's localStorage so that data remains after the browser is closed or refreshed.

The installation process has two tracks. For the frontend, enter the frontend directory, copy .env.example to .env, install dependencies with npm, pnpm, yarn, or bun, and run generate to build. For the backend, enter the backend directory, install dependencies with composer, copy .env.example and configure it, run key:generate to generate the application key, configure the database connection and run migrate, then start the local service with php artisan serve, accessible by default at http://localhost:8000.

The repository does not provide further details on directory structure, authentication, API conventions, or deployment methods, so these must be supplemented in actual use.

NuxtLaravelStarter

Is it right for your project?

Use Cases

  • Starting a full-stack project that needs Laravel to provide backend APIs and Nuxt for the frontend
  • A Vue application that wants to use Pinia for state management and retain user preferences
  • Quickly setting up a local development environment with separated frontend and backend using an existing directory structure

Suitable For

  • Developers familiar with the basic workflows of Laravel and Nuxt
  • Full-stack projects that need a separated frontend and backend directory structure
  • Teams that accept supplementing authentication, API conventions, and deployment configuration themselves

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    After cloning the repository, enter the frontend and backend directories separately to install dependencies

  2. 2

    For the frontend, copy .env.example to .env, install dependencies with npm, pnpm, yarn, or bun, and run generate to build

  3. 3

    For the backend, install dependencies with composer install, copy .env.example to .env and configure it

  4. 4

    For the backend, run php artisan key:generate to generate the application key

  5. 5

    Before migrating, set the database connection in .env, then run php artisan migrate, and finally start with php artisan serve

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version of a public repository under the MIT license; the free scope is the code of that version and does not mean that external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version's code are permitted.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • The Buy Me A Coffee link in the README is only a voluntary donation and does not affect the free use of the code, nor does it constitute a usage restriction.
  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur separate charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

If you enjoy my work, consider buying me a coffee to keep the creativity flowing!

Original README
https://github.com/akramghaleb/laravel-nuxt-template/blob/main/LICENSEhttps://github.com/akramghaleb/laravel-nuxt-template/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
Partly documented · 70 / 100
Technologies
Nuxt · Laravel · Vue
Website type
Starter
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2025-04-16
Screenshot last checked
2026-10-02

No demo link is recorded. Use the repository instructions to evaluate the project locally; the screenshot alone cannot establish interactive behavior.

The catalog identifies Nuxt as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 7531a03b3bd2fa5f7748ab7c896432db8d82191b5858bb7aebf996667bc1e154

2026-10-02T10:28:05.637Z

Source file / repository
<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>
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.