{"id":533,"date":"2025-08-31T08:38:50","date_gmt":"2025-08-31T08:38:50","guid":{"rendered":"https:\/\/1v0.net\/blog\/?p=533"},"modified":"2025-08-31T08:38:51","modified_gmt":"2025-08-31T08:38:51","slug":"integrating-laravel-with-vue-3-for-a-modern-frontend","status":"publish","type":"post","link":"https:\/\/1v0.net\/blog\/integrating-laravel-with-vue-3-for-a-modern-frontend\/","title":{"rendered":"Integrating Laravel with Vue 3 for a Modern Frontend"},"content":{"rendered":"\n

Laravel 12 integrates seamlessly with Vue 3 using Vite. This stack gives you Laravel\u2019s expressive backend and Vue\u2019s reactive UI, ideal for SPAs, dashboards, and highly interactive pages. In this guide, you\u2019ll install Vue 3 via Vite, understand the folder structure, import and mount components correctly, call them from Blade, fetch data from controllers, react to broadcast events, and build a practical login form UI with validation.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Install Vue 3 in a Laravel 12 Project (Vite Setup)<\/strong><\/h2>\n\n\n\n

Laravel 12 uses Vite by default. Add Vue using the official plugin and enable it in your Vite config.<\/p>\n\n\n

npm install vue @vitejs\/plugin-vue<\/code><\/span>Code language:<\/span> Bash<\/span> (<\/span>bash<\/span>)<\/span><\/small><\/pre>\n\n\n
This installs Vue 3 and the official Vite Vue plugin.<\/p>\n\n\n
\/\/ vite.config.js<\/span>\nimport<\/span> { defineConfig } from<\/span> 'vite'<\/span>;\nimport<\/span> laravel from<\/span> 'laravel-vite-plugin'<\/span>;\nimport<\/span> vue from<\/span> '@vitejs\/plugin-vue'<\/span>;\n\nexport<\/span> default<\/span> defineConfig({\n    plugins<\/span>: [\n        laravel({\n            input<\/span>: ['resources\/js\/app.js'<\/span>],\n            refresh<\/span>: true<\/span>,\n        }),\n        vue(),\n    ],\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
This configuration tells Vite to compile resources\/js\/app.js<\/code>, refresh on Blade changes, and process Vue single-file components.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Understanding Vue Folder Structure in Laravel<\/strong><\/h2>\n\n\n\n
Your Vue code lives under resources\/js<\/code>. Here\u2019s the default layout after enabling Vue:<\/p>\n\n\n
resources\/\n \u2514\u2500\u2500 js\/\n      \u251c\u2500\u2500 app.js          \/\/ Vue entry, mounts the app and registers components\n      \u251c\u2500\u2500 bootstrap.js    \/\/ Axios, CSRF, Echo helpers (optional but useful)\n      \u2514\u2500\u2500 components\/\n           \u2514\u2500\u2500 ExampleComponent.vue\n<\/code><\/span>Code language:<\/span> plaintext<\/span> (<\/span>plaintext<\/span>)<\/span><\/small><\/pre>\n\n\n
app.js<\/code> is your entry file. You can mount a single root Vue component, register many components for use inside Blade, or auto-register all components in the folder for convenience.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Working with app.js<\/code>: Three Practical Patterns<\/strong><\/h2>\n\n\n\n
1) Mount a Single Root Component (SPA-style)<\/strong><\/h3>\n\n\n
\/\/ resources\/js\/app.js<\/span>\nimport<\/span> '.\/bootstrap'<\/span>;\nimport<\/span> { createApp } from<\/span> 'vue'<\/span>;\nimport<\/span> ExampleComponent from<\/span> '.\/components\/ExampleComponent.vue'<\/span>;\n\ncreateApp(ExampleComponent).mount('#app'<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Use this when Vue controls the entire page\/app (typical SPA approach).<\/p>\n\n\n\n
2) Register Multiple Components (Blade + Vue hybrid)<\/strong><\/h3>\n\n\n
\/\/ resources\/js\/app.js<\/span>\nimport<\/span> '.\/bootstrap'<\/span>;\nimport<\/span> { createApp } from<\/span> 'vue'<\/span>;\nimport<\/span> ExampleComponent from<\/span> '.\/components\/ExampleComponent.vue'<\/span>;\nimport<\/span> PostList from<\/span> '.\/components\/PostList.vue'<\/span>;\n\nconst<\/span> app = createApp({});\napp.component('example-component'<\/span>, ExampleComponent);\napp.component('post-list'<\/span>, PostList);\napp.mount('#app'<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
This lets you drop Vue widgets into Blade without making the whole page a SPA.<\/p>\n\n\n\n
3) Auto-register All Components (scale easily)<\/strong><\/h3>\n\n\n
\/\/ resources\/js\/app.js<\/span>\nimport<\/span> '.\/bootstrap'<\/span>;\nimport<\/span> { createApp } from<\/span> 'vue'<\/span>;\n\nconst<\/span> app = createApp({});\n\n\/\/ Auto-register .\/components\/*.vue as <ComponentName \/><\/span>\nObject<\/span>.entries(import<\/span>.meta.glob('.\/components\/*.vue'<\/span>, { eager<\/span>: true<\/span> })).forEach(([path, def]<\/span>) =><\/span> {\n    const<\/span> name = path.split('\/'<\/span>).pop().replace('.vue'<\/span>, ''<\/span>);\n    app.component(name, def.default);\n});\n\napp.mount('#app'<\/span>);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Now any .vue<\/code> you add under components\/<\/code> becomes available by its filename (e.g., PostList.vue<\/code> \u2192 <PostList><\/PostList><\/code>).<\/p>\n\n\n\n
<\/div>\n\n\n\n
Create and Call a Vue Component from Blade<\/strong><\/h2>\n\n\n
\/\/ resources\/js\/components\/ExampleComponent.vue<\/span>\n<template>\n  <div<\/span> class<\/span>=\"p-4\"<\/span>><\/span>\n    <h2<\/span>><\/span>Hello from Vue 3!<\/h2<\/span>><\/span>\n    <button<\/span> @click<\/span>=\"count++\"<\/span>><\/span>Clicked {{ count }} times<\/button<\/span>><\/span>\n  <\/div<\/span>><\/span><\/span>\n<\/template>\n\n<script setup>\nimport { ref } from 'vue';\nconst count = ref(0);\n<\/<\/span>script><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
A simple counter using the Composition API. Next, call it from a Blade view and ensure Vite loads app.js<\/code>.<\/p>\n\n\n
\/\/ resources\/views\/welcome.blade.php<\/span>\n<!DOCTYPE html>\n<html lang=\"en\"<\/span>>\n<head>\n  <meta charset=\"UTF-8\"<\/span>>\n  <title>Laravel + Vue 3<\/span><\/title>\n  @vite('resources\/js\/app.js'<\/span>)\n<\/head>\n<body>\n  <div id=\"app\"<\/span>>\n    <example-component><\/example-component>\n  <\/div>\n<\/body>\n<\/html><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
With pattern #2 or #3 in app.js<\/code>, the component renders where you place <example-component><\/code> inside the #app<\/code> container.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Fetch Data from a Controller and Render in Vue<\/strong><\/h2>\n\n\n
\/\/ app\/Http\/Controllers\/PostController.php<\/span>\nnamespace<\/span> App<\/span>\\Http<\/span>\\Controllers<\/span>;\n\nuse<\/span> App<\/span>\\Models<\/span>\\Post<\/span>;\n\nclass<\/span> PostController<\/span> extends<\/span> Controller<\/span>\n<\/span>{\n    public<\/span> function<\/span> index<\/span>()<\/span>\n    <\/span>{\n        return<\/span> response()->json(Post::latest()->get());\n    }\n}<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
A simple endpoint that returns posts as JSON for Vue to consume.<\/p>\n\n\n
\/\/ resources\/js\/components\/PostList.vue<\/span>\n<template>\n  <div<\/span>><\/span>\n    <h2<\/span> class<\/span>=\"mb-2\"<\/span>><\/span>Posts<\/h2<\/span>><\/span>\n    <ul<\/span>><\/span>\n      <li<\/span> v-for<\/span>=\"post in posts\"<\/span> :key<\/span>=\"post.id\"<\/span>><\/span>{{ post.title }}<\/li<\/span>><\/span>\n    <\/ul<\/span>><\/span>\n  <\/div<\/span>><\/span><\/span>\n<\/template>\n\n<script setup>\nimport { ref, onMounted } from 'vue';\nconst posts = ref([]);\n\nonMounted(async () => {\n  const res = await fetch('\/<\/span>posts');\n  posts.value = await res.json();\n});\n<\/script><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The component fetches data on mount and renders a reactive list. Drop <post-list><\/code> into Blade to display it.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Realtime UX with Events (Broadcast + Vue)<\/strong><\/h2>\n\n\n\n
Broadcast Laravel events and listen in Vue to update the UI instantly (e.g., when a new post is created).<\/p>\n\n\n
\/\/ app\/Events\/NewPostCreated.php<\/span>\nnamespace<\/span> App<\/span>\\Events<\/span>;\n\nuse<\/span> App<\/span>\\Models<\/span>\\Post<\/span>;\nuse<\/span> Illuminate<\/span>\\Broadcasting<\/span>\\Channel<\/span>;\nuse<\/span> Illuminate<\/span>\\Contracts<\/span>\\Broadcasting<\/span>\\ShouldBroadcast<\/span>;\n\nclass<\/span> NewPostCreated<\/span> implements<\/span> ShouldBroadcast<\/span>\n<\/span>{\n    public<\/span> $post;\n\n    public<\/span> function<\/span> __construct<\/span>(Post $post)<\/span>\n    <\/span>{\n        $this<\/span>->post = $post;\n    }\n\n    public<\/span> function<\/span> broadcastOn<\/span>()<\/span>\n    <\/span>{\n        return<\/span> new<\/span> Channel('posts'<\/span>);\n    }\n}<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
This event publishes to the public posts<\/code> channel. Configure Laravel Echo (Pusher or Ably) in bootstrap.js<\/code> to subscribe from Vue.<\/p>\n\n\n
\/\/ resources\/js\/components\/PostList.vue (add listener)<\/span>\n<script setup>\nimport<\/span> { ref, onMounted } from<\/span> 'vue'<\/span>;\n\nconst<\/span> posts = ref([]);\n\nonMounted(async<\/span> () => {\n  const<\/span> res = await<\/span> fetch('\/posts'<\/span>);\n  posts.value = await<\/span> res.json();\n\n  if<\/span> (window<\/span>.Echo) {\n    window<\/span>.Echo.channel('posts'<\/span>)\n      .listen('NewPostCreated'<\/span>, (e) => {\n        posts.value.unshift(e.post);\n      });\n  }\n});\n<\/script><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
When NewPostCreated<\/code> is fired on the server, the UI prepends the new post instantly for users connected to the channel.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Build a Vue Login Form UI (Controller + Validation)<\/strong><\/h2>\n\n\n\n
Let\u2019s create a practical login UI in Vue that talks to a Laravel controller, validates input, and shows server error messages cleanly.<\/p>\n\n\n
\/\/ resources\/js\/components\/LoginForm.vue<\/span>\n<template>\n  <form<\/span> @submit.prevent<\/span>=\"submit\"<\/span> class<\/span>=\"max-w-sm\"<\/span>><\/span>\n    <h2<\/span> class<\/span>=\"mb-3\"<\/span>><\/span>Login<\/h2<\/span>><\/span>\n\n    <div<\/span> class<\/span>=\"mb-2\"<\/span>><\/span>\n      <label<\/span> for<\/span>=\"email\"<\/span>><\/span>Email<\/label<\/span>><\/span>\n      <input<\/span> id<\/span>=\"email\"<\/span> v-model<\/span>=\"form.email\"<\/span> type<\/span>=\"email\"<\/span> required<\/span> \/><\/span>\n      <p<\/span> v-if<\/span>=\"errors.email\"<\/span> class<\/span>=\"text-danger\"<\/span>><\/span>{{ errors.email }}<\/p<\/span>><\/span>\n    <\/div<\/span>><\/span>\n\n    <div<\/span> class<\/span>=\"mb-3\"<\/span>><\/span>\n      <label<\/span> for<\/span>=\"password\"<\/span>><\/span>Password<\/label<\/span>><\/span>\n      <input<\/span> id<\/span>=\"password\"<\/span> v-model<\/span>=\"form.password\"<\/span> type<\/span>=\"password\"<\/span> required<\/span> \/><\/span>\n      <p<\/span> v-if<\/span>=\"errors.password\"<\/span> class<\/span>=\"text-danger\"<\/span>><\/span>{{ errors.password }}<\/p<\/span>><\/span>\n    <\/div<\/span>><\/span>\n\n    <button<\/span> type<\/span>=\"submit\"<\/span>><\/span>Sign in<\/button<\/span>><\/span>\n    <p<\/span> v-if<\/span>=\"errors.global\"<\/span> class<\/span>=\"text-danger mt-2\"<\/span>><\/span>{{ errors.global }}<\/p<\/span>><\/span>\n  <\/form<\/span>><\/span><\/span>\n<\/template>\n\n<script setup>\nimport { reactive } from 'vue';\n\nconst form = reactive({ email: '', password: '' });\nconst errors = reactive({ email: '', password: '', global: '' });\n\nasync function submit() {\n  errors.email = errors.password = errors.global = '';\n\n  const res = await fetch('\/<\/span>login', {\n    method: '<\/span>POST',\n    headers: {\n      '<\/span>Content-Type': '<\/span>application\/json',\n      '<\/span>X-CSRF-TOKEN': document.querySelector('<\/span>meta[name=\"csrf-token\"<\/span>]').content\n    },\n    body: JSON.stringify(form)\n  });\n\n  if (res.ok) {\n    window.location.href = '<\/span>\/dashboard';\n    return;\n  }\n\n  if (res.status === 422) {\n    const data = await res.json();\n    errors.email = data.errors?.email?.[0] || '<\/span>';\n    errors.password = data.errors?.password?.[0] || '<\/span>';\n  } else {\n    errors.global = '<\/span>Invalid credentials or server error.';\n  }\n}\n<\/script><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The component posts JSON to \/login<\/code> with a CSRF token, handles validation (422) errors, and redirects on success.<\/p>\n\n\n
\/\/ resources\/views\/auth\/login.blade.php<\/span>\n<!doctype html>\n<html lang=\"en\"<\/span>>\n<head>\n  <meta charset=\"utf-8\"<\/span>>\n  <meta name=\"csrf-token\"<\/span> content=\"{{ csrf_token() }}\"<\/span>>\n  <title>Login<\/title>\n  @vite('resources\/js\/app.js'<\/span>)\n<\/head>\n<body>\n  <div id=\"app\"<\/span>>\n    <LoginForm><\/LoginForm>\n  <\/div>\n<\/body>\n<\/html><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
The Blade view provides the CSRF token meta tag and mounts the <LoginForm><\/code> component inside #app<\/code>.<\/p>\n\n\n
\/\/ app\/Http\/Controllers\/Auth\/LoginController.php<\/span>\nnamespace<\/span> App<\/span>\\Http<\/span>\\Controllers<\/span>\\Auth<\/span>;\n\nuse<\/span> App<\/span>\\Http<\/span>\\Controllers<\/span>\\Controller<\/span>;\nuse<\/span> Illuminate<\/span>\\Http<\/span>\\Request<\/span>;\nuse<\/span> Illuminate<\/span>\\Support<\/span>\\Facades<\/span>\\Auth<\/span>;\nuse<\/span> Illuminate<\/span>\\Validation<\/span>\\ValidationException<\/span>;\n\nclass<\/span> LoginController<\/span> extends<\/span> Controller<\/span>\n<\/span>{\n    public<\/span> function<\/span> __invoke<\/span>(Request $request)<\/span>\n    <\/span>{\n        $validated = $request->validate([\n            'email'<\/span> => 'required|email'<\/span>,\n            'password'<\/span> => 'required|string|min:6'<\/span>,\n        ]);\n\n        if<\/span> (Auth::attempt($validated, true<\/span>)) {\n            $request->session()->regenerate();\n            return<\/span> response()->json(['ok'<\/span> => true<\/span>]);\n        }\n\n        throw<\/span> ValidationException::withMessages([\n            'email'<\/span> => ['These credentials do not match our records.'<\/span>],\n        ]);\n    }\n}<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
The single-action controller validates the request, attempts login, regenerates the session, and returns JSON. On failure it throws a 422 with field errors that Vue shows inline.<\/p>\n\n\n
\/\/ routes\/web.php<\/span>\nuse<\/span> App<\/span>\\Http<\/span>\\Controllers<\/span>\\Auth<\/span>\\LoginController<\/span>;\n\nRoute::view('\/login'<\/span>, 'auth.login'<\/span>)->name('login'<\/span>);\nRoute::post('\/login'<\/span>, LoginController::class);\nRoute::get('\/dashboard'<\/span>, fn () => view('dashboard'<\/span>))->middleware('auth'<\/span>);<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
These routes render the login page, handle the POST login, and protect the dashboard behind auth<\/code> middleware.<\/p>\n\n\n\n
Related deep dives: Mastering Validation Rules in Laravel 12<\/a>, How to Add Authentication in Laravel 12 (Without Fortify)<\/a>.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Wrapping Up<\/strong><\/h2>\n\n\n\n
You integrated Vue 3 into Laravel with Vite, learned the folder structure, registered and mounted components, called them from Blade, fetched data from controllers, reacted to broadcast events, and built a production-ready login form UI with validation. This Laravel + Vue approach pairs a clean backend with a delightful, reactive frontend\u2014perfect for modern apps.<\/p>\n\n\n\n
<\/div>\n\n\n\n
What\u2019s Next<\/strong><\/h2>\n\n\n\n
Level up your stack with these related guides:<\/p>\n\n\n\n