window is not defined when importing createTags when using Nuxt

[Stalex89]

I'm using Nuxt in my project and I want to create a button item in autocomplete list to manually create a tag

I'm trying to use import createTag from '@johmun/vue-tags-input'; in my Vue component, but it gives me an error ReferenceError: window is not defined.. My component is wrapped in client-only tag and render mode for plugin is set to client.

Can you tell me please where can be reason of this problem?

my TagField.vue component:

<template>
  <client-only>
    <vue-tags-input
      v-model="tag"
      :tags="tags"
      :autocomplete-items="autocompleteTags"
      @tags-changed="newTags => tags = newTags"
    >
      <template slot="autocomplete-header">
        <div @click.stop="createTag(this.tag)">+ Add new tag</div>
      </template>
    </vue-tags-input>
  </client-only>
</template>

<script>
  import getAutocompleteTags from '~/graphql/queries/getAutocompleteTags';
  import { createTag } from '@johmun/vue-tags-input';

  export default {
    name: "TagField",
    data() {
      return {
        autocompleteTags: [],
        tag: '',
        tags: [],
      }
    },
    watch: {
      'tag': 'getAutocompleteTags',
    },
    methods: {
      createTag: this.$.createTag,
      getAutocompleteTags() {
        if (this.tag.length < 2) return;

        clearTimeout(this.debounce);
        this.debounce = setTimeout(() => {
          this.$apollo.query({
            query: getAutocompleteTags,
            variables: { title: `*${this.tag}*` }
          }).then(response => {
            this.autocompleteTags = response.data.autocompleteTags;
          }).catch((err) => console.error(err));
        }, 600);
      }
    }
  }
</script>

nuxt.config.js

...
  plugins: [
    { src: '~/plugins/vue-tags-input', mode: 'client' }
  ],
...
  build: {
    vendor: ['@johmun/vue-tags-input'],
  },
}
...

plugins/vue-tags-input.js

import Vue from 'vue';
import VueTagsInput from '@johmun/vue-tags-input';

Vue.use(VueTagsInput);

[shresthapradip]

Why is it closed? What is the solution?

[igorlanko]

@Stalex89, could you share what was your solution?

[tsitsakosa]

I had a similar issue:

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

export default {
  components: {
    VueTagsInput
  },

This code with Laravel mix to compile my assets, generate error window.Vue.use is not a function.
In my webpack.mix.js, I extracted all vendor files in a separate file. I will not explain my mix setup now. The problem is that webpack isolate the scopes during code splitting. So my solution is to add an alias

 alias: {
  'window.Vue': 'vue/dist/vue.js'
},

to replace window.Vue inside the code of the library.

[tsitsakosa]

I had a similar issue:

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

export default {
  components: {
    VueTagsInput
  },

This code with Laravel mix to compile my assets, generate error window.Vue.use is not a function.
In my webpack.mix.js, I extracted all vendor files in a separate file. I will not explain my mix setup now. The problem is that webpack isolate the scopes during code splitting. So my solution is to add an alias

 alias: {
  'window.Vue': 'vue/dist/vue.js'
},

to replace window.Vue inside the code of the library.