Nuxt Monaco Editor
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を使用して、開発モードでプレイグラウンドを開始します。