Working with Vue in Eclipse

Vue.js is a progressive framework for building user interfaces. The core Vue library focuses on the view layer only, but it’s easy to integrate it with other libraries or existing projects; Vue is also great for powering single-page applications in the modern web space. If you’d like to develop using Vue in Eclipse, look no further than CodeMix!

CodeMix is an Eclipse plugin that lets you add VS Code extensions directly into Eclipse, just install the Vetur extension for first-class Vue development support. CodeMix is compatible with Eclipse-based IDEs and tools—like MyEclipse, Spring Tools Suite, Webclipse and JBoss Tools—so you can continue working in the environment you are accustomed to.

Vue Highlights

IntelliSense

A single .vue file with the HTML markup, CSS style, and JavaScript code makes developing Vue components convenient. You get the expected syntax highlighting, snippets, and content assist for each section. IntelliSense is aware of your component’s model (data, properties, etc.) and suggestions include these entities where appropriate, plus Vue specific attribute completion in the markup too.

Vue in Eclipse - IntelliSense
Eclipse Oxygen + CodeMix + Vetur extension

Extensions

The Vetur extension is the only extension required for Vue support; however, for the best experience we recommend installing the Vue extension pack. From the Extension Manager, browse for the Vue pack to easily install everything you need for the most productive programming experience with Vue. 


CodeMix Extensions Manager

Navigation

The importance of being able to efficiently navigate through your source code can never be understated. Use the Quick Open functionality (Ctrl + P + @) to effortlessly jump to different sections of your code—JavaScript methods and fields, CSS styles, and HTML elements. You can also jump to related Vue components.

Vue in Eclipse - Navigation
Eclipse Oxygen + CodeMix + DevStyle + Vetur & Vue Peek extensions

New Vue Project Wizard

Go to File>New>Project>CodeMix and select Vue Project to create a new Vue template project. The wizard makes it easy to start a new project, and even installs any missing Vue extensions.


New CodeMix Vue Project wizard

Validation and Linting

Beyond catching syntax errors in your code, with the ESLint extension installed, a few of them can be automatically corrected as well. From things as simple as the wrong quotes or indentation, to pitfalls like missing key attributes, functions with side effects, or even an incorrectly defined component, the ESLint plugin for Vue.js will catch these mistakes.

Vue in Eclipse - Linting
Eclipse Oxygen + CodeMix + Vetur & ESLint extensions

Build & Debug

Building your application for development or production is easy with the integrated npm commands. With the development build running, changes you make to your code will be immediately synchronized with the running application, without you having to restart the build.

Stepping through your code, inspecting or even evaluating variables in the .vue or .js files that compose your application is pretty straightforward as well.


Eclipse Oxygen + CodeMix + Vetur, npm and Debugger for Chrome extensions