Skip to content
This repository has been archived by the owner. It is now read-only.
NO LONGER MAINTAINED. A Vue2 component for including the ace editor
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Due to lack of time I can't maintain this component anymore. If someone is interested in taking it over and going further with the development, feel free to contact me.


A Vue2 component for including the ace editor.


npm install --save vue2-ace

How to use

Import the component, the mode and the theme in <script>.

import editor from 'vue2-ace'
import 'brace/mode/javascript'
import 'brace/theme/chrome'

Register the component in the Vue options.

components: {

Use the component in your template. Make sure to change variable to a string the editor should start with (it can be an empty string too).

<editor :content="variable"></editor>

The content-prop is required, the other props have the following defaults:

lang: javascript
theme: chrome
height: 300px
width: 100%
sync: false
options: {}

If you want to change any of these defaults, just include them when you use the component in the template.

<editor :content="variable" :height="'500px'"></editor>

<editor :content="variable" :width="'50%'"></editor>

<editor :content="variable" :lang="'html'"></editor>

<editor :content="variable" :theme="'github'"></editor>

<editor :content="variable" :sync="true"></editor>

<editor :content="variable" :options="options"></editor>

The theme can be changed after the component already has been mounted. Just change the string of the theme-variable.

To sync the content of the editor to the original content-variable, set the sync prop to true. Watch out: Every time the the original variable updates, the editor will also update it's content.

If you want to use another lang or theme, don't forget to import it.

You can pass extra options like font-family or font-size using the option prop. It is set in the component using editor.setOptions().

data () {
  return {
    options: {
      fontSize: '12pt'

Last but not least listen on the editor-update. Make sure to replace vm.function with the function you want to execute.

mounted () {
  var vm = this;
  vm.$on('editor-update', vm.function);
You can’t perform that action at this time.