davidracl / nuxt-monaco-editor

Integrate monaco-editor with Nuxt

Home Page:https://e-chan1007.github.io/nuxt-monaco-editor

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Nuxt Monaco Editor

npm version License: MIT Codacy Badge Test result

Integrate monaco-editor with Nuxt

Install

# npm
npm install -D monaco-editor nuxt-monaco-editor

# yarn
yarn add -D monaco-editor nuxt-monaco-editor

# pnpm
pnpm add -D monaco-editor nuxt-monaco-editor

Don't forget to install monaco-editor.

Setup

  1. Add this module to the Nuxt config
export default defineNuxtConfig({
  modules: [
    'nuxt-monaco-editor'
  ]
})
  1. (Optional) Configure the module
export default defineNuxtConfig({
  monacoEditor: {
    // These are default values:
    dest: '_monaco',
    locale: 'en',
    componentName: {
      codeEditor: 'MonacoEditor',
      diffEditor: 'MonacoDiffEditor'
    }
  }
})
  1. 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 npm run dev:prepare to generate type stubs.
  • Use npm run dev to start playground in development mode.

About

Integrate monaco-editor with Nuxt

https://e-chan1007.github.io/nuxt-monaco-editor

License:MIT License


Languages

Language:TypeScript 56.5%Language:Vue 35.2%Language:JavaScript 5.6%Language:CSS 2.0%Language:Shell 0.7%