@rozie-ui/codemirror-vue

@rozie-ui/codemirror-vue

Idiomatic vue CodeMirror — a cross-framework code editor compiled from one Rozie source wrapping CodeMirror 6. This package is generated; do not edit src/ by hand.

Install

npm i @rozie-ui/codemirror-vue

Peer dependencies: the five @codemirror/* engine packages (@codemirror/state, @codemirror/view, @codemirror/commands, @codemirror/lang-javascript, @codemirror/theme-one-dark) plus the codemirror meta-package (for the basicSetup bundle), all ^6, + vue. Install them alongside this package.

Usage

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

const value = ref('const greeting = "hello";\n');
</script>

<template>
  <CodeMirror v-model:value="value" language="javascript" theme="dark" />
</template>

Props

Imperative handle

Beyond props, the component exposes imperative methods (declared once in the Rozie source via $expose). Grab a handle with the native ref mechanism and call them directly:

<script setup>
import { ref } from 'vue';
const cm = ref();          // template ref
</script>

<template>
  <CodeMirror ref="cm" />
  <button @click="cm.focus()">Focus</button>
</template>

Slots