@composy/code-editor-vue

@composy/code-editor-vue

Vue 3 adapter for @composy/code-editor-core.

Features

• <CodeEditor /> with v-model, save/change/focus events and runtime option updates.
• <DiffEditor /> for URI-backed original/modified comparison backed by the core DiffEditor.
• useCodeEditor() and useDiffEditor() composables.
• Model URI inspection/switching through uri, modelChange, getModel() and setModel().
• v-code-editor directive for lightweight DOM mounting.
• Re-exported core APIs, types, class constants and style helpers.

Install

pnpm add @composy/code-editor-vue @composy/code-editor-core monaco-editor vue

vue and monaco-editor are peer dependencies.

Component Usage

<script setup lang="ts">
import { CodeEditor, DiffEditor } from '@composy/code-editor-vue'
import { ref } from 'vue'
import '@composy/code-editor-vue/index.css'

const code = ref('const answer = 42')
const before = ref('const answer = 41')
const after = ref('const answer = 42')

function handleSave(value: string) {
  console.info(value)
}
</script>

<template>
  <CodeEditor
    v-model="code"
    uri="file:///workspace/src/main.ts"
    language="typescript"
    theme="github-light"
    placeholder="Write TypeScript..."
    height="var(--ld-px-48)"
    :style-vars="{ accent: 'var(--ld-primary-500)' }"
    @save="handleSave"
    @model-change="model => console.info(model?.uri.toString())"
  />

  <DiffEditor
    v-model:modified="after"
    :original="before"
    original-uri="file:///workspace/src/before.ts"
    modified-uri="file:///workspace/src/after.ts"
    language="typescript"
    :render-side-by-side="true"
  />
</template>

Composable Usage

import { useCodeEditor } from '@composy/code-editor-vue'
import { ref } from 'vue'

const containerRef = ref<HTMLElement | null>(null)
const editor = useCodeEditor(containerRef, {
  language: 'typescript',
  value: 'export const ok = true',
})

editor.replaceSelection('ok')
editor.setReadOnly(false)
editor.getModelUri()
editor.setModel('file:///workspace/src/other.ts', {
  value: 'export const other = true',
  language: 'typescript',
})

immediate defaults to true. Pass immediate: false to defer creation, then call init() when the container is ready. Once initialized, replacing the container ref recreates the editor.

import { useCodeEditor } from '@composy/code-editor-vue'
import { ref } from 'vue'

const containerRef = ref<HTMLElement | null>(null)
const editor = useCodeEditor(containerRef, {
  immediate: false,
  language: 'typescript',
})

editor.init()

Directive Usage

<template>
  <div
    v-code-editor.readonly="{
      value: code,
      language: 'json',
      onSave: save,
    }"
  />
</template>

Class And Token Rules

All visible DOM classes use the ldesign-code-editor namespace from core:

• ldesign-code-editor
• ldesign-code-editor__container
• ldesign-code-editor-diff
• ldesign-code-editor-diff__container

Component CSS uses --ldesign-code-editor-* variables. Defaults reference global LDesign token CSS variables:

• Color values from packages/color / styles/color.css, for example --ld-gray-200 and --ld-primary-500.
• Size values from packages/size / styles/size.css, for example --ld-radius-md, --ld-spacing-md and --ld-px-48.

Load global color and size token CSS before mounting the Vue components.

Plugin

import CodeEditorVue from '@composy/code-editor-vue'
import { createApp } from 'vue'
import '@composy/code-editor-vue/index.css'

createApp(App).use(CodeEditorVue).mount('#app')

Build Outputs

The package uses @composy/builder and generates:

• dist/index.js, dist/index.min.js, dist/index.css, and dist/index.min.css
• es/** and esm/** with ESM declarations
• lib/** with CommonJS declarations

The build normalizes the outputs and verifies all declared package entry points. Builder package updates stay disabled so package.json remains the source of truth for exports and publishing fields.

Commands

pnpm --filter @composy/code-editor-vue type-check
pnpm --filter @composy/code-editor-vue type-check:cjs
pnpm --filter @composy/code-editor-vue lint:check
pnpm --filter @composy/code-editor-vue build
pnpm --filter @composy/code-editor-vue outputs:check

License

MIT