Integrating Vue.js with Vite in a Laravel Project: Step‑by‑Step Tutorial
This comprehensive tutorial walks you through installing prerequisites, creating a new Laravel project, optionally adding Laravel Breeze, configuring Vite, building a Vue component, updating the Blade view, compiling assets, and finally serving the application to see a live Vue component rendered within Laravel.
In this detailed tutorial we explain how to seamlessly integrate Vue.js with Vite into a Laravel project, combining Laravel’s powerful backend capabilities with Vue’s modern, responsive UI and Vite’s fast, optimized build process.
Prerequisites:
Before you begin, ensure the following tools are installed on your system:
PHP – the server‑side scripting language essential for building dynamic web applications.
Composer – PHP’s dependency manager for handling libraries and packages.
Node.js and npm – the JavaScript runtime and package manager required for frontend development.
Make sure these are correctly installed so the subsequent steps run smoothly.
Step 1: Set up your Laravel project
Open a terminal and run the following commands to create a new Laravel application:
composer create-project --prefer-dist laravel/laravel my-laravel-app
cd my-laravel-appStep 2: Install Laravel Breeze (optional)
Laravel Breeze provides a quick starter kit that includes authentication scaffolding and Vue.js integration via Vite. Although optional, it is recommended for rapid setup.
composer require laravel/breeze --dev
php artisan breeze:install vue
npm installIf you prefer not to use Laravel Breeze, you can manually configure Vue with Vite: npm install vite vue @vitejs/plugin-vue Also, edit your vite.config.js file and add the following configuration:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
vue(),
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
},
},
});Step 3: Set up a Vue component
Ensure the resources/js/components directory exists. Create a file named ExampleComponent.vue with the following content:
<template>
<div>
<h1>Hello Vue!</h1>
</div>
</template>
<script setup>
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>Step 4: Add the component to welcome.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel with Vue and Vite</title>
@vite('resources/js/app.js')
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
</body>
</html>Compile the assets: npm run dev Serve the Laravel application: php artisan serve Open your browser and navigate to http://localhost:8000. You should see the Vue component rendering the greeting “Hello Vue!”.
Congratulations! You have successfully integrated Vue.js into your Laravel project and can now start building more complex, interactive components.
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.