VueJS Register component error Unknown custom element

Question

I have problem with register component in VueJS. I installed the component from https://github.com/wanxe/vue-button-spinner with npm install. Next I add code to my app.js (I'm using Laravel 5.5).

My app.js file

require('./bootstrap');

window.Vue = require('vue');
import Spinner from './components/Spinner.vue'

window.onload = function () {

    Vue.component('button-spinner', require('./components/Spinner.vue'));
    var vw = new Vue({
        el: '#app',
        components: {
            'button-spinner': Spinner
        }
    });

};

And Spinner.vue code

<script>
    import VueButtonSpinner from 'vue-button-spinner';

    console.log('Test');

    export default {
        name: 'events-form',
        data() {
            return {
                isLoading: false,
                status: '',
            }
        },
        components: {
            VueButtonSpinner
        },
        methods: {
            onSubmit() {
                this.isLoading = true
                $someRequest('/url', 'GET')
                    .then(response => {
                        this.isLoading = false
                        this.status = true // or success
                        setTimeout(() => { this.status = '' }, 2000) // to clear the status :)
                    })
                    .catch(error => {
                        console.error(error)
                        this.isLoading = false
                        this.status = false //or error
                    })
            }
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

After this I run npm run dev Next I add code to my HTML

<div id="app">
 <button-spinner
                        :isLoading="isLoading"
                        :disabled="isLoading"
                        :status="status">
                <input type="submit" :disabled="submitted" :class="{ 'disabled': submitted == true }" @click="submit('register', $event)"
                       v-model="registerSubmit" id="registerSubmit" style="width: 100%; height: 40px">
                </button-spinner>

</div>
<script src="{{URL::asset('js/app.js')}}"></script>

And component is not working. I don't known why. Console prints Unknown custom element: <button-spinner>

EDIT:

I remove window.onload = function () from app.js after this console.log('Component mounted.') is working but from Spinner I gets [Vue warn]: Failed to mount component: template or render function not defined.found in---> <ButtonSpinner> at resources/assets/js/components/Spinner.vue<Root>

After remove window.onload there was another problem I also link additional js files in html

<script src="{{URL::asset('js/login.js')}}"></script>
<script src="{{URL::asset('js/register.js')}}"></script>

This scripts using VueJS and procudes a lot of errors.

With window.onload everything was ok. Should I include this files in app.js? Eg. register.js file https://pastebin.com/0uHxRcN9

app.js after update:

window.Vue = require('vue');


require('./bootstrap');

import Spinner from './components/Spinner.vue'

    require('./register');
    require('./login');
   new Vue({
        el: '#app',
        components: {
            'button-spinner': Spinner
        }
    });

Niklesh Raut · Accepted Answer · 2017-11-22 10:39:05Z

1

You created component both ways

Remove this

Vue.component('button-spinner', require('./components/Spinner.vue'));

And Change here

components: {
    buttonSpinner: Spinner
}

Also putting html inside component will not work as you put input , remove this

<input type="submit" :disabled="submitted" ....

Also use props to pass params in child components

props = ["isLoading","disabled","status"]

and use define this in main component

isLoading: false,
status: '',

edited Nov 22, 2017 at 10:39

answered Nov 22, 2017 at 10:01

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

22 Comments

lukassz Over a year ago

I change this but still not working, Also console.log('Component mounted.') is not display in console. Maybe the problem is with window.onload = function ()?

Niklesh Raut Over a year ago

if you doubted on window.onload remove that line and check

Niklesh Raut Over a year ago

@lukassz : did you find any changes ?

Niklesh Raut Over a year ago

@lukassz : shift this code to main component isLoading: false, status: '', and use props in child component

Niklesh Raut Over a year ago

@lukassz : when you say not working , share what is not working and what error you got ?

|

Peter Chaula · Accepted Answer · 2019-06-03 09:00:10Z

0

Vue seems to use convert ComponentName to component-name when you register a component inline. Your problem can easily be fixed by changing your 'import alias' to ButtonSpinner

import ButtonSpinner from './components/Spinner.vue'

//in the components property 
components: {
   ButtonSpinner
}

answered Jun 3, 2019 at 9:00

Peter Chaula

3,7812 gold badges36 silver badges37 bronze badges

Collectives™ on Stack Overflow

VueJS Register component error Unknown custom element

2 Answers 2

22 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

22 Comments

Comments

Related