Start Simply With Vue.js

Sylvia FronczakMon, 10/22/2018 - 11:06

It seems like there are too many JavaScript frameworks to keep track of, let alone understand and use. Everyone's pushing something different and telling you why their framework du jour is the one you should be using. And here you're still trying to figure out Angular 2 and why it's both better and worse than the first Angular. It's frustrating.

What I want you to know is that Vue.js is simpler. Not only is it easy to write reactive apps with Vue.js, but you also get to choose how much and how little of the framework you need. You're not going to be forced into tons of boilerplate or a strict architecture and package structure. As long as you have a basic understanding of HTML and JavaScript, you can pick up enough Vue concepts in a couple days to get you moving quickly.

What Qualities Make Vue Great?

Let's look at some of the reasons why Vue gains new followers week after week.

  1. Vue.js has a small footprint: The Vue.js library is only around 20KB. Compared to other libraries, its only competitor is JQuery. Fortunately, it's a lot easier to use than JQuery.
  2. It's easy to learn and use: The simple syntax and plentiful documentation help you get things going on day one.
  3. Vue allows for iterative integration: Existing applications can move to Vue.js without a complete rewrite of the system.
  4. It's flexible: You're in control of how much functionality you use.  You can use all the HTML you want, or completely eliminate it using Javascript.
  5. There's a passionate community: The growing and caring community of Vue.js developers help each other get the most out of the framework.

As you can see, there are a lot of things that make Vue.js great. However, let's just focus on a couple of them today.

The Ease of Vue.js

Now take a look at how easy it is to get started.

Import Vue.js

The simplest way to start a Vue.js application requires just one line to your code. No, really. In reality, you can get started very quickly. It just requires one import statement. How simple is that?

<script src="https://unpkg.com/vue"></script>

And sure, that doesn't add any functionality yet. But you've just added the power of Vue.js to an application without using Yarn, Webpack, or npm. You also haven't added anything complex that you don't yet understand or need.

Now you may be thinking that this is the hook that pulls you in and then I will make you add hundreds of lines of code. Or that I'll now sneak in a few dozen libraries to get any real functionality out of Vue. Nope. Sorry to disappoint you. I won't do that.

OK, so then what's next?

Create an Instance of Vue

To actually start using Vue, it is a few more lines of code. But it's still easy. Here, let's take a look at how we create a Vue instance in our application. We'll then render a message on our web page using Vue's "data" element. In the image below, I have the start of a very simple webpage. On the left is my text editor, and on the right is the output in a browser.

In addition to our import script for Vue, I've added a div with an ID of "app" that corresponds to the name I've given our new Vue instance. I've also added a "{{message}}" tag inside of my div that pulls the data element called "message" in my Vue instance.

Start Simply With Vue.js-1

It's still pretty simple, isn't it?

Add Vue Directives

Next, let's add just a little bit to render a list on our HTML page. We'll add this code snippet with a list of groceries to Vue.js's data object.

groceries: [

  'bread',

  'olives',

  'hummus',

  'bananas'

]

And then we'll use Vue's "v-for" directive to display our grocery list. The "v-for" directive iterates the data elements inside groceries and assigns them to the variable item to render the list.

<ol>

        <li v-for="item in groceries">                       

               {{ item }}

        </li>

</ol>

And when you put that all together, you get the following:

Start Simply With Vue.js

So let's talk about this magical "v-for" tag. As mentioned above, this tag is called a directive. It tells Vue.js to modify your document model in some way. And there are a lot of these directives provided by Vue that add behavior to your web app. Notably, "v-model," "v-show," "v-text," and "v-bind" crop up in most Vue apps. In addition, if you can't find a directive that does what you need, you can also create your own!

Now you may be asking how directives are different than the double mustaches we used to output our message and the items in our grocery list. The difference is fairly simple. Directives output HTML, while the mustaches output raw text. As an example, you could use the v-text directive to display our {{message}} code instead.

<p v-text="message"></p>

What I hope you're seeing is that Vue.js is fun to use. And we can have more fun in our ASPE training class while getting into lots of examples and functionality.

Separate Concerns With Components

Now, what can we do about our code to make it clean and maintainable? One thing we can do is modularize our functionality into components.

Vue.component('grocery-list', {

  data: function () {

    return {

      groceries: [

        'bread',

        'olives',

        'hummus',

        'bananas'

      ]

    }

  },

  template: '<ol><li v-for="item in groceries">      {{ item }}</li></ol>'

})

In our class, we'll work through how to build and then later use components within our Vue app.

But what if you're not starting from scratch? What if you need to add a framework to an existing application?

Vue's Iterative Integration

One of the best things about Vue.js is that you can start adding it into your existing web apps without completely rewriting them.

As we saw in the section above, there's very little you need to add to start using the library. And you can do the same thing to your existing app, whether it's a vanilla JavaScript project or using some popular framework from three years ago.

To get started, find a feature that you'd like to add. Then implement that feature using Vue.js instead of your existing framework. Also, by adding the new functionality in a Vue component, you can inject the functionality in wherever you need. And then as time allows and your familiarity with Vue grows, replace existing features piece by piece as needed.

Another tip for adding Vue.js to an existing project is to not limit yourself to one instance. For example, if you're doing a lot of routing with your React.js or Angular 2 app, it might make sense to have a separate Vue instance for each route. That will keep your wiring simple as you start to replace pieces of the existing application.

Vue.js Has Something for Everyone

What you want is a simple framework that will help you get things done—something that doesn't require tons of scaffolding, libraries, and framework magic that you don't really understand. And you'll also want something that lets you add as little or as much of the framework as you need.

This framework's simplicity is made for you. Give Vue.js a try. You're not committing to anything. Take a small function or component of your website and recreate it in Vue.js. Or attend one of ASPE's classes to get a jump start on feeling confident and capable of getting the most out of your code.

Learn more about our Vue.js Boot camp here.