How to use plugin in only one component using Nuxt.js?

ghz 1years ago ⋅ 370 views

Question

I am making a simple blog website with nuxt.js, I need to import editor only in one component, I don't want to use nuxt.config.js. This is what I am trying to do, but it's seems not working.

//Inside '~/plugins/vue2-editor'
import Vue from "vue";
import Vue2Editor from "vue2-editor";
Vue.use(Vue2Editor);
export default {Vue2Editor}


//Inside component
<template>
  <div class="text-editor">
    <client-only>
       <Vue2Editor/>
    </client-only>
  </div>
</template>

<script>
import {Vue2Editor} from '~/plugins/vue2-editor'
export default {
components: {
    Vue2Editor
  },
}
</script>

enter image description here

What should i do?

Answer

If you want to use it in only one component, import it (vue2-editor) just there (no need for a plugin). Then, your usage of client-only should be good.
More details could be found in this other answer: How to fix navigator / window / document is undefined in Nuxt

Otherwise, you could use a dynamic import but I'm not sure this is needed in your case: https://stackoverflow.com/a/67825061/8816585

#vue.js