Skip to content

Xiangzi529/monaco-vue

 
 

Repository files navigation

monaco-vue

🎉 version v1 support vue 2&3 now ✌

Use monaco-editor loaded from CDN in Vue 2&3, no need to configure plugins in webpack (or rollup, vite) and other packaging tools.

gitHub license npm version

English | 简体中文

View Demo.

If you wanna use monaco-editor as an NPM Package, loading monaco-editor files from node_modules and bundling them into your code, you still need to use the plugin for the packaging tool.

Installation

npm i @guolao/vue-monaco-editor

Vue <= 2.6.14 requires @vue/composition-api to be installed.

npm i @guolao/vue-monaco-editor @vue/composition-api

Of course, you can also use unpkg.

Usage

Register the component.

import { createApp } from 'vue'
import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'

const app = createApp(App)
app.use(VueMonacoEditorPlugin, {
  paths: {
    // The recommended CDN config
    vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
  },
})

// You can also:
// main.ts
import { loader } from '@guolao/vue-monaco-editor'
loader.config({
  paths: {
    vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs',
  },
})

// editor.vue
import { VueMonacoEditor } from '@guolao/vue-monaco-editor'
export default {
  components: { VueMonacoEditor },
}

And then, use it.

Editor

<template>
  <vue-monaco-editor
    v-model:value="code"
    theme="vs-dark"
    :options="MONACO_EDITOR_OPTIONS"
    @mount="handleMount"
  />
</template>

<script lang="ts" setup>
import { ref, shallowRef } from 'vue'

const MONACO_EDITOR_OPTIONS = {
  automaticLayout: true,
  formatOnType: true,
  formatOnPaste: true,
}

const code = ref('// some code...')
const editorRef = shallowRef()
const handleMount = editor => (editorRef.value = editor)

// your action
function formatCode() {
  editorRef.value?.getAction('editor.action.formatDocument').run()
}
</script>

Diff Editor

<template>
  <vue-monaco-diff-editor
    theme="vs-dark"
    original="// the original code"
    modified="// the modified code"
    language="javascript"
    :options="OPTIONS"
    @mount="handleMount"
  />
</template>

<script lang="ts" setup>
import { ref, shallowRef } from 'vue'

const OPTIONS = {
  automaticLayout: true,
  formatOnType: true,
  formatOnPaste: true,
  readOnly: true,
}

const diffEditorRef = shallowRef()
const handleMount = diffEditor => (diffEditorRef.value = diffEditor)

// get the original value
function getOriginalValue() {
  return diffEditorRef.value.getOriginalEditor().getValue()
}

// get the modified value
function getOriginalValue() {
  return diffEditorRef.value.getModifiedEditor().getValue()
}
</script>

Props & Events & slots

Editor

