Vuejs register component and getting did you register the component correctly? error

Question

In one of our project i try to use vuejs-countdown-timer component, but i get this error

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

in this package documentation we have:

//Installation

npm i vuejs-countdown-timer -S Import component

// global register at main.js import VueCountdownTimer from 'vuejs-countdown-timer';

Vue.use(VueCountdownTimer);

and basic usage of that:

<template>
    <vue-countdown-timer
      @start_callback="startCallBack('event started')"
      @end_callback="endCallBack('event ended')"
      :start-time="'2018-10-10 00:00:00'"
      :end-time="1481450115"
      :interval="1000"
      :start-label="'Until start:'"
      :end-label="'Until end:'"
      label-position="begin"
      :end-text="'Event ended!'"
      :day-txt="'days'"
      :hour-txt="'hours'"
      :minutes-txt="'minutes'"
      :seconds-txt="'seconds'">
    </vue-countdown-timer>
</template>

<script >
export default {
  name: 'Timer',
  methods: {
    startCallBack: function(x) {
      console.log(x);
    },
    endCallBack: function(x) {
      console.log(x);
    },
  },
};
</script>

now after installing the package i imported into my app.js:

import Vue from 'vue'

import VueCountdownTimer from 'vuejs-countdown-timer';


Vue.use(Vuelidate)
Vue.use(VueCountdownTimer)
window.Vue = require('vue').default

import Timer from './components/partials/timer.vue'


new Vue({
    store,
    components: {
        Timer,
        //
    }, computed: {}, mount: {}
}).$mount('#app')

and after that i try to use into html template as:

<login inline-template>
    <div class="page-content">
        <div class="content-wrapper">
            ...
        </div>

        <Timer></Timer>

    </div>
</login>

my login.js content:

import {required, minLength, maxLength} from 'vuelidate/lib/validators'
import axios from "axios";
import {route} from "../../routes";

export default {
    data() {
        return {
            //
        }
    }
}

I think inside login.js you should also import the component and register it — Girl Codes
@Sibellekhayrallah is right, You need to import the Timer in the login.js as well. — Yash Maheshwari
Apparently, there is a problem with the vuejs-countdown-timer package. I've tried using it in a codesandbox and it fails the very import. I opened an issue on its repo. — tao
The maintainer of the package refused to acknowledge the problem, and also seems to have lied for no apparent reason, which is bewildering, to say the least. I'd stay clear of their code. — tao

shahidiqbal shahidiqbal · Accepted Answer · 2021-04-21T08:19:58

Register vue-countdown-timer globally in app.js and your custom component timer locally in login.js

app.js


import Vue from 'vue'

import VueCountdownTimer from 'vuejs-countdown-timer';


Vue.use(Vuelidate)
Vue.use(VueCountdownTimer)
window.Vue = require('vue').default

new Vue({
    store,
    computed: {}, mount: {}
}).$mount('#app')

Login.js

import {required, minLength, maxLength} from 'vuelidate/lib/validators'
import axios from "axios";
import {route} from "../../routes";
import Timer from '../partials/timer.vue'


export default {
    data() {
        return {
            //
        }
    },
    components: {
      Timer
    },
}

Vuejs register component and getting did you register the component correctly? error

1 Answers