0

I want to use vue2-editor (and some other packages) in my project, but use them local inside component or two. I followed this thread How to use plugin in only one component using Nuxt.js? but the solution doesn't help me, I see the following error

[Vue warn]: Failed to mount component: template or render function not defined.

Please suggest what I am missing?

Template:

<template>
  <div>
   <client-only>
      <vue-editor v-model="newIdea.description" />
   </client-only>
  </div>
</template>

Components:

components: {
 [process.client && 'VueEditor']: () => import('vue2-editor')
}

Is this somehow related that I should import {VueEditor} from 'vue2-editor' and not directly 'vue2-editor'?
I also tried to add .default but it didn't help.

Bottom line that import {VueEditor} from 'vue2-editor' is working and [process.client && 'VueEditor']: () => import('vue2-editor') is not (all the rest code is same, so definitely something wrong with the second import, but what? Or maybe I missed something?)

Roman Koblents
  • 1
  • 1
  • @kissu maybe you could take a look? – Roman Koblents Sep 05 '22 at 16:25
  • Hm, you may need a wrapping `div` (around your `client-only`) here. – kissu Sep 05 '22 at 16:26
  • Because otherwise, it means that the server have no node to SSR, which may be be confusing for the compiler (which expect at least something). – kissu Sep 05 '22 at 16:29
  • @kissu no it's not the case, actually I had outer div, just didn't put here in example..any other thoughts? – Roman Koblents Sep 05 '22 at 19:06
  • Can you comment this part of code just to be sure that the issue is coming from this and not something else? Also, do you have a [repro] or a public Github repo? – kissu Sep 05 '22 at 19:20
  • it doesn't work for me for other packages as well, let say import { Money } from "v-money" works, but [process.client && "Money"]: () => import("v-money") doesn't with all other code the same..maybe I missed smth? – Roman Koblents Sep 05 '22 at 19:22
  • Same with vue2-editor: import { VueEditor } from "vue2-editor"; + components { VueEditor } WORKS (on client mode, without, reload), [process.client && "VueEditor"]: () => import("vue2-editor") throw an error. I don't have github repo for this issue, just faced it today.. – Roman Koblents Sep 05 '22 at 19:25
  • I found the solution! Was exactly what I suspect https://stackoverflow.com/questions/55378794/vue-js-asyncronous-components-named-import – Roman Koblents Sep 10 '22 at 08:55

0 Answers0