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-vueAlso, 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>Compile the assets:
npm run devServe the Laravel application:
php artisan serveOpen 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.
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.