vue-codeditor

Multi-language vue js code editor component running on the browser.

Project setup

npm install vue-codeditor

Usage

Import vue-codeditor component

// main.js

import Vue from "vue"
import App from "./App.vue"
import vueCodeditor from "vue-codeditor";

Vue.component(vueCodeditor)

Usage in other components

<!-- App.vue -->

<template>
  <div id="app">
    <!-- 
        * Can be used in the loop (for multiple editor components)
        * Each component must have its own content value.
    -->
    <vue-codeditor v-model="content" mode="javascript" theme="chrome" />

    <!-- 
        * If you want it to be readonly, you should use "readonly='true'" directly!
    -->
    <vue-codeditor v-model="content2" mode="html" theme="monokai" readonly="true"/>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      content: "console.log('Hello world!')",
      content2: "<h1>Hello world!</h1>",
    };
  },
};
</script>

Available Props

Prop	Default	Type	Description
mode	javascript	String	optional - ace mode(s)
theme	chrome	String	optional - ace theme(s)
readonly	false	Boolean	optional

License

MIT

Copyright (c) 2020-present, Ömer Çelik