Monaco-volar has external dependency Onigasm (to highlight code).
pnpm add monaco-volar monaco-editor-core onigasm # or yarn add monaco-volar monaco-editor-core onigasm
Import monaco-volar when you are using monaco. It will register vue as a language automatic.
import 'monaco-editor-core' import 'monaco-volar'
VSCode are using Onigasm to highlight codes. And we have adapted the Onigasm and monaco. And some pre-defined grammars.
Onigasm needs a wasm module before using. We have to load it first.
import * as onigasm from "onigasm"; import onigasmWasm from "onigasm/lib/onigasm.wasm?url"; function loadOnigasm() { return onigasm.loadWASM(onigasmWasm); } loadOnigasm()
Now we can apply grammars into monaco editor instance.
import { editor } from "monaco-editor-core"; import { loadGrammars, loadTheme } from "monaco-volar"; const theme = loadTheme() const editorInstance = editor.create(element, { theme, /* other options*/ }) loadGrammars(editorInstance);
We need to let monaco know where and how to load out worker when using Vue.
import editorWorker from "monaco-editor-core/esm/vs/editor/editor.worker?worker"; import vueWorker from "monaco-volar/vue.worker?worker"; function loadMonacoEnv() { (self as any).MonacoEnvironment = { async getWorker(_: any, label: string) { if (label === "vue") { return new vueWorker(); } return new editorWorker(); }, }; } loadMonacoEnv()
We have some pre-defined type declaration files to provide type check and more language features.
import { prepareVirtualFiles } from "monaco-volar"; prepareVirtualFiles();
Now we can just create a model using vue language.
const model = editor.createModel(code, 'vue', uri);
monaco.languages.vue.vueDefaults.addExtraLib(uri, code);