nuxt-monaco-editor

Nuxt Monaco Editor

Integrate monaco-editor with Nuxt

Install

npx nuxi@latest module add nuxt-monaco-editor

Don't forget to install monaco-editor.

Version requirements

• nuxt-monaco-editor v1.5.0 or later requires monaco-editor v0.56.0 or later.
• If you use monaco-editor v0.55.x or earlier, use nuxt-monaco-editor v1.4.2.

Setup

1. Add this module to the Nuxt config

export default defineNuxtConfig({
  modules: ["nuxt-monaco-editor"],
});

2. (Optional) Configure the module

export default defineNuxtConfig({
  monacoEditor: {
    // These are default values:
    locale: "en",
    componentName: {
      codeEditor: "MonacoEditor",
      diffEditor: "MonacoDiffEditor",
    },
  },
});

3. Use the component in your pages or components

<template>
  <MonacoEditor v-model="value" lang="typescript" />
</template>

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

Development

• Run pnpm dev:prepare to generate type stubs.
• Use pnpm dev to start playground in development mode.
• Run pnpm exec playwright-core install --with-deps to install dependencies for testing.
• Run pnpm test to run tests.
• Run pnpm lint to run linting.