DEV Community

Cover image for laravel-nuxt-template
Akram Ghaleb
Akram Ghaleb

Posted on

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

  • This template build with Laravel v11.0 & Nuxt v3.11
  • This template Support Pinia State Management
  • If you like this work you can see more here

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
Enter fullscreen mode Exit fullscreen mode

Switch to the repo folder

cd laravel-nuxt-template
Enter fullscreen mode Exit fullscreen mode

switch to frontend folder (nuxt app)

cd frontend

cp .env.example .env
Enter fullscreen mode Exit fullscreen mode

Make sure to install the dependencies:

# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
Enter fullscreen mode Exit fullscreen mode

Build your code:

# npm
npm run generate

# pnpm
pnpm run generate

# yarn
yarn generate

# bun
bun run generate
Enter fullscreen mode Exit fullscreen mode

switch to backend folder (laravel app)

cd ../backend
Enter fullscreen mode Exit fullscreen mode

Install all the dependencies using composer

composer install
Enter fullscreen mode Exit fullscreen mode

Copy the example env file and make the required configuration changes in the .env file

cp .env.example .env
Enter fullscreen mode Exit fullscreen mode

Generate a new application key

php artisan key:generate
Enter fullscreen mode Exit fullscreen mode

Run the database migrations (Set the database connection in .env before migrating)

php artisan migrate
Enter fullscreen mode Exit fullscreen mode

Start the local development server

php artisan serve
Enter fullscreen mode Exit fullscreen mode

You can now access the server at http://localhost:8000


Github Repo

Thanks,

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

Buy Me A Coffee


Top comments (0)