Your Internet Explorer version is not compatible with our shopping cart system. Please use version 9 or higher to avoid problems with your order(s). Close

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 Code OSS 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, 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.

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 efficient code navigation can never be overstated. Use Quick Open (Ctrl+P), and then type @ 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.

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, ESLint helps you catch errors early in the development lifecycle.

Eclipse Oxygen + CodeMix + Vetur & ESLint extensions

Build & Debug

Building your application for development or production is easy with integrated npm commands. With the development build running, changes to your code are immediately synchronized with the running application, without restarting the build.

It’s simple to step through your code, and inspect variables in vue or .js files.

Front-end developers, ready to make your lives easier with a progressive framework? Vue.js allows you to build user interfaces and impressive SPAs efficiently, so it might be the perfect time to start learning it. Vue does have great documentation,...