How to use Vue router inside of Laravel?

Question

I develop with laravel9 and vue3.

My problem is simple, But path setting is not go well.

When I access url localhost:8080/tasks

This url return 404 not found and I get the following type error

GET http://localhost:8000/tasks 404 (Not Found)

I didn't know the reason , but When I rewrite path: /tasks to path /, localhost:8080 return Component that I want to need.

I have 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");

Please focus on how to properly highlight your code rather than writing spam in your message. — kissu, Oct 30 '22 at 09:42
I don't have experience with Laravel but this kind of problem can usually be solved by routing all the paths in Laravel to `index.html` and letting Vue do the remaining job — Duannx, Oct 31 '22 at 01:57
I found the solution. add the code below in web.php Route::get('{any?}', function () { return view('welcome'); })->where('any', '.*'); — sora sakamoto, Nov 02 '22 at 05:31

score 2 · Accepted Answer · answered Nov 02 '22 at 05:42

2

The following in web.php fixed the issue

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

answered Nov 02 '22 at 05:42

kissu

40,416
14
65
133

kissu · Answer 2 · 2022-10-30T11:07:46.173

1

I created a project using Vue's CLI, then proceeded to check all the relevant parts.

I took your code and applied the various changes:

my entry point is main.js, rather than bootstrap.js but no changes code-wise
in App.vue, I don't have any HeaderComponent but it's should not be an issue anyway
in router/index.js, I only changed the following for the component since it's better to use an alias than a relative path anyway

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

Launching the server with

pnpm dev

gives me some port, once followed to the /tasks path, I can see the component as expected.

The route is properly defined too

Here is my project directory

And I don't have any errors in the console.

Here is public github repo: https://github.com/kissu/so-v3-working-router

edited Oct 30 '22 at 11:07

answered Oct 30 '22 at 10:50

kissu

40,416
14
65
133

Thank you so much! but actually, I tried this code in create vue and vue CLI and did well. I 'm trying with laravel9 and vue3. perhaps, This may happen the problem. https://stackoverflow.com/questions/71856260/vue-3-router-with-laravel. this post is the same problem as mine. Thank you for going out of your way to implement vue development with my code. – sora sakamoto Oct 30 '22 at 11:57
@sorasakamoto oh, I guess you're using Vue **inside** of Laravel here. I don't know how to debug that one unfortunately since I don't have any experience with Laravel, sorry. – kissu Oct 30 '22 at 12:00

How to use Vue router inside of Laravel?

2 Answers2

Linked