koti42 Bu örnekte vue-router yok, uygulama SPA olarak çalışmayacak, frontend her link değişmesinde baştan yüklenecek, kısacası Vue kullanmıyor olacaksınız.
Laravel uygulamanız ayrı bir repo olacak, Vue ayrı bir repo. Laravel RESTFul API şeklinde kodlanacak. Auth için Sanctum kullanacaksınız. Vue ile birlikte vue-router da kuracaksınız ve frontend rotalarınızı ve istek atıldığında hangi componentleri mount edeceğini belirleeyceksiniz. Örneğin /users linkine gidildiğinde /users/Index.vue componenti mount olacak. Index.vue componenti içerisinde onMounted olayı içinde axios ile Laravel backend'inize istek atacaksınız ve veriyi json olarak alıp reaktif bir şekilde component içerisinde kullanacaksınız
UserController.php:
public function index(Request $request)
{
return UserResource::collection(
User::all()
);
}
routes/api.php:
Route::middleware('auth:sanctum')->group(function() {
Route::resource('users', UserController::class)->name('users')
});
users/Index.vue:
<template>
<h1>Kullanıcılar</h1>
<div v-if="loading">Yükleniyor...</div>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul>
</template>
<script>
import {onMounted, ref} from 'vue'
export default {
setup() {
const users = ref([])
const loading = ref(true)
onMounted(() => {
axios.get('/api/users')
.then(response => users.value = response.data)
.catch(error => console.log(error))
.then(() => loading.value = false)
})
return {
users,
loading,
}
}
}
</script>
Kabaca böyle. Arada bir de vue-router kısmı var onu da burada görebilirsiniz: https://next.router.vuejs.org/guide/ Yazmaktan sıkıldım, siz bakın örneğe.
Her gördüğünüz makaleye "doğrusu bu" şeklinde yaklaşmayın, bol bol doküman okuyun, özellikle de resmi dokümanları.