How to properly lazy load the nuxt-monaco-editor module?

Original issue: https://github.com/e-chan1007/nuxt-monaco-editor/issues/71

---

In dev mode the module is huge, more than 50.000 kb, split into a lot of requests. How to properly lazy load Monaco?
Even pages that do not load it, are still loading it.

In production the bundle is much smaller, but still loading in pages that do not use it.

I tried using the hydration strategies here: https://nuxt.com/docs/4.x/guide/directory-structure/app/components#hydration-strategies

Wrapped in

<ClientOnly>

<ClientOnly>

<ClientOnly>

<ClientOnly>, with

lazy

lazy

lazy

lazy prefix and a

v-if

v-if

v-if

v-if:

<ClientOnly>
  <LazyMonacoEditor
      v-if="loadEditor"
      ref="editorRef"
      v-model="jsonData"
      :options="monacoOptions"
      :lang="monacoOptions.language"
      class="w-100"
      style="min-height: 400px"
    />
</ClientOnly>

<ClientOnly>
  <LazyMonacoEditor
      v-if="loadEditor"
      ref="editorRef"
      v-model="jsonData"
      :options="monacoOptions"
      :lang="monacoOptions.language"
      class="w-100"
      style="min-height: 400px"
    />
</ClientOnly>

<ClientOnly>
  <LazyMonacoEditor
      v-if="loadEditor"
      ref="editorRef"
      v-model="jsonData"
      :options="monacoOptions"
      :lang="monacoOptions.language"
      class="w-100"
      style="min-height: 400px"
    />
</ClientOnly>

<ClientOnly>
  <LazyMonacoEditor
      v-if="loadEditor"
      ref="editorRef"
      v-model="jsonData"
      :options="monacoOptions"
      :lang="monacoOptions.language"
      class="w-100"
      style="min-height: 400px"
    />
</ClientOnly>

The page is only visible after loading the module, which takes a long time.

---

For context, I'm using the module in a Nuxt Layer, running

build

build

build

build for production.

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: false,
  modules: ['nuxt-monaco-editor']
})

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: false,
  modules: ['nuxt-monaco-editor']
})

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: false,
  modules: ['nuxt-monaco-editor']
})

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: false,
  modules: ['nuxt-monaco-editor']
})

GitHub

How to properly lazy load the module? · Issue #71 · e-chan1007/nu...

In dev mode the module is huge, more than 50.000 kb, split into a lot of requests. How to properly lazy load Monaco? Even pages that do not load it, are still loading it. In production the bundle i...

Nuxt

components · Nuxt Directory Structure v4

The components/ directory is where you put all your Vue components.

How to properly lazy load the nuxt-monaco-editor module?

Similar Threads

Similar Threads

Similar Threads