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
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://'
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
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(...)
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.
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' }"