egoist/vue-monaco

Usage with nuxt

schuster-rainer opened this issue · 3 comments

schuster-rainer commented

I'm just trying to use the editor with nuxt, but I couldn't figure out how to confgiure nuxt or vue-monaco properly to build. Is there any chance someone knows how to configure the component for nuxt?

egoist commented

The simplest way is to use the webpack plugin: https://github.com/egoist/vue-monaco#use-esm-version-with-webpack

tansaku commented

I'm trying with nuxt too. I have vue-monaco installed - here it is in package.json

  "dependencies": {
    "@nuxt/content": "^1.14.0",
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/pwa": "^3.3.5",
    "core-js": "^3.9.1",
    "nuxt": "^2.15.3",
    "nuxt-buefy": "^0.4.4",
    "vue-monaco": "^1.2.2"
  },

I followed the instructions, adding this to the top of nuxt.config.js

  const MonacoEditorPlugin = require('monaco-editor-webpack-plugin')

but I get this:

  │   ✖ Nuxt Fatal Error                                                           │
   │                                                                                │
   │   Error: Cannot find module 'monaco-editor-webpack-plugin'                     │
   │   Require stack:                                                               │
   │   - /myproj/nuxt.config.js

does it have to be in a separate webpack.config.js file?

florianjs commented

I'm trying with nuxt too. I have vue-monaco installed - here it is in package.json

  "dependencies": {
    "@nuxt/content": "^1.14.0",
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/pwa": "^3.3.5",
    "core-js": "^3.9.1",
    "nuxt": "^2.15.3",
    "nuxt-buefy": "^0.4.4",
    "vue-monaco": "^1.2.2"
  },

I followed the instructions, adding this to the top of nuxt.config.js

  const MonacoEditorPlugin = require('monaco-editor-webpack-plugin')

but I get this:

  │   ✖ Nuxt Fatal Error                                                           │
   │                                                                                │
   │   Error: Cannot find module 'monaco-editor-webpack-plugin'                     │
   │   Require stack:                                                               │
   │   - /myproj/nuxt.config.js

does it have to be in a separate webpack.config.js file?

yarn add monaco-editor-webpack-plugin