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.
Eclipse Oxygen + CodeMix + Vetur extension
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
The importance of being able to efficiently navigate through your source code can never be understated. Use the Quick Open functionality (
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.
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