No match found for location with path - Laravel 8 and Vue 3 - laravel

Hi I have read that this question is already answered but that answer did not work to me.. I have my code like this:
/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/login',
name: 'login',
component: () => import('../views/LoginView.vue')
}
]
const router = createRouter({
history: createWebHistory('/laravel-vue3/'),
routes
})
export default router
My app.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
createApp(App).use(router).mount('#app');
My .htaccess works without public in the path.
I am working in localhost so I go http://localhost/laravel-vue3 to go to the website
BUT it does not work.
I have my router view in App.vue like this:
<template>
<div>
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="">
Portal Conecta Mayor
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav me-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ms-auto">
<!-- Authentication Links -->
<li class="nav-item">
<router-link class="nav-link" to="/login">Login</router-link>
</li>
<li class="nav-item">
<a class="nav-link" href="">Register</a>
</li>
</ul>
</div>
<router-view />
</div>
</nav>
</div>
</template>
<script>
export default {
}
</script>
When I go to http:localhost/larave-vue3 it opens my App.vue and it works BUT I receive this message:
[Vue Router warn]: No match found for location with path "/laravel-vue3/"
I added that to history: createWebHistory and it still does not work.
When I click login it displays this error:
Look the error
How can I fix the router problem in vue 3 with Laravel 8? Thanks

Related

Laravel nova custom card vue file - how to set href attribute to external url

So I have made a custom card in Laravel nova and I want to pass in a URL as metadata and set the href attribute of a link to that URL.
It works but Vue keeps setting the URL to be an internal URL:
I want it to be :
http://foo.peoplebase.test/admin
but when I click the link I end up with is:
http://peoplebase.test/admin/dashboards/http//:foo.peoplebase.test
Here is the Vue file
<template>
<card class="flex flex-col items-center justify-center">
<div class="px-3 py-3">
<h1 class="text-center text-3xl text-80 font-light">{{ card.title }}</h1>
</div>
<div class="px-3 py-3">
<a :href="'http//:' + card.domain + '.peoplebase.test'" class="btn btn-default btn-primary inline-flex items-center relative" target="_blank">Website</a>
<a :href="'http//:' + card.domain + '.peoplebase.test/admin'" class="btn btn-default btn-primary inline-flex items-center relative" target="_blank">Backend</a>
Settings
</div>
</card>
</template>
<script>
export default {
props: [
'card',
// The following props are only available on resource detail cards...
// 'resource',
// 'resourceId',
// 'resourceName',
],
mounted() {
//
},
}
</script>
The normal href on the third link works fine but the dynaimc :href does not.
What am I missing here?
You have a typo! that's why it's not working as expected!
<a :href="'http//:'
change the http//: to http://
<a :href="'http://'

Adding laravel blade content in adminLTE

I have a problem attaching blade content in the adminLTE dashboard starter package. I am also using vue js components and they are displayed well using router-link. Am managing users with pure laravel without vue Js and I want to include that blade in the same dashboard. Is this possible?
my code:
<li class="nav-item">
<router-link to="/customer" class="nav-link">
<i class="nav-icon fas fa-user text-orange"></i>
<p>
Locations
</p>
</router-link>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-cog text-green"></i>
<p>
Management
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{route('usertab')}}" class="nav-link">// I want to include it here
<i class="fas fa-users nav-icon text-teal "></i>
<p>Usersx</p>
</a>
</li>
</ul>
I have added this to content section.
<div class="content-wrapper">
<div class="container-fluid">
<router-view></router-view>
#if(Request::is('/usertab')) //but this is not working
#yield('content')
#endif
</div>
</div>
My router link
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let routes = [
{ path: '/userbio', component: require('./components/UserBioComponent.vue').default},
{ path: '/users', component: require('./components/UsersComponent.vue').default},
{ path: '/customer', component: require('./components/LocationComponent.vue').default},
]
and my blade web route
Route::get('usertab','AdminController#getuserall')->name('usertab');
Any idea to this

TypeError: this.axios is undefined

