CSML Monaco Editor

CSML Monaco Editor is a customized version of Monaco Editor with support (syntax highlighting, code completion) for the CSML programming language.

Table of Contents

• Quick start
• Project setup

Quick start

You need Vue.js version 2.6+.

1 Install via npm

npm install @clevy/vue-csml-monaco

2 Import

Bundle

import Vue from 'vue';
import CsmlMonacoEditor from '@clevy/vue-csml-monaco';

Vue.use(CsmlMonacoEditor);

You'll then have access to those components:

• CsmlMonacoEditor
• MonacoEditor

CSML Monaco Editor

To avoid a large bundle size, Monaco Editor is externalized from the library. So if you want to use the vue-csml-monaco component in your project, you have to install and load Monaco Editor in your project directly.

npm install monaco-editor
npm install monaco-editor-webpack-plugin

Use ESM version with webpack

Use monaco-editor-webpack-plugin:

// webpack.config.js
const MonacoEditorPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
  plugins: [
    new MonacoEditorPlugin({
      // Available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options.
      languages: [],
      features: [
        '!codelens',
        '!colorPicker',
      ],
    })
  ]
}

If using Vue CLI instead of Webpack directly, you can add to vue.config.js:

// vue.config.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new MonacoWebpackPlugin({
        // Available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options.
        languages: [],
        features: [
          '!codelens',
          '!colorPicker',
        ],
      }),
    ],
  },
};

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build