Over a million developers have joined DZone.

Vue Example: Creating a TODO App using Vue.js 2, Vuex, and Codemix [Video]

DZone's Guide to

Vue Example: Creating a TODO App using Vue.js 2, Vuex, and Codemix [Video]

Read on to learn how to create a web application based on these two popular JavaScript libraries, using a particular IDE.

· Web Dev Zone ·
Free Resource

Have you seen our HERE Twitch channel to livestream our Developer Waypoints series?

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 and 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 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.
  • Building and 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 license.

Download CodeMix

Vue Example: Creating a TODO App

Developer Waypoints is a live coding series from HERE, which will teach you how to build with maps and location data.

web dev ,vue.js ,web application development ,vuex ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}