Can not use @johmun/vue-tags-input with VueJS and Laravel/Spark

Question

I currently set up a new playground with VueJS/Laravel/Spark and want to implement a tags input component.

I don't understand how to register those components correctly. I'm following the how-to-guides and official documentation, but the implementation just works so-so.

I want to implement the library from @johmun -> http://www.vue-tags-input.com which I installed via npm (npm install @johmun/vue-tags-input).

I created a single file component named VueTagsInput.vue that looks like this:

<template>
  <div>
    <vue-tags-input
      v-model="tag"
      :tags="tags"
      @tags-changed="newTags => tags = newTags"
      :autocomplete-items="filteredItems"
    />
  </div>
</template>

<script>
import VueTagsInput from '@johmun/vue-tags-input';

export default {
  components: {
    VueTagsInput,
  },
  data() {
    return {
      tag: '',
      tags: [],
      autocompleteItems: [{
        text: 'Spain',
      }, {
        text: 'France',
      }, {
        text: 'USA',
      }, {
        text: 'Germany',
      }, {
        text: 'China',
      }],
    };
  },
  computed: {
    filteredItems() {
      return this.autocompleteItems.filter(i => {
        return i.text.toLowerCase().indexOf(this.tag.toLowerCase()) !== -1;
      });
    },
  },
};
</script>

I imported this single file component at resources/js/bootstrap.js like so:

import VueTagsInput from './VueTagsInput.vue'

And I'm using this component in the home.blade.php view like this:

<vue-tags-input v-model="tag" 
                autocomplete-always-open 
                add-from-paste 
                allow-edit-tags>
</vue-tags-input>

This renders an input with which I can interact as desired, but I can not use the autocomplete function with the countries entered above, and the console also throws the following error:

[Vue warn]: Property or method "tag" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

I don't know what I'm doing wrong.

Answer 1

So I stumbled across the solution by trial & error.

First I had to register the component the right way in resources/js/bootstrap.js like so:

import VueTagsInput from './VueTagsInput.vue'
Vue.component('vue-tags-input', VueTagsInput);

But this caused another error because I called the component within the component registration itself. I used the name option in the single file component in order to overcome this error. I gave my newly created component a different name like this:

<template>
  <div>
    <johmun-vue-tags-input
      v-model="tag"
      :tags="tags"
      @tags-changed="newTags => tags = newTags"
      :autocomplete-items="filteredItems"
    />
  </div>
</template>

<script>
import JohmunVueTagsInput from '@johmun/vue-tags-input';

export default {
  name: "VueTagsInput",
  components: {
    JohmunVueTagsInput,
  },
  data() {
    return {
      tag: '',
      tags: [],
      autocompleteItems: [{
        text: 'Spain',
      }, {
        text: 'France',
      }, {
        text: 'USA',
      }, {
        text: 'Germany',
      }, {
        text: 'China',
      }],
    };
  },
  computed: {
    filteredItems() {
      return this.autocompleteItems.filter(i => {
        return i.text.toLowerCase().indexOf(this.tag.toLowerCase()) !== -1;
      });
    },
  },
};
</script>