Integrating Vue.js with Laravel Using Vite: A Step‑by‑Step Guide
This tutorial walks you through setting up a Laravel project, installing Laravel Breeze, configuring Vite for Vue.js, creating a TaskList component, registering it in the Blade template, and running the development server to see a responsive Vue‑driven task manager.
Building a modern responsive web application with Vue.js and Laravel has never been easier thanks to Laravel's default Vite integration. This guide shows you how to integrate Vue.js into a Laravel project and demonstrates the process by creating a simple task‑management app.
Prerequisites
Before you begin, make sure the following software is installed:
PHP (>=8.0)
Composer
Node.js (>=16.0)
NPM or Yarn
Step 1: Set Up a New Laravel Project
First, create a new Laravel project with Composer:
composer create-project laravel/laravel laravel-vue-vite
cd laravel-vue-viteThen install Laravel Breeze to quickly scaffold authentication, which also configures Vue and Vite:
composer require laravel/breeze --dev
php artisan breeze:install vue
npm install && npm run devThese commands install Breeze, set up Vue, and provide a basic application skeleton.
Step 2: Verify Vue Configuration in Vite
After installation, check the vite.config.js file to ensure the Vue plugin is correctly configured:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
vue(),
],
});Once the configuration is confirmed, you can verify that Vue runs properly.
Step 3: Create a Vue Component
Create a components folder under resources/js/ and add a TaskList.vue file with the following content:
<template>
<div>
<h2>Task List</h2>
<ul>
<li v-for="task in tasks" :key="task.id">{{ task.name }}</li>
</ul>
<input v-model="newTask" placeholder="Enter new task" />
<button @click="addTask">Add Task</button>
</div>
</template><script>
export default {
data() {
return {
newTask: '',
tasks: [],
};
},
methods: {
addTask() {
if (this.newTask.trim() !== '') {
this.tasks.push({ id: Date.now(), name: this.newTask });
this.newTask = '';
}
},
},
};
</script>Step 4: Register and Use the Vue Component
Open resources/js/app.js and register the TaskList component:
import { createApp } from 'vue';
import TaskList from './components/TaskList.vue';
const app = createApp({});
app.component('task-list', TaskList);
app.mount('#app');Next, edit resources/views/welcome.blade.php to include the Vue support and place the task-list component:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel Vue Vite</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<div id="app">
<task-list></task-list>
</div>
</body>
</html>Step 5: Run the Application and Preview
Start the development server with the following commands:
npm run dev
php artisan serveOpen a browser and navigate to http://127.0.0.1:8000; you will see the task list powered by Vue.js.
Conclusion
In this guide we successfully configured Laravel and Vue.js with Vite, created a simple Vue component, and rendered it inside a Laravel Blade template. This is just the beginning—integrating Vue.js into a Laravel application opens the door to building complex, responsive front‑ends while leveraging Laravel's powerful back‑end capabilities.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
php Courses
php中文网's platform for the latest courses and technical articles, helping PHP learners advance quickly.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.