monaco-volar

Try it!

Install

Monaco-volar has external dependency Onigasm (to highlight code).

pnpm add monaco-volar monaco-editor onigasm

# or

yarn add monaco-volar monaco-editor onigasm

Setup

Import

Import monaco-volar when you are using monaco. It will register vue as a language automatic.

import 'monaco-editor'
import 'monaco-volar'

Setup highlight

Init Onigasm

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()

Apply grammars

Now we can apply grammars into monaco editor instance.

import { editor } from "monaco-editor";
import { loadGrammars, loadTheme } from "monaco-volar";

const theme = loadTheme()

const editorInstance = editor.create(element, {
    theme,
    /* other options*/
})

loadGrammars(editorInstance);

Setup language service

Provide web worker

We need to let monaco know where and how to load out worker when using Vue.

import editorWorker from "monaco-editor/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()

Prepare virtual files

We have some pre-defined type declaration files to provide type check and more language features.

import { prepareVirtualFiles } from "monaco-volar";

prepareVirtualFiles();

Create vue model

Now we can just create a model using vue language.

const model = editor.createModel(code, 'vue', uri);

API

Add extra lib

monaco.languages.vue.vueDefaults.addExtraLib(uri, code);