How to use Vue with Laravel?

First, I just want to provide context on how I came up with this question. I just finished Laravel 8 From Scratch series like a week ago. After that, I started learning Vue by watching the Learn Vue 3: Step by Step series. Currently, I'm half way of the series. I'm aware I'm not yet done watching the whole thing but, I remember Jeffrey saying a few episodes back that he did intend to not use Laravel in the series since there are people who might want to learn Vue but not use it with Laravel or just use it with other backend framework.

Now, my general thought is, how would I integrate Vue in my Laravel app? assuming that I'm making a fullstack app. From the Vue series I learned that Vue has its own router, well Laravel has its own router too. So, this really made me wonder more on how would I use both of them. I also made a post before asking which one I should learn first Vue or Inertia, I learned that Inertia is basically just a tool that connects Laravel and Vue or some other framework. So, I thought maybe Inertia was the missing piece. But then again that made me wonder, how would I develop a fullstack app with just Laravel + Vue? Vue having a router really confused me.

This is really just a thought that has been bugging me and that I wanted to discuss, I hope people here don't mind me asking dumb questions like this.

Ben Taylor

2 years ago

Level 35

It's not a dumb question, but it depends on what kind of app you want to build.

You could use Vue as an SPA with laravel as an API backend. In that case you would use the Vue router to control navigation to the different pages of your app, and the laravel router would just handle API requests.

You could build a regular MPA with a Vue instance initiated on each page through which you can sprinkle in Vue components among your blade stuff.

Or you can go the inertia route and use Vue with that. I would probably recommend the third approach. The easiest way to get started with that is by following the documentation in installing either breeze or Jetstream with the inertia option. https://laravel.com/docs/10.x/starter-kits#breeze-and-inertia

1 like

betterMelon

2 years ago

Level 2

@Ben Taylor Okay first of all thanks for answering my question.

Now I just want to make sure I understand what you said so I will try to reiterate.

If it is an SPA, Laravel's job would basically be just to receive and send data to Vue, unlike the traditional way (idk how to put it but) the way that it was taught in the Laravel Series, Laravel returns a view sometimes along with a set of data. But in this case Laravel would just return the data or send it to Vue then, Vue would put it in the Vue view then display it using the Vue Route. In short, Vue Route returns the View and Laravel returns or sends the data to Vue. Vue requests data -> Laravel sends the data -> Vue puts the necessary data in the view -> Vue Route displays the view.

Then, with MPA, Vue would be used like how blade is used, I guess theres really not much into this when used this way, except for the fact that I get to have the reactivity of Vue.

With the inertia route, I haven't really started learning Inertia (but I will do so after the Vue series), I have a question about the third approach you recommended. Let's say I wanted to start fresh and really learn the basics and the setup stuff, could I just install Vue and Inertia independently and work from there or does the Laravel Starter kit do something in the back that I wouldn't get from installing them independently ofc only in regards with Vue and Inertia cuz I've read about breeze and it does the authentication stuff out of the box.

MaverickChan

2 years ago

Level 47

yes you can pass inertia. in short , using laravel and vue is like put your spa front end and api back end at the same domain.

in your welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        @vite(['resources/js/app.js','resources/css/app.css'])
    </head>
    <body class="antialiased">
        <div id="app">

        </div>
    </body>
</html>

routes.php file:

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/

Route::any('/{any}', function () {
    return view('welcome');
})->where(['any' => '.*']);

app.js

import './bootstrap';

import { createApp } from 'vue'
import App from './App.vue'
import router from './routes'

const app = createApp(App)

app.use(router).mount('#app')

app.vue

<template>
    <div>
        <router-view />
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

routes.js

import { createRouter, createWebHistory } from "vue-router"

const routes = [
    {
        path: '/',
        component: () => import('./views/Home.vue'),
        name: 'Home',
    },
    { 
        path: '/:pathMatch(.*)*',
        name: 'NotFound',
        component: () => import('./views/NotFound.vue'),
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes,
})

export default router

then write your own home.vue, notfound.vue and other files. and write your backend code like noraml, you can use api call to fetch data.

because front end and back end are at the same domain, you don't need to setup sanctum anything.

2 likes

betterMelon

2 years ago

Level 2

@MaverickChan Thanks a lot, I appreciate the example. But does this mean I still need to have a view page on my Laravel like the welcome view in your example. I kinda get the gist of the Route::any but dont really understand it yet, I guess its for the initial load of the app? or when we go to a url it still hits the Laravel server then kinda passes it to the vue route?

MaverickChan

2 years ago

Level 47

@betterMelon yes consider it is the index.html of your pure front end project.

you need to do that in your routes/web.php file , so to let the vue-router handle the routes.

1 like

betterMelon

2 years ago

Level 2

@MaverickChan Got it, I tested it earlier, but this makes me more excited to learn Inertia considering the overwhelming positives I've read about it when used with Laravel and Vue. Thanks a lot man!

Please or to participate in this conversation.