Using Vue Router with Laravel: A step-by-step guide

Question

I use laravel9 and vue3 for development.

My problem is very simple, but the path setting is not smooth.

When I visit the url localhost:8080/tasks

This URL returns 404 Not Found and I get the following type error

Get http://localhost:8000/tasks 404 (not found)

I don't know why, but when I rewrite the path: /tasks to the path /, localhost:8080 returns the components I want.

I have the following files.

router.js

import { createRouter, createWebHistory } from "vue-router";
import TaskListComponent from "./components/TaskListComponent.vue";


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

        {
            path: '/tasks',
            name: 'tasks.list',
            component: TaskListComponent
        }
    ]
})

export default router

App.vue

<script setup>
import HeaderComponent from "./components/HeaderComponent.vue";
</script>

<template>
    <HeaderComponent />
    <router-view></router-view>
</template>

bootstrap.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router.js"

const app = createApp(App);

app.use(router);

app.mount("#app");

Answer 1

I created a project using Vue's CLI and then went ahead and checked out all the relevant parts.

I took your code and applied various changes:

• My entry point is main.js instead of bootstrap.js, but there is no change in code
• In App.vue I don't have any HeaderComponent, but it shouldn't be a problem anyway
• In router/index.js I only changed the following content of the component since using aliases is better than using relative paths anyway

import TaskListComponent from "@/components/TaskListComponent.vue"

Start server

pnpm dev

gave me some ports and once I got to the /tasks path I could see the component as expected.

Routes are also correctly defined

This is my project directory

There are no errors in the console.

---

Here is the public github repository: https://github.com/kissu/so-v3-work-router

Answer 2

The following in

web.php fixes the issue

Route::get('{any?}', function () {
    return view('welcome');
})->where('any', '.*');