Vue Vue-Instant Component

Question

I just installed vue-instant to make an automatic search suggestion and get some sample code like this

https://jsfiddle.net/santiblanko/dqo6vr57/

My question is how to move the 'vue-instant': VueInstant.VueInstant components to a new Vue component like this one:

 Vue.component('vue-instant-component', { //vue-instant } 

I tried something like this:

 Vue.component('vue-instant', { data: { value: '', suggestionAttribute: 'original_title', suggestions: [], selectedEvent: "" }, methods: { clickInput: function() { this.selectedEvent = 'click input' }, clickButton: function() { this.selectedEvent = 'click button' }, selected: function() { this.selectedEvent = 'selection changed' }, enter: function() { this.selectedEvent = 'enter' }, keyUp: function() { this.selectedEvent = 'keyup pressed' }, keyDown: function() { this.selectedEvent = 'keyDown pressed' }, keyRight: function() { this.selectedEvent = 'keyRight pressed' }, clear: function() { this.selectedEvent = 'clear input' }, escape: function() { this.selectedEvent = 'escape' }, changed: function() { var that = this; this.suggestions = []; axios.get('https://api.themoviedb.org/3/search/movie?api_key=342d3061b70d2747a1e159ae9a7e9a36&query=' + this.value) .then(function(response) { response.data.results.forEach(function(a) { that.suggestions.push(a) }); }); } } }) 

but it does not work

Answer 1

I misunderstood the question a bit, below is the original answer.

Here's how you could turn the code into a component:

 Vue.component("movies",{ template:` <div> {{selectedEvent}} <vue-instant :suggestion-attribute="suggestionAttribute" v-model="value" :disabled="false" @input="changed" @click-input="clickInput" @click-button="clickButton" @selected="selected" @enter="enter" @key-up="keyUp" @key-down="keyDown" @key-right="keyRight" @clear="clear" @escape="escape" :show-autocomplete="true" :autofocus="false" :suggestions="suggestions" name="customName" placeholder="custom placeholder" type="google"></vue-instant> </div> `, data(){ return { value: '', suggestionAttribute: 'original_title', suggestions: [], selectedEvent: "" } }, methods: { clickInput: function() { this.selectedEvent = 'click input' }, clickButton: function() { this.selectedEvent = 'click button' }, selected: function() { this.selectedEvent = 'selection changed' }, enter: function() { this.selectedEvent = 'enter' }, keyUp: function() { this.selectedEvent = 'keyup pressed' }, keyDown: function() { this.selectedEvent = 'keyDown pressed' }, keyRight: function() { this.selectedEvent = 'keyRight pressed' }, clear: function() { this.selectedEvent = 'clear input' }, escape: function() { this.selectedEvent = 'escape' }, changed: function() { var that = this this.suggestions = [] axios.get('https://api.themoviedb.org/3/search/movie?api_key=342d3061b70d2747a1e159ae9a7e9a36&query=' + this.value) .then(function(response) { response.data.results.forEach(function(a) { that.suggestions.push(a) }) }) } }, components: { 'vue-instant': VueInstant.VueInstant } }) 

Original answer

I just want to move the example above to the Vue.component () form. The code should not be in the new Vue (), but in Vue.component ()

If I understand correctly, the syntax you are looking for is

 Vue.component('vue-instant', VueInstant.VueInstant) 

Updated fiddle .