For AI agents: the complete documentation index is available at /vue-codemirror6/llms.txt, the full documentation bundle is available at /vue-codemirror6/llms-full.txt, and this page is available as Markdown at /vue-codemirror6/guide/ssr.md.
vue-codemirror6
  • English

      • Server-Side Rendering

      The component is SSR compatible. CodeMirror is only created in the browser (in onMounted), so during server rendering the component outputs its empty container element without touching window or document.

      Nuxt 3 / Nuxt 4

      Use the component directly:

      <script lang="ts" setup vapor>
import { javascript } from '@codemirror/lang-javascript';
import { ref } from 'vue';
import CodeMirror from 'vue-codemirror6';

const value = ref('console.log("Hello, World!");');
const lang = javascript();
</script>

<template>
  <code-mirror v-model="value" basic :lang="lang" />
</template>

      Nuxt 2 or when problems occur

      Wrap the component with <ClientOnly> so that it is rendered only in the browser:

      <template>
  <client-only>
    <code-mirror v-model="value" basic :lang="lang" />
  </client-only>
</template>
      Info

      Because the editor is created after hydration, the instance properties (view, selection, …) are undefined on the server and until the ready event is emitted on the client.