Nuxt 2 is reaching End-of-Life on June 30th, 2024.


Integrate monaco-editor with Nuxt

Nuxt Monaco Editor

npm versionLicense: MITCodacy BadgeTest result

Integrate monaco-editor with Nuxt


npx nuxi@latest module add nuxt-monaco-editor

Don't forget to install monaco-editor.


  1. Add this module to the Nuxt config
export default defineNuxtConfig({
  modules: [
  1. (Optional) Configure the module
export default defineNuxtConfig({
  monacoEditor: {
    // These are default values:
    locale: 'en',
    componentName: {
      codeEditor: 'MonacoEditor',
      diffEditor: 'MonacoDiffEditor'
  1. Use the component in your pages or components
  <MonacoEditor v-model="value" lang="typescript" />

<script lang="ts" setup>
const value = ref('')


  • Run npm run dev:prepare to generate type stubs.
  • Use npm run dev to start playground in development mode.