Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

lat4732's avatar
Level 12

Troubles running vue-router

Hello everyone!

After many, many hours of trying to run a Laravel 9 & Vue 3 application with Vue-Router I'm almost giving up.

web.php

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

welcome.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <welcome/>
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

Welcome.vue

<template>
    <div>
        <h5>{{ title }}</h5>
        <p>{{ version }}</p>
    </div>
</template>

<script>
    import { version } from "vue";
    export default {
        setup: ()=>({
            title: 'Hello from laravel 9 and vue.',
            version: version
        })
    }
</script>

app.js

require('./bootstrap');

import { createApp } from 'vue';
import Welcome from './components/Welcome';

const app = createApp({});

app.component('welcome', Welcome);

app.mount('#app');

Now, when I try in this simple configuration to add the vue-router it's always without success. Can you guys guide me how can I implement vue-router inside this fresh installation?

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "watch": "mix watch"
    },
    "devDependencies": {
        "axios": "^0.25",
        "laravel-mix": "^6.0.6",
        "laravel-vite-plugin": "^0.2.1",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^2.9.11",
        "vue-loader": "^17.0.0"
    },
    "dependencies": {
        "vue": "^3.2.36"
    }
}
0 likes
0 replies

Please or to participate in this conversation.