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

      • 服务端渲染

      本组件兼容 SSR。CodeMirror 只在浏览器中(onMounted 时)创建,因此在服务端渲染时,组件只会输出空的容器元素,不会访问 window 或 document。

      Nuxt 3 / Nuxt 4

      直接使用即可:

      <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 或遇到问题时

      用 <ClientOnly> 包裹组件,使其只在浏览器中渲染:

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

      编辑器在水合之后才会创建。因此在服务端,以及客户端触发 ready 事件之前,实例属性(view、selection 等)均为 undefined。