Quickstart

Getting started with @nhtio/vue-editors is quick and easy. Just follow the steps below and you'll be up and running in no time.

Installation

You can install @nhtio/vue-editors directly from your preferred package manager

npm

npm i @nhtio/vue-editors

pnpm

pnpm add @nhtio/vue-editors

yarn

yarn add @nhtio/vue-editors

Using

The directions below will help you get started quickly and easily.

See it in action

If you want to see how the code that we're showing you works in action, check out the playground

Setting up the filesystem

All editors use a shared reactive virtual file system to manage the state of the file(s) which are being edited by the editors. You can import this filesystem from @nhtio/vue-editors/fs:

import { NVEFileSystem } from '@nhtio/vue-editors/fs'
const fs = new NVEFileSystem()

Once you have the filesystem, your editor should have 1 or more files available to be edited. You can accomplish this by using the createDirent method:

const dirent = fs.createDirent('example.vue', '/', [
    '<script lang="ts" setup>',
    "  import { ref } from 'vue'",
    "  const msg = ref('hello world')",
    '<\/script>',
    '<template>',
    '    <div>{{ msg }}</div>',
    '</template>',
].join('\n'))

For more information about NVEFileSystem and NVEDirent, check out the @nhtio/vue-editors/fs API Documentation and the filesystem guide.

Using the Monaco Editor

The Monaco Editor is the code editor that powers VS Code. Aside from being an incredibly powerful code editor, it also provides additonal enhancements like automatic type resolutions (where possible), peeking, jumping, and other features.

The MonacoEditor component is an SSR-safe Vue component which can be loaded and used in any Vue application. In the appropriate browser environment, it will correctly render the Monaco Editor. To use it, import MonacoEditor from @nhtio/vue-editors/code/monaco/editor

import { MonacoEditor } from '@nhtio/vue-editors/code/monaco/editor'

From here, you can now use it the same way that you would use any other Vue component:

Within a Vue Component

<script setup lang="ts">
import { NVEFileSystem } from '@nhtio/vue-editors/fs'
import { MonacoEditor } from '@nhtio/vue-editors/code/monaco/editor'
const fs = new NVEFileSystem()
const dirent = fs.createDirent('example.vue', '/', [
          '<script lang="ts" setup>',
          "  import { ref } from 'vue'",
          "  const msg = ref('hello world')",
          '<\/script>',
          '<template>',
          '    <div></div>',
          '<\/template>',
        ].join('\n'))
const opts = {
  theme: 'vs-dark',
  fs,
  file: dirent.uri,
  minimap: {
    enabled: false
  },
  inlineSuggest: {
    enabled: false,
  }
}
</script>

<template>
  <MonacoEditor v-bind="opts" />
</template>

As a globally accessible component

import { createApp } from "vue";
import App from 'App.vue'
import { MonacoEditor } from '@nhtio/vue-editors/code/monaco/editor'
const app = createApp(App)
app.component('MonacoEditor', MonacoEditor)
app.mount('#app')

See it in action

This is the rendered result of the example code above

<script lang="ts" setup>
  import { ref } from 'vue'
  const msg = ref('hello world')
</script>
<template>
    <div>{{ msg }}</div>
</template>

For more information on the Monaco Editor component, see the MonacoEditor API Documentation