monaco-editor-vue

monaco-editor-vue

Monaco Editor for Vue 3.

Requires Vue 3.4+, monaco-editor 0.56+, and an ESM bundler (Vite 6+ or Webpack 5). Vite 5 is not supported. This package is ESM-only.

Vue 2 projects should stay on monaco-editor-vue@1.0.10.

Installation

npm install monaco-editor-vue monaco-editor

monaco-editor is a peer dependency. The host app must install it and configure its web workers.

Using with Vite

Vite 6 or newer is required. Vite 5 cannot resolve the Monaco 0.56 worker exports used by this package.

Call setupMonacoEnvironment once before creating the editor. Vite's ?worker imports only work in the app that Vite bundles, which is why this helper lives in a separate entry.

// main.ts
import { createApp } from 'vue'
import { setupMonacoEnvironment } from 'monaco-editor-vue/vite'
import App from './App.vue'
import 'monaco-editor/min/vs/editor/editor.main.css'

setupMonacoEnvironment()
createApp(App).mount('#app')

<template>
  <MonacoEditor
    v-model="code"
    language="javascript"
    theme="vs-dark"
    :options="options"
    @mount="onMount"
    @change="onChange"
    @validate="onValidate"
  />
</template>

<script setup>
import { ref } from 'vue'
import MonacoEditor from 'monaco-editor-vue'

const code = ref('console.log("hello")')
const options = {
  minimap: { enabled: false },
}

function onMount(editor) {
  editor.focus()
}

function onChange(value) {
  console.log(value)
}

function onValidate(markers) {
  console.log(markers)
}
</script>

Vite needs ES module workers:

// vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    exclude: ['monaco-editor'],
  },
  resolve: {
    alias: {
      // monaco-editor 0.56 package exports do not include this CSS path
      'monaco-editor/min/vs/editor/editor.main.css': fileURLToPath(
        new URL(
          './node_modules/monaco-editor/min/vs/editor/editor.main.css',
          import.meta.url,
        ),
      ),
    },
  },
  worker: {
    format: 'es',
  },
})

If you prefer to wire workers yourself, copy this instead of importing monaco-editor-vue/vite:

import EditorWorker from 'monaco-editor/editor/editor.worker?worker'
import JsonWorker from 'monaco-editor/language/json/json.worker?worker'
import CssWorker from 'monaco-editor/language/css/css.worker?worker'
import HtmlWorker from 'monaco-editor/language/html/html.worker?worker'
import TsWorker from 'monaco-editor/language/typescript/ts.worker?worker'

self.MonacoEnvironment = {
  getWorker(_, label) {
    if (label === 'json') return new JsonWorker()
    if (label === 'css' || label === 'scss' || label === 'less') return new CssWorker()
    if (label === 'html' || label === 'handlebars' || label === 'razor') return new HtmlWorker()
    if (label === 'typescript' || label === 'javascript') return new TsWorker()
    return new EditorWorker()
  },
}

Use monaco-editor/editor/... and monaco-editor/language/.... The old monaco-editor/esm/vs/... paths do not resolve under monaco-editor 0.56.

Using with Webpack

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
  plugins: [
    new MonacoWebpackPlugin({
      languages: ['javascript', 'json', 'html', 'css', 'typescript'],
    }),
  ],
}

Use monaco-editor-webpack-plugin@7 with monaco-editor 0.56. Do not import monaco-editor-vue/vite in a Webpack app.

Vue CLI:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
  chainWebpack: (config) => {
    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
      {
        languages: ['json', 'javascript', 'html', 'xml'],
      },
    ])
  },
}

Properties

v-model is the preferred way to bind editor text. :value still works for one-way updates.

• width width of editor. Defaults to 100%.
• height height of editor. Defaults to 100%.
• value / v-model value of the auto created model in the editor.
• original value of the auto created original model in the editor. Diff mode only.
• language the initial language of the auto created model. Defaults to javascript.
• theme the theme of the editor. Defaults to vs.
• options refer to IStandaloneEditorConstructionOptions.
• editorBeforeMount(monaco) called before the editor is created. Prefer @before-mount in new code.
• editorMounted(editor, monaco) called after the editor is created. Prefer @mount in new code.

Events

Use Vue 3 event listeners. Names are camelCase in emit, kebab-case in templates.

<MonacoEditor
  v-model="code"
  @mount="onMount"
  @change="onChange"
  @validate="onValidate"
  @cursor-change="onCursorChange"
/>

v-model still emits update:modelValue. Vue 2 @input is gone.

Exposed instance

Access via template ref:

editorRef.value?.focus()
editorRef.value?.getPosition()
editorRef.value?.layout()

• editor current Monaco instance
• monaco
• getEditor() code editor; Diff mode returns the modified side
• getValue() / setValue(value)
• getModel()
• layout(dimension?)
• focus()
• getPosition() / setPosition(position)
• getSelection() / setSelection(selection)
• updateOptions(options)

Diff editor

<MonacoEditor
  v-model="code"
  :diff-editor="true"
  original="const a = 1"
  language="javascript"
/>

Monaco only supports one theme globally.

Local playground

npm install
npm run dev

Migrating from 1.x

1.x (monaco-editor-vue@1.0.10) is Vue 2 only. 2.x is Vue 3 only.

• Stay on 1.0.10 if the app is still Vue 2.
• Install monaco-editor@^0.56.0 yourself. It is no longer bundled.
• Replace Vue 2 v-model / @input with Vue 3 v-model (modelValue).
• For Vite, call setupMonacoEnvironment() from monaco-editor-vue/vite.
• For Webpack, upgrade monaco-editor-webpack-plugin to 7.x.
• options now maps to IStandaloneEditorConstructionOptions.