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

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>

What should i do?

Answer 1

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

Answer 2

The way I got it:

1. In your nuxt.config.js:

plugins: [ { src: "~/plugins/vue2-editor", ssr: false } ],

2. Create a file with the name vue2-editor.js in the plugin folder of your nuxt project, that has the following:

import Vue from "vue";

import Vue2Editor from "vue2-editor";

Vue.use(Vue2Editor);

3. Where you want to use the editor (no Import is necessary):

<client-only placeholder="Loading Your Editor...">
    <vue-editor placeholder="Write Something..." >
    </vue-editor>
</client-only>