Laravel versions 7 and earlier include Vue.js by default, but from Laravel 8 you must manually integrate it; 2. To set up Vue 3, install Vue and Vite plugins, configure vite.config.js, update app.js to use createApp, and use @vite in Blade templates; 3. Vue communicates with Laravel via API routes that return JSON, fetched using fetch or Axios in components; 4. Best practices include using Laravel Sanctum for authentication, keeping components modular, choosing between hybrid rendering and SPAs, and using Vite for modern builds—Laravel handles the backend while Vue manages dynamic frontend interactivity in a powerful full-stack combination.
Using Vue.js with Laravel is a common and powerful combination — Laravel handles the backend (API or server-side rendering), while Vue.js manages the frontend with reactive, component-based UIs. Here's how to set it up and use them together effectively.
1. Laravel Comes with Vue.js by Default (Legacy Versions)
In Laravel versions 7 and earlier, Vue.js was included as the default frontend scaffolding. While Laravel 8 moved toward being more framework-agnostic (removing default frontend presets), you can still easily integrate Vue.
If you're using an older Laravel version or manually added Vue:
- Laravel uses Webpack (via Laravel Mix) to compile assets.
- The main entry point is usually
resources/js/app.js. - Vue components go in
resources/js/components/.
To get started:
# Install dependencies npm install # Install Vue (if not already present) npm install vue@^2.6 # For Vue 2 # OR npm install vue@^3.0 # For Vue 3
Then enable Vue in resources/js/app.js:
import Vue from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';
const app = new Vue({
el: '#app',
components: {
ExampleComponent
}
});And in your Blade file (resources/views/welcome.blade.php):
<div id="app">
<example-component></example-component>
</div>
<script src="{{ mix('js/app.js') }}"></script>Compile assets:
npm run dev # or npm run watch # for real-time updates
2. Set Up Vue 3 with Laravel (Manual Setup)
Since Laravel no longer includes Vue by default, here’s how to set up Vue 3 manually.
Step 1: Install Vue 3 and Laravel Mix
npm install vue@next npm install --save-dev @vitejs/plugin-vue
Note: New Laravel projects use Vite by default instead of Webpack. Use Vite plugins for better performance.
Step 2: Configure Vite (if using Laravel 9 )
Update vite.config.js:
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({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});Step 3: Update resources/js/app.js
import { createApp } from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';
createApp(ExampleComponent).mount('#app');Step 4: Use in Blade Template
<!DOCTYPE html>
<html>
<head>
<title>Vue with Laravel</title>
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Run dev server:
npm run dev
3. Communicating with Laravel Backend (API)
Vue typically fetches data from Laravel via API routes.
Create an API route in Laravel (routes/api.php):
use App\Http\Controllers\PostController;
Route::get('/posts', [PostController::class, 'index']);Return JSON from Controller:
class PostController extends Controller
{
public function index()
{
return response()->json(Post::all());
}
}Fetch in Vue Component:
<template>
<div>
<h1>Posts</h1>
<ul>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
posts: []
}
},
async mounted() {
const response = await fetch('/api/posts');
this.posts = await response.json();
}
}
</script>For more robust HTTP handling, use Axios:
npm install axios
import axios from 'axios';
// Inside your component method
const response = await axios.get('/api/posts');
this.posts = response.data;4. Best Practices & Tips
- Use Laravel Sanctum for API authentication if your Vue app needs user login.
- Keep Vue components modular and reusable.
- Use Vue Router (for SPAs) or stick with Blade Vue hybrid rendering depending on your app structure.
- For larger apps, consider a separate frontend (e.g., Nuxt.js or standalone Vue) communicating via API.
- Use
@vitedirectives instead ofmix()when using Vite.
Summary
- Laravel provides the backend and asset pipeline.
- Vue.js enhances the frontend with dynamic components.
- Use Vite (modern) or Laravel Mix (legacy) to compile Vue.
- Communicate via API routes returning JSON.
- Combine Blade templates with Vue for hybrid apps, or go full SPA.
Basically, Laravel serves as a backend API or page renderer, and Vue takes over the interactivity — a solid combo for full-stack apps.
The above is the detailed content of How to use Vue.js with Laravel?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Creating Custom Validation Rules in a Laravel Project
Jul 04, 2025 am 01:03 AM
There are three ways to add custom validation rules in Laravel: using closures, Rule classes, and form requests. 1. Use closures to be suitable for lightweight verification, such as preventing the user name "admin"; 2. Create Rule classes (such as ValidUsernameRule) to make complex logic clearer and maintainable; 3. Integrate multiple rules in form requests and centrally manage verification logic. At the same time, you can set prompts through custom messages methods or incoming error message arrays to improve flexibility and maintainability.
Adding multilingual support to a Laravel application
Jul 03, 2025 am 01:17 AM
The core methods for Laravel applications to implement multilingual support include: setting language files, dynamic language switching, translation URL routing, and managing translation keys in Blade templates. First, organize the strings of each language in the corresponding folders (such as en, es, fr) in the /resources/lang directory, and define the translation content by returning the associative array; 2. Translate the key value through the \_\_() helper function call, and use App::setLocale() to combine session or routing parameters to realize language switching; 3. For translation URLs, paths can be defined for different languages ??through prefixed routing groups, or route alias in language files dynamically mapped; 4. Keep the translation keys concise and
Working with pivot tables in Laravel Many-to-Many relationships
Jul 07, 2025 am 01:06 AM
ToworkeffectivelywithpivottablesinLaravel,firstaccesspivotdatausingwithPivot()orwithTimestamps(),thenupdateentrieswithupdateExistingPivot(),managerelationshipsviadetach()andsync(),andusecustompivotmodelswhenneeded.1.UsewithPivot()toincludespecificcol
Sending different types of notifications with Laravel
Jul 06, 2025 am 12:52 AM
Laravelprovidesacleanandflexiblewaytosendnotificationsviamultiplechannelslikeemail,SMS,in-appalerts,andpushnotifications.Youdefinenotificationchannelsinthevia()methodofanotificationclass,andimplementspecificmethodsliketoMail(),toDatabase(),ortoVonage
Understanding and creating custom Service Providers in Laravel
Jul 03, 2025 am 01:35 AM
ServiceProvider is the core mechanism used in the Laravel framework for registering services and initializing logic. You can create a custom ServiceProvider through the Artisan command; 1. The register method is used to bind services, register singletons, set aliases, etc., and other services that have not yet been loaded cannot be called; 2. The boot method runs after all services are registered and is used to register event listeners, view synthesizers, middleware and other logic that depends on other services; common uses include binding interfaces and implementations, registering Facades, loading configurations, registering command-line instructions and view components; it is recommended to centralize relevant bindings to a ServiceProvider to manage, and pay attention to registration
Understanding Dependency Injection in Laravel?
Jul 05, 2025 am 02:01 AM
Dependency injection automatically handles class dependencies through service containers in Laravel without manual new objects. Its core is constructor injection and method injection, such as automatically passing in the Request instance in the controller. Laravel parses dependencies through type prompts and recursively creates the required objects. The binding interface and implementation can be used by the service provider to use the bind method, or singleton to bind a singleton. When using it, you need to ensure type prompts, avoid constructor complications, use context bindings with caution, and understand automatic parsing rules. Mastering these can improve code flexibility and maintenance.
Strategies for optimizing Laravel application performance
Jul 09, 2025 am 03:00 AM
Laravel performance optimization can improve application efficiency through four core directions. 1. Use the cache mechanism to reduce duplicate queries, store infrequently changing data through Cache::remember() and other methods to reduce database access frequency; 2. Optimize database from the model to query statements, avoid N 1 queries, specifying field queries, adding indexes, paging processing and reading and writing separation, and reduce bottlenecks; 3. Use time-consuming operations such as email sending and file exporting to queue asynchronous processing, use Supervisor to manage workers and set up retry mechanisms; 4. Use middleware and service providers reasonably to avoid complex logic and unnecessary initialization code, and delay loading of services to improve startup efficiency.
Handling exceptions and logging errors in a Laravel application
Jul 02, 2025 pm 03:24 PM
The core methods for handling exceptions and recording errors in Laravel applications include: 1. Use the App\Exceptions\Handler class to centrally manage unhandled exceptions, and record or notify exception information through the report() method, such as sending Slack notifications; 2. Use Monolog to configure the log system, set the log level and output method in config/logging.php, and enable error and above level logs in production environment. At the same time, detailed exception information can be manually recorded in report() in combination with the context; 3. Customize the render() method to return a unified JSON format error response, improving the collaboration efficiency of the front and back end of the API. These steps are
