simple-vue-monaco v1.1.0

Monaco for Vue

This is a component that wraps Microsoft's great Monaco editor for Vue. (yes another one) (this one is better i promise)

All props are reactive.

See below for (pretty self explanatory) usage.

You may use any theme from here by name.

You can use monaco from an npm package by passing to noCDN. This will only do anything on the first render of any <Monaco>, and will apply to all later uses of the component.

If you do not do this, monaco will just be loaded from jsDelivr.

<script setup lang="ts">
import {ref} from "vue";
import Monaco from "simple-vue-monaco";
import * as monaco from "monaco-editor"

let value = ref("");
</script>

<template>
<!--value and lang are required-->
  <Monaco
      v-model="value"
      lang="javascript"
      theme="Monokai"
      :readonly="false"
      height="30rem"
      width="20rem"
      :otherCfg="{}"
      :noCDN="monaco"
  />
</template>