Ace Editor Vue Component

Making certain JavaScript UI solutions work with Vue can be a bit of a hassle at times especially if you are new to Vue. Ace editor, for example, is a great solution for developer that want to add a syntax highlighting textbox to their site but right out of the box it doesn’t place nicely with Vue. For this reason I wrote the following Ace editor Vue component that you can feel free to include in your own project(s):

Including the above code in your project after including the vue.js will give you the ability to add the <ace-editor> element to your vue containers. The following exemplifies this fact:

As you can see in the above code, in the head I am first including vue.js and ace.js. After that I include ace-editor-vue-component.js. Then, as you see in the body, I add a container div with an id of “myVue” to contain my <ace-editor> element. Finally I create a vue using the Vue constructor which references that “myVue” div container.

Live Example

All of this results in something similar to the following example:

Properties

The first and most important property is the v-model property which controls what the value of the editor is by binding its value to a vue’s data property. Of course, you can just use the value property if you don’t want to bind the value to a variable in the vue. You may have noticed that in my examples above I assign the code variable to my ace editor: <ace-editor v-model="code"></ace-editor>.

If you look at the file-ace-editor-vue-component.js script and check out the PROPS variable you will see all of the properties that you can set on this <ace-editor> element. One important thing is to note is that although the property names of PROP are camel-cased, you must dash-case those same property names for them to work. For example maxLines becomes would be used like <ace-editor max-lines="10"></ace-editor>.

Whenever you are working with a value that needs to be converted to a boolean you can use yes, on, true, or 1 for it to evaluate to true. You can use no, off, false, 0 or the empty string for it to evaluate to false. For example if you want fadeFoldWidgets to be set to false you can do something like <ace-editor fade-fold-widgets="off"></ace-editor>.

Events

If you want to capture some basic events you can use any of the ones in the list below:

• blur: v-on:blur="…"
• change: v-on:change="…"
• changeSelectionStyle: v-on:changeSelectionStyle="…" or v-on:change-selection-style="…"
• changeSession: v-on:changeSession="…" or v-on:change-session="…"
• copy: v-on:copy="…"
• focus: v-on:focus="…"
• paste: v-on:paste="…"
• changeAnnotation: v-on:changeAnnotation="…" or v-on:change-annotation="…"
• error: v-on:error="…"
• errorsRemoved: v-on:errorsRemoved="…" or v-on:errors-removed="…"
• warning: v-on:warning="…"
• warningsRemoved: v-on:warningsRemoved="…" or v-on:warnings-removed="…"

Example In The Wild

I am actually using this very component for the YourJS Console and can say that it works very well. You can also check out this CodePen.

Final Words

Even though using Vue along with other UI solutions can be a bit of a pain, I hope that this solution will help solve some issues for those who want a quick way to include Ace in their Vue project. If you find an issue with the solution please let me know in the comments below. As always, happy coding!!! 😎