how to use in nuxt

[zouyn]

how to use in nuxt

[ManishKarki1997]

In nuxt.config.js

import MonacoWebpackPlugin from 'monaco-editor/webpack'

// if the above doesn't work, install 'monaco-editor-webpack-plugin' and import it
import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin'

then,

inside nuxt.config.js, in build configuration,
do like this

build: {
    /*
    ** You can extend webpack config here
    */
    plugins: [
      new MonacoWebpackPlugin({
        languages: ['javascript', 'python', 'java']
      })
    ],
    extend(config, ctx) {
    }
  }

Now you can just import the editor in a component, put it in template and use it as shown in the readme

[hawkofsky]

Hi, @ManishKarki1997, I added monaco-editor to nuxt as you indicated, but I faced the following error.

TypeError: _this._model.onDidChangeRawContent is not a function
at new Cursor (cursor.js?f961:154)
at StandaloneEditor.CodeEditorWidget._attachModel (codeEditorWidget.js?4a22:963)
at StandaloneEditor._attachModel (standaloneCodeEditor.js?e05c:204)
at new StandaloneEditor (standaloneCodeEditor.js?e05c:186)
at eval (standaloneEditor.js?3955:58)
at withAllStandaloneServices (standaloneEditor.js?3955:45)
at Object.create (standaloneEditor.js?3955:57)
at VueComponent.initMonaco (index.js?b61c:124)
at VueComponent.mounted (index.js?b61c:105)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)

could you tell me why this happended?

[miketromba]

I'm also getting an error when trying this.

[agtraveso]

@miketromba I fixed it downgrading monaco-editor-webpack-plugin to 1.7.0 version.

related issue: microsoft/monaco-editor-webpack-plugin#92