Jul 12, 2022
0
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"
}
}
Please or to participate in this conversation.