Name Type Default Description remark
value string value of the current model, can use v-model:value v-model:value
language string all language of the current model languages supported by monaco-editor, view here
path string path to the current model
defaultValue string default value of the current model
defaultLanguage string default language of the current model languages supported by monaco-editor view here
defaultPath string default path of the current model monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))
theme vs | vs-dark vs the theme for the monaco editor.
line number number of lines to jump to
options object {} IStandaloneEditorConstructionOptions
overrideServices object {} IEditorOverrideServices
saveViewState boolean true save the view state of the model (scroll position, etc.) after model changes a unique path needs to be configured for each model
width number | string 100% container width
height number | string 100% container height
className string inner container class name
@beforeMount (monaco: Monaco) => void execute before the editor instance is created (don't use @before-mount in vue2, detail)
@mount (editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void execute after the editor instance has been created
@change (value: string | undefined, event: monaco.editor.IModelContentChangedEvent) => void execute when the changed value change
@validate (markers: monaco.editor.IMarker[]) => void execute when a syntax error occurs monaco-editor supports syntax-checked languages view here
#default slot 'loading...' loading status when loading files from CDN, displaying the loading status will be more friendly
#failure slot 'load failed' failure status example: CDN network error

Diff Editor

Name Type Default Description
original string The original source value (left editor)
modified string The modified source value (right editor)
language string Language for the both models - original and modified (all languages that are supported by monaco-editor)
originalLanguage string This prop gives you the opportunity to specify the language of the original source separately, otherwise, it will get the value of the language property.
modifiedLanguage string This prop gives you the opportunity to specify the language of the modified source separately, otherwise, it will get the value of language property.
originalModelPath string Path for the "original" model. Will be passed as a third argument to .createModel method - monaco.editor.createModel(..., ..., monaco.Uri.parse(originalModelPath))
modifiedModelPath string Path for the "modified" model. Will be passed as a third argument to .createModel method - monaco.editor.createModel(..., ..., monaco.Uri.parse(modifiedModelPath))
theme vs | vs-dark | string vs (vs theme equals light theme) The theme for the monaco editor. Define new themes by monaco.editor.defineTheme.
options object {} IStandaloneDiffEditorConstructionOptions
width number | string 100% Container width
height number | string 100% Container height
className string Inner container class name
@beforeMount (monaco: Monaco) => void Execute before the editor instance is created (don't use @before-mount in vue2, detail)
@mount (editor: monaco.editor.IStandaloneDiffEditor, monaco: Monaco) => void Execute after the editor instance has been created
#default slot 'loading...' Loading status
#failure slot 'load failed' Failure status

Hooks

useMonaco use @monaco-editor/loader to load monaco-editor from the CDN.

<template>
  <div ref="containerRef"></div>
</template>

<script lang="ts" setup>
import { ref, onUnmounted, watchEffect, nextTick } from 'vue'
import { useMonaco } from '@guolao/vue-monaco-editor'

const containerRef = ref()
const { monacoRef, unload } = useMonaco()

// watch once
const stop = watchEffect(() => {
  if (monacoRef.value && containerRef.value) {
    nextTick(() => stop())
    monacoRef.value.editor.create(containerRef.value, { ... })
  }
})

/*
  When the component will be unmount,
  If the monaco instance is not successfully loaded,
  You need to manually unload.
*/
onUnmounted(() => !monacoRef.value && unload())
</script>

CDN

vue-monaco-editor use @monaco-editor/loader to load the monaco-editor from the CDN(the loading process of loader is asynchronous).

The configuration of loader is global, only to be configured once.

import { createApp } from 'vue'
import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'

const app = createApp(App)
app.use(VueMonacoEditorPlugin, {
  paths: {
    // The recommended CDN config
    vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
  },
})
import { loader } from "@guolao/vue-monaco-editor"

// loaded from CDN
loader.config({
  paths: {
    vs: 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
  },
})

// configurable for different languages
loader.config({ "vs/nls": { availableLanguages: { "*": "de" } } })

// or
loader.config({
  paths: {
    vs: "...",
  },
  "vs/nls" : {
    availableLanguages: {
      "*": "de",
    },
  },
})

NPM Package

If you wanna use monaco-editor as an NPM Package, loading monaco-editor files from node_modules and bundling them into your code, you still need to use the plugin for the packaging tool.

import * as monaco from "monaco-editor"
import { loader } from "@guolao/vue-monaco-editor"

// loaded monaco-editor from `node_modules`
loader.config({ monaco })

Vite

If you are using vite, you need to do this (see #1791 (comment) for details).

import { loader } from "@guolao/vue-monaco-editor"

import * as monaco from "monaco-editor"
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker"
import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker"
import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"
import tsWorker from "monaco-editor/esm/vs/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()
  }
}

loader.config({ monaco })

Rollup

If you are using Rollup, you can use the community provided plugin rollup-plugin-monaco-editor.

Webpack

If you are using webpack, the official monaco-editor provides a webpack plugin called monaco-editor-webpack-plugin, which you can install and use.

Inspiration

MonacoVue is made possible thanks to the inspirations from the following projects:

License

MIT

About

Use monaco-editor loaded from CDN in Vue 2&3.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 85.7%
  • Less 6.3%
  • JavaScript 3.9%
  • Vue 2.0%
  • HTML 1.2%
  • CSS 0.8%
  • Shell 0.1%