I'm new to Vue.js.

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

.html#Local-Registration

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

const app = new Vue({
    el: '#app'
});
    
appponent({
    'my-ponent': {
         template: '<div>A custom ponent!</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 ponent. 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 ponent error as it has to be registered before the Vue instantiation.

I'm new to Vue.js.

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

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

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

const app = new Vue({
    el: '#app'
});
    
app.ponent({
    'my-ponent': {
         template: '<div>A custom ponent!</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 ponent. 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 ponent error as it has to be registered before the Vue instantiation.

• javascript
• vue.js
• vuejs2
• vue-ponent

Share Improve this question Follow edited Jul 14, 2022 at 0:58 tony19 139k2323 gold badges277277 silver badges347347 bronze badges asked Aug 3, 2017 at 10:38 Parth VoraParth Vora 4,11477 gold badges3838 silver badges6262 bronze badges 1

• resolved this ? – Valen Tin Commented Apr 5, 2020 at 16:03

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Global ponents should be declared before new instance construct.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

or

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

Define the ponent first and then implement it.