如何仅在客户端在 Vue.js 3 中动态导入 CKEditor？

Question

I am trying to include CKEditor 5 in my Vue.js 3 app but am struggling with including it only on client-side. I am using server-side rendering which cannot handle window that CKEditor uses, so it must only load only if the browser requests it, and not Node.js.

In the setup() method I can test for IsBrowser like this:

const IsBrowser = typeof window !== 'undefined';

How can I perform import and initialise a component only if IsBrowser is true?

I have to do the following code to make CKEditor-5 work:

    <CKEditor v-if="IsBrowser" id="PostContent" class="ck-content" contenteditable="true" :editor="CKEditorInline" ></CKEditor>

<script>
    import CKEditor from '@ckeditor/ckeditor5-vue/dist/ckeditor'
    import CKEditorInline from '@ckeditor/ckeditor5-editor-inline/src/inlineeditor';
    
    export default {
    
      name: "ComponentCreate",
      components: {
        CKEditor: CKEditor.component
      }, 
    data() {
    return {
      CKEditorInline: CKEditorInline,
</script>

Answer 1

TLDR

Working solution (explanation is below):

<CKEditor v-if="IsBrowser && CKEditorInline"
  id="PostContent"
  class="ck-content"
  contenteditable="true"
  :editor="CKEditorInline"
></CKEditor>

<script>
import { ref, defineAsyncComponent } from 'vue';

export default {
  name: "ComponentCreate",
  components: {
    CKEditor: defineAsyncComponent(() => {
      return import('@ckeditor/ckeditor5-vue/dist/ckeditor')
      .then(module => module.component)
    })
  },
  setup() {
    const IsBrowser = typeof window !== 'undefined';
    let CKEditorInline = ref(null);

    if (IsBrowser) {
      import('@ckeditor/ckeditor5-editor-inline/src/inlineeditor')
      .then(e => CKEditorInline.value = e.default)
    }

    return { IsBrowser, CKEditorInline }
  },
};
</script>

---

There are two challenges here:

1. Conditionally load the <CKEditor> component
2. Conditionally load the CKEditorInline module 's export

Conditionally Load <CKEditor> component

Use defineAsyncComponent to lazy load and register the component. It only loads and registers if the template actually renders it. So only when the v-if is true.

components: {
  CKEditor: defineAsyncComponent(() => {
    return import('@ckeditor/ckeditor5-vue/dist/ckeditor')
    .then(module => module.component)
  })
},

^{Extra challenge, not the module but the component property is needed in your case}

Conditionally load CKEditorInline module export

For this dynamic module, we want the default export

let CKEditorInline = ref(null);
if (IsBrowser) {
  import('@ckeditor/ckeditor5-editor-inline/src/inlineeditor')
  .then(e => CKEditorInline.value = e.default)
}

Change the v-if condition

<CKEditor v-if="IsBrowser && CKEditorInline" :editor="CKEditorInline"></CKEditor>