I'm having this error in browser console, no matter what I did.
First of all I'm new in VueJS. My site is fully functioning, it's build with Laravel. I am trying to convert the frontend to VueJS. I'm trying retrieve data from database and show them in front page using VueJS.
app.js
require('./bootstrap');
window.Vue = require('vue');
//Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('title-bar',require('./components/front/titleBar.vue').default);
Vue.component('info-bar',require('./components/front/infoBar.vue').default);
import axios from 'axios';
Vue.use(axios);
const app = new Vue({
el: '#app',
});
infoBar.js
<template>
<div class="container">
<div class="row align-items-center justify-content-between mx-0">
<ul class="list-inline d-none d-lg-block mb-0">
<li class="list-inline-item mr-3">
<div class="d-flex align-items-center">
<i class="ti-email mr-2"></i>
{{ info.email }}
</div>
</li>
<li class="list-inline-item mr-3">
<div class="d-flex align-items-center">
<i class="ti-headphone mr-2"></i>
{{ info.phone }}
</div>
</li>
</ul>
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0 p-3 border-right border-left border-white-0_1">
<span>EIIN: {{ info.eiin }}</span>
</li>
<li class="list-inline-item mr-0 p-3 border-right border-white-0_1">
<span>Institute Code: {{ info.code }}</span>
</li>
</ul>
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0 p-md-3 p-2 border-right border-left border-white-0_1">
Login
</li>
</ul>
</div> <!-- END END row-->
</div> <!-- END container-->
</template>
<script>
export default {
data() {
return {
info: {}
}
},
created() {
this.axios
.get('http://localhost/wpschool/public/api/info-bar')
.then(response => {
this.info = response.data;
console.log(response.data)
});
}
}
</script>
api.php
<?php
use Illuminate\Http\Request;
Route::middleware('auth:api')->get('/user', function (Request $request) {
return $request->user();
});
Route::get('info-bar','FrontController#infoBar');
Route::get('title-bar','FrontController#titleBar');
controller
public function infoBar()
{
$info = [
'email' => siteConfig('email'),
'phone' => siteConfig('phone'),
'eiin' => siteConfig('eiin'),
'code' => siteConfig('institute_code')
];
return response($info);
}
In Vue console the <info-bar> component is returning with empty object. The console is returning with two errors about axios
[Vue warn]: Error in created hook: "TypeError: this.axios is undefined"
found in
---> at resources/js/components/front/infoBar.vue
and
TypeError: this.axios is undefined
Choo 29
I tried reinstalling axios but same result.
Inside app.js add this line of code:
Vue.prototype.axios = axios;
After this statement, you can use this.axios inside every Vue component
On app.js, use
window.axios = require("axios");
// instead of
import axios from 'axios';
Vue.use(axios);
on Vue files, use like this:
axios.get(...)

how i can use vuejs component in laravel blade?

the idea is to use vue component inside file blade but i got this error
Failed to mount component: template or render function not defined.
this my importation in app.js
Vue.component('Notification' ,require('./components/Notification.vue'));
this my component code
<template>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="fas fa-bell"></i> <span class="badge badge-light">{{unreads.length}}</span>
<span class="badge badge-warning navbar-badge"></span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<notification-item> </notification-item>
</div>
</li>
</template>
<script>
export default {
props :['unreads','userid'],
mounted() {
Echo.private('App.User.'+ this.userid)
.notification((notification) => {
console.log(notification);
});
}
}
</script>
and finally this my code in home.blade.php
<Notification :userid="{{auth()->id()}}" :unreads="{{auth()->user()->unreadNotifications}}"> </Notification>
someone help me please
Compile vuejs files via npm run dev and make sure that you use the correct binding for userid and include app.js into scripts.

Laravel Vuejs [Vue warn]: Unknown custom element: <router-link>

I'm trying to make this crud app with authentication. But i'm experiencing this error:
app.js:38573 [Vue warn]: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Navbar> at resources/js/components/Navbar.vue
<Root>
I already installed vue router via npm and imported vue-router in my app.js
app.js:
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.component('navbar', require('./components/Navbar.vue').default);
Vue.component('customers', require('./components/Customers.vue').default);
Vue.component('login', require('./components/auth/Login.vue').default);
const app = new Vue({
el: '#app',
});
Navbar.vue:
<template>
<div id="app">
<nav class="navbar navbar-expand-sm navbar-light mb-2 " style="background-color: #007E33;">
<div class="container">
<div class="container">
</div>
<form class="form-inline my-2 my-lg-0 navbar-nav ml-auto">
<ul class="nav" >
<li class="form-inline" v-if="!loggedIn"><router-link :to="{ name: 'login' }" style="color: #fafafa;"> Login </router-link></li>
<li v-if="!loggedIn"><router-link :to="{ name: 'register' }" style="color: #fafafa;"> Register </router-link></li>
<li v-if="loggedIn"><router-link :to="{ name: 'logout' }" style="color: #fafafa;"> Logout </router-link></li>
</ul>
</form>
<!-- Login -->
</div>
</nav>
</div>
</template>
Thanks and cheers!
Try to enclose name attribute in quotes. Try the below code:
change :to="{ name: 'register' }" To :to="{ 'name': 'register' }"

Resources