Monaco Editor Vue3

Monaco Editor is the code editor that powers VS Code, now it's available as a Vue3 component <MonacoEditor> thanks to this project.

Install

pnpm install @pf-ui/sql-editor

Or

yarn add @pf-ui/sql-editor

Or

npm i @pf-ui/sql-editor

Usage

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({
      // https://github.com/Microsoft/monaco-editor-webpack-plugin#options
      // Include a subset of languages support
      // Some language extensions like typescript are so huge that may impact build performance
      // e.g. Build full languages support with webpack 4.0 takes over 80 seconds
      // Languages are loaded on demand at runtime
      languages: ['javascript', 'css', 'html', 'typescript']
    })
  ]
}

Then use the component:

<template>
  <SqlEditor
    theme="vs"
    :options="options"
    language="javascript"
    :width="800"
    :height="800"
    :diffEditor="true"
    :original="original"
    v-model:value="value"
  ></SqlEditor>
</template>

<script>
import SqlEditor from '@pf-ui/sql-editor'
import '@pf-ui/sql-editor/dist/style.css'

export default {
  components: {
    SqlEditor
  },

  data() {
    return {
      code: 'const noop = () => {}'
    }
  }
}
</script>

<style>
.editor {
  width: 600px;
  height: 800px;
}
</style>

Use ESM version with Vite

See Stackblitz Demo

Use ESM version with rollup

Use rollup-plugin-monaco-editor:

// rollup.config.js
import { nodeResolve } from '@rollup/plugin-node-resolve';
import postcss from 'rollup-plugin-postcss';
import commonjs from '@rollup/plugin-commonjs';
import monaco from 'rollup-plugin-monaco-editor';

export default {
  output: {
    format: 'es',
    dir: 'dist',
  },
  // ...other config
  plugins: [
    // ...other plugins
    // handle .css files
    postcss(),
    monaco({
      languages: ['json'],
    }),
    nodeResolve(),
    commonjs(),
  ],
};

Props

• width: Editor width, eg: 800px or 800.
• height: Editor height, eg: 800px or 800.
• options: The second argument of monaco.editor.create.
• value: A shortcut to set options.value.
• theme: A shortcut to set options.theme.
• language: A shortcut to set options.language.
• diffEditor: boolean Indicate that this is a DiffEditor, false by default.
• original: if diffEditor set true, this will be used .

Component Events

editorWillMount

• Params:
  • monaco: monaco module

Called before mounting the editor.

editorDidMount

• Params:
  • editor: IStandaloneCodeEditor for normal editor, IStandaloneDiffEditor for diff editor.

Called when the editor is mounted.

change

Editor value is updated.

• Params:
  • value: New editor value.
  • event: The event from onDidChangeModelContent.

Editor Events

You can listen to the editor events directly like this:

<template>
  <SqlEditor v-model="code" @editorDidMount="editorDidMount" />
</template>

<script>
export default {
  methods: {
    editorDidMount(editor) {
      // Listen to `scroll` event
      editor.onDidScrollChange(e => {
        console.log(e)
      })
    }
  },

  data() {
    return {
      code: '...'
    }
  }
}
</script>