Nuxt Monaco 编辑器

将 monaco-editor 集成到 Nuxt 中

安装

npx nuxi@latest module add nuxt-monaco-editor

不要忘记安装 monaco-editor。

设置

将此模块添加到 Nuxt 配置中

export default defineNuxtConfig({
  modules: [
    'nuxt-monaco-editor'
  ]
})

(可选) 配置模块

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

在你的页面或组件中使用该组件

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

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

开发

运行 npm run dev:prepare 生成类型声明。
使用 npm run dev 启动 playground 开发模式。