Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update outdated instructions for NuxtJS #157

Open
mtomcanyi opened this issue Aug 28, 2021 · 2 comments
Open

Update outdated instructions for NuxtJS #157

mtomcanyi opened this issue Aug 28, 2021 · 2 comments

Comments

@mtomcanyi
Copy link

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);
  1. 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#5544.

  1. 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>
@dosstx
Copy link

dosstx commented Jan 12, 2022

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?

@dosstx
Copy link

dosstx commented May 26, 2022

Does anyone know if this works now with Nuxt3?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants