Vue Example: Creating a TODO App using Vue.js 2, Vuex and CodeMix

Looking for an efficient way to create web apps? Look no further—CodeMix is here to give you an entirely new experience. The following video shows you how to create a Vue example app, created in Eclipse powered up by CodeMix. CodeMix is an Eclipse plugin that unlocks a wide array of technologies from VS Code and add-on extensions built for Code OSS. The Vue extension pack included with CodeMix includes everything you need for a superior coding experience as you follow along with the Vue example app in the video.

To create this application, you will be working with `.vue`, `.js`, and `.html` files. As you progress through your setup, you will create several components for the app using CodeMix’s powerful Vue.js support. Here’s a little taste of what you get when you use CodeMix:

• 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.
• 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.
• Validation & 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.
• Building & Debugging—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.

Want to Try CodeMix? CodeMix is free to try for 45 days, and if you’re already using a Genuitec IDE, it’s compatible with your existing paid license.