[Exploration] First impression of VueJS

March 22, 2018

As a full stack developer, I’m fairly comfortable with both front end and back end development, but haven’t dived too far into the JavaScript front end frameworks. I decided to take VueJS on a test run by following a tutorial on building a simple todo app after hearing so much about it from the front end developers I had talked to.


VueJS is AWESOME!  Well, the first few hours I spent with it was.  I’m just hoping it continues once I get a greenfield project up and running with it. 

The tutorial I walked through to get a taste of VueJS was this one from Scotch.io: https://scotch.io/tutorials/build-a-to-do-app-with-vue-js-2.  IF you plan on following that tutorial, do be careful as it’s not as complete as it should be.  There are a few things missing and a some mistakes in the code.  If you finish the tutorial and try to use what you built, but end up thinking, “Wait, how come it’s not working correctly?”, then you have reached a point in which I had to troubleshoot the code to get it working.  It should be fairly easy to troubleshoot if you pick up on how VueJS components work with each other. 

I thought VueJS was fairly easy to pick up, even if you’ve only scratched the surface of Angular and React.  May not be too difficult either if you only know jQuery and vanilla JavaScript.  Granted, I didn’t get into anything too complex or any advanced features of VueJS, so my opinion may change later.

The tutorial mentions the Sweet Alert plugin, but doesn’t actually show you how to implement it.  However, implementing plugins like the Sweet Alert plugin is very easy.  I installed the plugin via NPM and imported it into my code and implemented it like so:

import Todo from '@/components/Todo'
import swal from 'sweetalert'

export default {
  components: {
  props: ['todos'],
  methods: {
    deleteTodo (todo) {
      const todoIndex = this.todos.indexOf(todo)
      this.todos.splice(todoIndex, 1)
    completeTodo (todo) {
      const todoIndex = this.todos.indexOf(todo)
      this.todos[todoIndex].done = true
      swal('Completed!', 'You\'ve completed a task.', 'success')
    undoCompleteTodo (todo) {
      const todoIndex = this.todos.indexOf(todo)
      this.todos[todoIndex].done = false

The above was all I needed to do to get it to work.  See below:


The tutorial also uses Semantic UI.  There is no need to import the styles into the .vue files.  Include the Semantic UI CSS and JS file in the header and use the CSS classes like you normally would.  It just works!

Next step for me is to dive deeper into VueJS by understanding more about the components and the data flow.  Greenfield project coming soon!

You Might Also Like