Initially, the vue componenets were working and loading, however all of a sudden I started to get this error [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. I havent changed any of the code and I get this error on new files also.
<template>
<v-app>
<div class="example-component">
<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>
</v-app>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
#extends('layouts.app')
#section('content')
<div id="app">
<ExampleComponent />
</div>
#endsection
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
});
This is my vue file, home.blade.php file that I want to use my vue component in, and my app.js file
The name of the component is 'example-component' so you should change
#section('content')
<div id="app">
<ExampleComponent />
</div>
#endsection
to
#section('content')
<div id="app">
<example-component />
</div>
#endsection
Check your Component name as Imported
Example: Vue.component('example-component',
require('./components/ExampleComponent.vue').default);
In this Import component Name is example-component Sometimes
you need to run command npm update vue-loader
Related
I know this question is being asked several times, but I couldn't find any solution to my problem.
I have two vue components on my laravel project. The first one is the laravel default component called "ExampleComponent.vue" and the second one is my own new component called "multi.vue".
I use them in a section.blade.php file like below:
#extends('layouts.app')
#section('content')
<example-component></example-component>
<multi></multi>
#endsection
but only the "example-component" works and for the "multi" component, it gives me the following error:
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
here is my app.js code:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('multi', require('./components/multi.vue').default);
const app = new Vue({
el: '#app',
});
Here is my components codes:
ExampleComponent.vue:
<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>
And my multi.vue:
<template>
<div>
I am multi component!
</div>
</template>
<script>
export default {
mounted() {
console.log('multi mounted.')
}
}
</script>
<style>
</style>
And the route is:
Route::get('/section',function(){
return view('section');
});
For solving this problem, all you need to do is to run "run npm watch".
After running that command, it will recomplie your vue code whenever you make a change in your code and save it.
Keep it in a separate terminal, and run "php artisan serve" in another terminal.
From https://v2.vuejs.org/v2/style-guide/#Multi-word-component-names-essential:
Component names should always be multi-word, except for root App
components, and built-in components provided by Vue, such as
<transition> or <component>.
This prevents conflicts with existing and future HTML elements, since
all HTML elements are a single word.
I'm trying to use the Vue component Vuetable-2 in Laravel 6. I know the component says that it's made for 5.4, but I believe it should still work.
My app.js looks like this:
require('./bootstrap');
window.Vue = require('vue');
Vue.component(
'example-component',
require('./components/ExampleComponent.vue').default
);
Vue.component(
'my-vuetable',
require('./components/MyVuetable.vue')
);
const app = new Vue({
el: '#app',
});
The console reveals that the component could not be mounted.
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <MyVuetable>
<Root>
The view to where I'm trying to mount the component is the following:
(note that the example component does mount correctly)
#extends('layouts.app', ['activePage' => 'integracion', 'titlePage' => __('Integracion')])
#section('content')
<div class="content" id="app">
<div class="container-fluid container">
<example-component></example-component>
<my-vuetable></my-vuetable>
</div>
</div>
#endsection
#push('js')
<script>
$(document).ready(function() {
});
</script>
#endpush
You need to require('path').default. The .default is necessary here because when you use require('path') you're just getting a JSON object back:
{ default: <VueConstructor> }
So no template or render function is defined within that object. However if you use .default then you will actually get back an SFC in this case which can be transpiled down.
The alternative would be to use import:
import MyVuetable from './components/MyVuetable.vue'
Vue.component('my-vuetable', MyVuetable)
Or alternatively, with syntax-dynamic-import enabled:
Vue.component('my-vuetable', () => import('./components/MyVuetable.vue'))
I am trying to show .Vue file but it is not happening.
In inspect, it shows the vue file but does not give the output
<Root>
<ImageComponent>
<Om>
ScreenShot of inspect
This is my app.js file
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
Vue.component('image-component', require('./components/ImageuploadComponent.vue'));
Vue.component('Om', require('./components/Om.vue'));
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app =
new Vue({
el: '#chat',
});
./components/ImageuploadComponent.vue
(./components/Om.vue same as this one only header and body content is different)
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<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>
blade.php file has
<div id="chat">
<image-component></image-component>
<Om></Om>
</div>
<script src="{{ url('js/app.js') }}"></script>
Thank You
Thank You Every One i Got the solution For my error
Vue.component('Om', require('./components/Om.vue').default);
The .default(); was missing.
My app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import Buefy from 'buefy'
Vue.use(Buefy)
// Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('edit-delete-dropdown', require('./components/Dropdown.vue').default);
Vue.component('flash-message', require('./components/FlashMessage.vue').default);
Vue.component('store-create-form', require('./components/StoreCreateForm.vue').default);
const app = new Vue({
el: '#app'
});
My StoreCreateForm.vue
<template>
<section>
<h1 class="title"> Create a new store </h1>
<form :action="createRoute" method="post" role="form">
<input type="hidden" name="_token" :value="csrfToken">
<b-field label="Name">
<b-input placeholder="Store Name" icon-pack="fas" icon="store">
</b-input>
</b-field>
<b-field label="Address">
<b-input placeholder="Store Address" icon-pack="fas" icon="location-arrow">
</b-input>
</b-field>
<b-field label="Description">
<b-input type="textarea" placeholder="Store Description" icon-pack="fas" icon="info-circle">
</b-input>
</b-field>
<b-field>
<button type="submit" name="button" class="button is-primary"> Create </button>
<a class="button is-light" :href="previousUrl"> Cancel </a>
</b-field>
</form>
</section>
</template>
<script>
export default {
props: {
createRoute: String,
csrfToken: String,
previousUrl: String,
}
}
</script>
The story is that I use the element in another blade file:
<store-create-form
create-route="{{ route('users.stores.store', auth()->user()) }}"
csrf-token="{{ csrf_token() }}"
previous-url="{{ url()->previous() }}">
</store-create-form>
and Vue gives me the warning
**[Vue warn]: Unknown custom element: <store-create-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option.**
and doesn't display the component even though I can use the other two components 'edit-delete-dropdown' and 'flash-message' in my application. I also run npm run watch to compile files when there is a change.
I've already checked other answers on StackOverflow and other forums but seems like nothing works.
Any thoughts on this hassle?
Your help will be appreciated.
// Updated:
I think the problem is something with Laravel Mix. I tried changing something in other components and the notification from Mix is 'Build successfully' but it doesn't change in the view (it still worked just fine yesterday)
Just disable cache in the Network tab (F12) and everything works!
Thank you for all your help!
You need to give your component a 'name'
<script>
export default {
name: 'store-create-form'
props: {
createRoute: String,
csrfToken: String,
previousUrl: String,
}
}
</script>
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
i am trying to use laravel passport
i followed the process from laravel.com/docs/5.7/passport
but when i launched the page i get the above errors
app.js
Vue.component(
'passport-clients',
require('./components/passport/Clients.vue').default
);
Vue.component(
'passport-authorized-clients',
require('./components/passport/AuthorizedClients.vue').default
);
Vue.component(
'passport-personal-access-tokens',
require('./components/passport/PersonalAccessTokens.vue').default
);
Vue.component('example-component',
require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app',
router,
data:{
search: ''
},
methods:{
searchit(){
Fire.$emit('searching');
}
}
});
this is the code from developer.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card card-default">
<passport-clients></passport-clients>
<passport-authorized-clients></passport-authorized-clients>
<passport-personal-access-tokens></passport-personal-
access-tokens>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
removing the ".default" from the end of the components save my day.
After changing app.js file you had to run this code for solve this error:
npm run dev
Or:
npm run watch