N
Nuxt•2mo ago
lkjimy

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>, with lazy prefix and a 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>
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 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']
})
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.
5 Replies
kapa.ai
kapa.ai•2mo ago
Hi @lkjimy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To properly lazy load a heavy component like nuxt-monaco-editor in Nuxt, you should use Nuxt's built-in lazy loading and delayed hydration strategies. However, there are some important caveats and best practices to be aware of: 1. Use the Lazy Prefix for Lazy Loading Using the Lazy prefix (e.g., <LazyMonacoEditor />) ensures the component is only loaded when it is actually rendered. However, this alone does not delay hydration or loading of the component's code if it is present in the initial render tree—even if wrapped in <ClientOnly> or conditionally rendered with v-ifLazy Loading Components. 2. Delayed (Lazy) Hydration Nuxt supports delayed hydration, which allows you to control when a component becomes interactive (hydrated). This is especially useful for heavy components like Monaco Editor. You can use hydration strategies such as hydrate-on-visible, hydrate-on-idle, hydrate-on-interaction, etc. For example: 
<template>
  <div>
    <LazyMonacoEditor hydrate-on-visible />
  </div>
</template>
<template>
  <div>
    <LazyMonacoEditor hydrate-on-visible />
  </div>
</template>
Or, to hydrate after a delay: 
<template>
  <div>
    <LazyMonacoEditor :hydrate-after="2000" />
  </div>
</template>
<template>
  <div>
    <LazyMonacoEditor :hydrate-after="2000" />
  </div>
</template>
Important:
- Only one hydration strategy can be used per lazy component. - Lazy hydration only works in single-file components (SFCs) and does not work with direct imports from #components. - You must define the hydration prop directly in the template, not via v-bindHydration Strategies. 3. Caveats - Do not use delayed hydration for critical, above-the-fold content. It's best for non-essential, heavy components. - Avoid hydrate-never for interactive components like Monaco Editor, as it needs to be interactive. - Wrapping in <ClientOnly> is useful for client-only components, but does not itself delay loading or hydration. - SSR is disabled in your config (ssr: false), so all rendering is client-side, but lazy loading and hydration strategies still apply. 4. Why You Still See Large Bundles If Monaco Editor is still being loaded on pages where it is not used, it may be due to how the module is registered or imported. Ensure you are not importing Monaco Editor or related code in a global scope or plugin that runs on every page. 5. Example: Best Practice for Lazy Loading Monaco Editor 
<template>
  <div>
    <button @click="showEditor = true">Load Editor</button>
    <LazyMonacoEditor
      v-if="showEditor"
      hydrate-on-visible
      v-model="jsonData"
      :options="monacoOptions"
      :lang="monacoOptions.language"
      class="w-100"
      style="min-height: 400px"
    />
  </div>
</template>

<script setup lang="ts">
const showEditor = ref(false)
const jsonData = ref('')
const monacoOptions = { language: 'json' }
</script>
<template>
  <div>
    <button @click="showEditor = true">Load Editor</button>
    <LazyMonacoEditor
      v-if="showEditor"
      hydrate-on-visible
      v-model="jsonData"
      :options="monacoOptions"
      :lang="monacoOptions.language"
      class="w-100"
      style="min-height: 400px"
    />
  </div>
</template>

<script setup lang="ts">
const showEditor = ref(false)
const jsonData = ref('')
const monacoOptions = { language: 'json' }
</script>
This approach ensures: - The editor is only loaded and hydrated when the user requests it. - The bundle size and initial load are minimized for users who do not need the editor. 6. Additional Notes - If you are using Nuxt Layers, ensure that Monaco Editor is not imported or registered globally in the layer. - If you still see Monaco Editor code in all pages, review your imports and module usage. --- Summary:
Use the Lazy prefix and a hydration strategy like hydrate-on-visible or hydrate-after directly in your SFC template. Avoid global imports. This will ensure Monaco Editor is only loaded and hydrated when needed, improving performance for all other pagesHydration Strategies Caveats and Best Practices. If you follow these steps and still see Monaco Editor loaded everywhere, the knowledge sources do not provide further troubleshooting steps specific to the nuxt-monaco-editor module. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@126052960038944768> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
lkjimy
lkjimyOP•4w ago
@kapa.ai The component is registered... 
// nuxt.config.ts
export default defineNuxtConfig({
  ssr: false,
  modules: ['nuxt-monaco-editor']
})
// nuxt.config.ts
export default defineNuxtConfig({
  ssr: false,
  modules: ['nuxt-monaco-editor']
})
... and being used in a single page, but still loading on every page.
kapa.ai
kapa.ai•4w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the provided knowledge sources, Nuxt’s component auto-registration and lazy loading features should ensure that components are only included in the client bundle if they are actually used in your pages or layouts. When you use the Lazy prefix (e.g., <LazyMonacoEditor />), Nuxt will dynamically import the component, and it should not be included in the main bundle unless it is rendered. This is designed to optimize bundle size and loading performance, especially for heavy components like Monaco Editor Lazy Loading Components. However, if you are registering the nuxt-monaco-editor module globally in your nuxt.config.ts under the modules array, Nuxt will auto-register its components and make them available throughout your app. According to the documentation, Nuxt’s auto-import and tree-shaking should only include components that are actually used in your pages or layouts, and not in every page by default Built-In Nuxt Components. If you are still seeing the Monaco Editor code loaded on every page, even when it is only used in a single page, the knowledge sources do not provide a specific explanation for this behavior. There may be an issue with how the nuxt-monaco-editor module is implemented, or it may be related to how Nuxt handles auto-registration for certain third-party modules. The documentation does not explicitly address this scenario or provide troubleshooting steps for modules that do not tree-shake as expected. Summary:
- Nuxt is designed to only include auto-registered components in the bundle if they are used. - Using the Lazy prefix and conditional rendering should further optimize loading. - If Monaco Editor is still loaded on every page, the knowledge sources do not contain enough information to explain or resolve this specific issue. You may need to consult the nuxt-monaco-editor module documentation or open an issue with the module’s maintainers for further assistance, as this behavior is not covered in the official Nuxt documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@126052960038944768> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?