When i design a website i typically serve a fresh view with the information it needs, and then use vue to interact with it and whenever the user makes a change ( like adding an item to a list) i send a request to the server for the updated information
An example with pseudo code (simplified a lot):
User visits /component -> Laravel serves the request and send through a component.blade.php
User clicks delete, Vue sends it's delete request and sends a get request for updated data
component.blade.php
<component items="{{ $items }}"></component>
component.vue
<template>
<button @click="add">Add to List</button>
<ul>
<li v-for="item in items">{{ item.name }} <button @click="delete(item)">delete</button></li>
</ul>
</template>
<script>
export default
{
props:{
items: {}
},
methods:{
add: function(){
// send add request
// this.refresh()
},
delete: function(item){
// send delete request
// this.refresh()
},
refresh: function(){
// get request to fetch items
}
}
}
This way when the user loads the page first time, fresh data is sent in and the page can function as a single page application without refreshes
The API you create is what Vue uses to fetch data, the same routes your API clients would use
and the Web route is what laravel will use to serve your basic route data.
The split here makes it so laravel functions both as an API service and you can keep your generic page logic seperated from your API logic
