Search code examples
vue.jswebpackmonaco-editor

Integrating Monaco Editor with VueJS

Following the example for integrating the Monaco Editor with Webpack shown here fails when using VueJS.

webpack.config.js:

// eslint-disable-next-line @typescript-eslint/no-var-requires
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.ttf$/,
            use: ['file-loader']
        }]
    },
    plugins: [
        new MonacoWebpackPlugin()
    ]
};

App.vue:

<template>
  <div id="container"></div>
</template>

<script>
import * as monaco from 'monaco-editor'

export default {
  mounted() {
    monaco.editor.create(document.getElementById('container'), {
      value: [
        'function x() {',
        '\tconsole.log("Hello world!");',
        '}'
      ].join('\n'),
      language: 'javascript'
    });
  },
};

</script>

<style>
#container{
  height: 100vh;
  overflow: hidden;
}
</style>

The editor appears and has syntax highlighting. However, typing causes Unexpected usage errors to be thrown.

Errors

What step am I missing? Thanks!

Solution

  • Use https://github.com/suren-atoyan/monaco-loader with VueJS.\

    import loader from '@monaco-editor/loader';
export default {
  mounted() {
    const wrapper = document.getElementById('editor')
    loader.init().then(monaco => {
      monaco.editor.create(wrapper, {
        value: 'const name = "Peter"',
      });
    });
  },
}