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' }"
Related
I'm confused why it didn't work on my vue file when Im trying to auto import components in my view, the documentation says link you just need to set the components into true inside nuxt.config.js file, I tried but it doesn't work, do I properly import the custom vue?
this is my directory
Components
>Timeline.vue
>TimelineItem.vue
This will works fine but I want to automate and remove the importfrom script
<template id="timeline-template">
<ul class="timeline">
<li
is="TimelineItem"
v-for="(item, index) in items"
:key="index"
:item="item"
></li>
</ul>
</template>
<script>
import TimelineItem from './TimelineItem.vue'
export default {
components: { TimelineItem },
props: ['items'],
}
</script>
So I just updated my script like this I just removed the import file since I want to automate it
<script>
export default {}
</script>
Then in my nuxt.config.js I set the component into true
components: true,
This is my TimelineItem.vue
<template id="timeline-item-template">
<li class="timeline-item">
<div class="timeline-badge" :class="item.icon_status">
<i :class="item.icon_class"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">{{ item.title }}</h4>
<div class="timeline-panel-controls">
<div class="controls">
<a
v-for="(control, index) in item.controls"
:key="index"
:control="control"
>
</a>
</div>
<div class="timestamp">
<small class="text-muted">{{ item.created }}</small>
</div>
</div>
</div>
<div class="timeline-body">{{ item.body }}</div>
</div>
</li>
</template>
<script>
export default {
props: ['item'],
}
</script>
Updated
I tried using <TimelineItem/> instead using is="TimelineItem but it doesn't work
<template id="timeline-template">
<ul class="timeline">
<TimelineItem v-for="(item, index) in items" :key="index" :item="item" />
</ul>
</template>
<script>
export default {
props: ['items'],
}
</script>
OP's issue was fixed by importing TimelineItem inside of components.js!
Everything is working fine, as expected.
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
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'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(...)
My vue js component doesnt show on my project. I don't see any errors from my part as I have seen many examples before and this is the right logic to implement it. Can anyone help me?
index.blade.php file
<div id="app">
<div class="d-flex align-items-center pb-3">
<div class="h3">{{ $user->username}}</div>
<follow-button></follow-button>
</div>
</div>
FollowButton.vue file
<template>
<div>
<button class="btn btn-primary ml-4"> Follow Me </button>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
app.js file
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('follow-button', require('./components/FollowButton.vue').default);
const app = new Vue({
el: '#app',
});
ExampleComponent.vue file
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
make sure you use <div id="app"> inside write all vuejs code
Add this in app.js
Vue.component('follow-button', require('./components/FollowButton.vue').default);
after register follow-button you can use
<div id="app">
<div class="d-flex align-items-center pb-3">
<div class="h3">{{ $user->username}}</div>
<follow-button> </follow-button>
</div>
</div>
after that run npm run dev
Note: - make sure index.blade.php here you added app.js file
For anyone who might have the same problem with me, somehow I had two divs with the same id="app" and that made sure that my vue.js file not to be implemented on my laravel project.
try to add to index.blade.php file
<script src="{{ mix('/js/app.js') }}"></script>