„Did you register the component correctly?”

[lukaszflorczak]

Hi!

I use your component and it works great, but I have an warn/error in browser console:

[Vue warn]: Unknown custom element: <vue-progress-bar> 
- did you register the component correctly?
For recursive components, make sure to provide the "name" option. 
(found in <App> at /Users/lukaszflorczak/Projekty/ns/src/App.vue)

What should I do?

[JoshuaDoshua]

<vue-progress-bar></vue-progress-bar>
...
import VueProgressBar from 'vue-progressbar'
...
components: { VueProgressBar }

Fixed this error for me, but I am seeing "Failed to mount component: template or render function not defined."now

[lilessam]

just make sure that Vue uses the component Vue.use(VueProgressBar, options);

[JoshuaDoshua]

VueJs ^2.1.10 VueProgressBar ^0.7.1

in main.js

import VueProgressBar from 'vue-progressbar'
Vue.use(VueProgressBar, {
    color: '#bffaf3',
    failedColor: '#874b4b',
    thickness: '5px',
    transition: {
        speed: '0.2s',
        opacity: '0.6s'
    },
    autoRevert: true,
    location: 'left',
    inverse: false
})

in App.vue

<vue-progress-bar></vue-progress-bar>

^^ throws the OP's error

OR this App.vue:

import VueProgressBar from 'vue-progressbar'
...
components: { VueProgressBar }

throws Failed to mount component: template or render function not defined.

[m-kutnik]

Are you sure that you register VueProgressBar before creating a Vue instance? Everything works fine for me

Something like that.. // register Vue.use(VueProgressBar) // create a root instance new Vue({...})

[JoshuaDoshua]

@m-kutnik removed, reinstalled, and reconfigured and it started working again. thanks for your help!

[momodding]

i have same problem like u @JoshuaDoshua i already remove, reinstall and reconfigure but still give same error error : [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

my code : main.js import VueProgressBar from 'vue-progressbar' ... onst options = { color: '#bffaf3', failedColor: '#874b4b', thickness: '5px', transition: { speed: '0.2s', opacity: '0.6s', termination: 300 }, autoRevert: true, location: 'left', inverse: false } ... Vue.use(BootstrapVue, VueProgressBar, options)

and App.vue

<vue-progress-bar></vue-progress-bar>

[cyruscuenca]

I'm having the same issue. I followed the documentation to a T. This is how I register the component in my App.vue:

import VueProgressBar from 'vue-progressbar'

export default {
    name: 'App',
    data: function () {
        return {
        }
    },
    components: {
        VueProgressBar
    },
...

And here's my main.js:

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './stores/index';
Vue.config.productionTip = false;

if (module.hot) {
    module.hot.accept();
}

import VueProgressBar from 'vue-progressbar'

const options = {
    color: '#bffaf3',
    failedColor: '#874b4b',
    thickness: '5px',
    transition: {
        speed: '0.2s',
        opacity: '0.6s',
        termination: 300
    },
    autoRevert: true,
    location: 'left',
    inverse: false
}

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    components: {
        App,
    },
    template: '<App/>',

});

Vue.use(VueProgressBar, options)  

[DhrunitSixberries]

Use this as an alternative https://github.com/dalphyx/vue-top-progress