Register a component to an existing Vue.js instance

Question

I'm new to Vue.js.

I want to register a local component as described over here:

https://v2.vuejs.org/v2/guide/components.html#Local-Registration

The only issue is that I need to register a component to an existing Vue instance not while creating a new instance something like:

const app = new Vue({
    el: '#app'
});
    
app.component({
    'my-component': {
         template: '<div>A custom component!</div>'
    }
});

I have tried Vue.extend for that, but it is not working.

Edit:

Why I need this:

I'm creating a 3rd party package which will have that component. The framework on which this package is going to be installed will already have Vue.js included and a Vue instance. So if I include my package's JS before framework's JS, then it will give me Vue is undefined and if I include my package's JS after framework's JS, then it will give me component error as it has to be registered before the Vue instantiation.

resolved this ?

Valen Tin
– Valen Tin

2020-04-05 16:03:39 +00:00
Commented Apr 5, 2020 at 16:03 — Valen Tin
– Valen Tin, Commented Apr 5, 2020 at 16:03

Piterden · Accepted Answer · 2018-10-17 05:18:31Z

3

Global components should be declared before new instance construct.

Vue.component('my-component-a', {
  template: '<div>A custom component A!</div>'
});

Vue.component('my-component-b', {
  template: '<div>A custom component B!</div>'
});

const app1 = new Vue({
    el: '#app1',
    template: '<div><my-component-a /><my-component-b /><my-component-c /></div>',
    components: {
      MyComponentC: {
        template: '<div>A custom component C!</div>'
      }
    }
});

const app2 = new Vue({
    el: '#app2',
    template: '<div><my-component-b /><my-component-a /><my-component-c /></div>'
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app1"></div>
<div id="app2"></div>

You don't have access to the C component from within your app2

edited Oct 17, 2018 at 5:18

answered Oct 17, 2018 at 5:11

Piterden

7995 silver badges17 bronze badges

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

Comments

Alex Taylor · Accepted Answer · 2018-10-17 05:49:41Z

2

You can't add components to an instance like that. All you can do it adding them to the Vue constructor like usual:

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

const app = new Vue({
    el: '#app'
});

See a demo here: https://jsfiddle.net/Linusborg/kb9pbecq/

edited Oct 17, 2018 at 5:49

Alex Taylor

8,9334 gold badges29 silver badges44 bronze badges

answered Aug 3, 2017 at 11:09

Linus Borg

24.1k7 gold badges65 silver badges52 bronze badges

2 Comments

Linus Borg Over a year ago

Yes, what's with it? You obviously can't render a component before you have added it.

Piterden Over a year ago

Also about passed parameters. Need string and object, not just object. Anyway, I glad to meet you here)

Paul Kolesnyk · Accepted Answer · 2017-08-03 11:20:34Z

0

const app = new Vue({
  el: '#app',
  components: {
    'my-component': {template: '<div>Text in component</div>'}
   }
});

answered Aug 3, 2017 at 11:20

Paul Kolesnyk

261 bronze badge

Comments

Mactavish · Accepted Answer · 2017-08-03 12:52:59Z

0

Basically, you can not register a component to a existing Vue instance while it was already rendered.But you can register a component before the Vue instance mounted into the dom element.

// local component
var child = {
  template: '<div>A custom component!</div>'
}

const app = new Vue({
   el: '#app',
   components: {
     Child: child
  }
})

or

// global component
Vue.component({
 'child': {
   template: '<div>A custom component!</div>'
 } })

Define the component first and then implement it.

answered Aug 3, 2017 at 12:52

Mactavish

668 bronze badges

Collectives™ on Stack Overflow

Register a component to an existing Vue.js instance

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related