Ninja Pumpkin Mutants

    nuxt-monaco-editor
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    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.

    Install

    npm i nuxt-monaco-editor

    DownloadsWeekly Downloads

    71

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    17 kB

    Total Files

    15

    Last publish

    Collaborators

    • e_chan1007