Robin 🎭

Posted on Feb 28

Laravel 12 and Vue 3 Ultimate Starter Guide

#laravel #vue #programming #tutorial

Laravel 12 and Vue 3 together form a powerful stack for building modern web applications. Laravel provides a robust backend framework, while Vue.js offers a reactive and flexible frontend. In this guide, we will walk through setting up a Laravel 12 project with Vue 3 using Vite, covering installation, configuration, and best practices to kickstart your development journey like a pro.

Step 1: Install Laravel 12

Before proceeding, ensure that you have PHP 8.2+, Composer, and Node.js (latest LTS) installed.

1.1 Install Laravel via Composer

Run the following command to create a fresh Laravel project:

composer create-project --prefer-dist laravel/laravel my-laravel-app

Navigate to the project directory:

cd my-laravel-app

1.2 Configure Environment

Duplicate the .env.example file and generate an application key:

cp .env.example .env
php artisan key:generate

Update your .env file with database credentials:

DB_DATABASE=mydatabase
DB_USERNAME=root
DB_PASSWORD=

Then, migrate the database:

php artisan migrate

Step 2: Install Vue 3 and Vite

Laravel 12 ships with Vite for modern asset compilation.

2.1 Install Node Modules

Run:

npm install

2.2 Install Vue and Additional Dependencies

npm install vue@latest vue-router@latest @vitejs/plugin-vue

2.3 Configure Vite for Vue

Modify vite.config.js:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
        vue(),
    ],
});

Step 3: Set Up Vue in Laravel

3.1 Create Vue App Entry Point

Modify resources/js/app.js:

import { createApp } from 'vue';
import App from './components/App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

3.2 Create a Sample Vue Component

Create resources/js/components/App.vue:

<template>
    <div>
        <h1>Welcome to Laravel 12 with Vue 3</h1>
    </div>
</template>

3.3 Setup Vue Router

Install Vue Router:

npm install vue-router@latest

Create resources/js/router/index.js:

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/Home.vue';

const routes = [
    { path: '/', component: Home }
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

Create resources/js/components/Home.vue:

<template>
    <div>
        <h2>This is the Home Page</h2>
    </div>
</template>

Step 4: Update Blade Template

Modify resources/views/app.blade.php to include Vue:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel 12 with Vue 3</title>
    @vite(['resources/js/app.js'])
</head>
<body>
    <div id="app"></div>
</body>
</html>

Step 5: Run the Application

Compile the assets using Vite:

npm run dev

Start the Laravel server:

php artisan serve

Visit http://127.0.0.1:8000/ to see your Vue-powered Laravel app in action.

Conclusion

You’ve successfully set up Laravel 12 with Vue 3 using Vite! From here, you can expand your project by adding authentication, API handling, state management (Pinia/Vuex), and much more. This setup provides a solid foundation for building scalable and high-performance web applications.

Happy coding! 🚀

DEV Community