nuxt-monaco-editor
nuxt-monaco-editor

monaco-editor を Nuxt と統合

Nuxt Monaco Editor

npm versionLicense: MITCodacy BadgeTest result

monaco-editor を Nuxt と統合

インストール

npx nuxi@latest module add nuxt-monaco-editor

monaco-editor をインストールすることを忘れないでください。

セットアップ

  1. このモジュールを Nuxt の設定に追加します。
export default defineNuxtConfig({
  modules: [
    'nuxt-monaco-editor'
  ]
})
  1. (オプション) モジュールを構成する
export default defineNuxtConfig({
  monacoEditor: {
    // These are default values:
    locale: 'en',
    componentName: {
      codeEditor: 'MonacoEditor',
      diffEditor: 'MonacoDiffEditor'
    }
  }
})
  1. ページまたはコンポーネントでコンポーネントを使用する
<template>
  <MonacoEditor v-model="value" lang="typescript" />
</template>

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

開発

  • 型スタブを生成するには、npm run dev:prepareを実行してください。
  • npm run dev を使用して、開発モードでプレイグラウンドを開始します。