vue-tags-input

vue-tags-input copied to clipboard

The Nuxt usage instructions are outdated and cause errors and warning. This has been tested with Nuxt 2.15.8 and Vue 2.6.14

1. Install with yarn yarn add @johmun/vue-tags-input
2. Create plugin to register the component globally

// File: ~/plugins/vue-tags-input.js
import Vue from 'vue';
import VueTagsInput from '@johmun/vue-tags-input';

Vue.use(VueTagsInput);

3. Update nuxt.config.js to register the plugin and use it in client-side rendering.

plugins: [
    { src: '~/plugins/vue-tags-input', mode: 'client'}
],

The build.vendor entry suggested in original instructions is not needed. It now now causes build warning WARN: vendor has been deprecated due to webpack4 optimization. See nuxt/nuxt.js#5544.

4. Wrap component into <client-only>. Failing to do that causes Uncaught ReferenceError: window is not defined. Make sure your <script> does not import the component or you get the same error.

// File: ~/components/Autocomplete.vue
<template>
  <div>
    <client-only placeholder="Loading...">
      <vue-tags-input
        v-model="tag"
        :tags="tags"
        :autocomplete-items="filteredItems"
        @tags-changed="newTags => tags = newTags"
      />
    </client-only>
  </div>
</template>

<script>
//  Do NOT use the import below. It is not needed.
//  import VueTagsInput from '@johmun/vue-tags-input';
export default {
  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>

If you are just using the script on one component/page, why the hassle with the plugin method? Just import the script in the page. Is there a reason for the global plugin?

Does anyone know if this works now with Nuxt3?