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-vite Then 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 dev These 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"> Laravel Vue Vite @vite(['resources/css/app.css', 'resources/js/app.js']) Step 5: Run the Application and Preview Start the development server with the following commands: npm run dev php artisan serve Open 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.
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.