Unable to register custom component globally with vue.js

Question

I have made selectbox component and wants to reuse it in other components. Si I want to register that component globally. I have imported that component in main.js but doesnot works.

main.js

import Selectbox from "@/modules/Selectbox.vue";
Vue.component("Selectbox", Selectbox);

Selectbox.vue

<template>
  <div>
    <label>{{ label }}</label>
    <select @change="$emit('input', $event.target.value)">
      <option
        v-for="opt in options"
        :key="opt.value"
        :value="opt.value"
        :selected="value === opt.value"
      >
        {{ errorMessage }}
        {{ opt.label || "No label" }}
      </option>
    </select>
  </div>
</template>
<script>
export default {
  props: {
    label: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      errorMessage: "",
      option: "lorem",
      options: [
        { label: "lorem", value: "lorem" },
        { label: "ipsum", value: "ipsum" }
      ]
    };
  },
};
</script>

Test.vue

<template>
<div>
<Selectbox v-model="ward_no"/>
</div>
</template>
<script>
export default {
  data() {
   return {
     ward_no: '',
        };
     }
   }
</script>

So what do you mean by 'does not work' then? No errors in console and a component just not shown? — Anatoly
– Anatoly, Commented Aug 23, 2020 at 18:00
When I didn't import Selectbox component locally in other components, I got "Uncaught ReferenceError: Selectbox is not defined" @Anatoly — prabina sht
– prabina sht, Commented Aug 24, 2020 at 3:07
Can you add an example of Selectbox usage in other component in your post? — Anatoly
– Anatoly, Commented Aug 24, 2020 at 13:14

Syed · Accepted Answer · 2020-08-25 07:44:48Z

2

There is nothing wrong in the way that you are trying to register global component but you are missing script tag.

UPDATE: After talking to @prabinasht on skype and reviewing her code, I saw that in multiple files she forgot to remove locally imported/registered component and at the same time the component was registered globally too, so that was the problem.

edited Aug 25, 2020 at 7:44

answered Aug 24, 2020 at 15:14

Syed

16.6k15 gold badges128 silver badges159 bronze badges

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

2 Comments

prabina sht Over a year ago

I forgot to write <script> in this post only but there is already in mycode

Syed Over a year ago

@prabinasht in case if you have not fixed yet then let's fix, ping me on skype: syed_haroon

A.Rahman · Accepted Answer · 2020-08-24 15:00:08Z

-1

Register the component this way

Vue.component('Selectbox', require('@/modules/Selectbox.vue').default)

answered Aug 24, 2020 at 15:00

A.Rahman

851 gold badge1 silver badge12 bronze badges

Collectives™ on Stack Overflow

Unable to register custom component globally with vue.js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related