Member-only story
How To Use Monaco Editor In VueJS: The missing guide
If you know what you looking for or see some code immediately check this git repo.
With the boom of eduTech platforms it’s no surprise that one day you might land a gig on a website where someone wants to teach coding. Teaching coding is an interactive process. You have to show codes, let the student write codes, codes need to be tested somewhere and all sorts of trouble.
Today I want to focus just on showing/writing code in a powerful code editor inside a browser. Isn’t it great to be able to provide vs-code like functionality on the browser with syntax highlighting, automatic indentation, even autocompletion?
Yeah, that can be done with monaco-editor. It’s an awesome thing. But I struggled with it. I struggled to integrate with Vue-js. Yes, there are many third party plugins already that makes it a breeze to use monaco-editor with Vue. But using them I couldn’t enable the functionality of auto-complete, docstring visualization, go-to definition etc. That’s why I took the hard way.
This article is the summary of skimming through SO, medium posts, and github issues for many days. I am finally able to make it work. But I have no shame confessing that, I am still confused about some parts, and please do suggest if you know/found any better way. So let’s start:
