30 Days of Vue

What is Vue?

 

This post is part of the series 30 Days of Vue.

In this series, we're starting from the very basics and walk through everything you need to know to get started with Vue. If you've ever wanted to learn Vue, this is the place to start!

What is Vue?

Over the next 30 days, we’re going to walk through everything you need to know to get started with the Vue framework. From the very beginning through topics like the Vue Instance, Components, and even Testing.

Each day in our 30-day adventure will build upon the previous day's materials which will give us a good introduction to various terms, concepts, and underpinnings of the Vue framework.

This series is mainly targeted to readers that have no prior Vue knowledge and have a little or some experience with JavaScript. Though this course has been prepared for you to cover the material linearly from article-to-article, you are more than welcome to hop around in the course if you feel you’ve already grasped certain concepts.

With all that said, let’s get started. We’ll start at the very beginning by discussing what Vue is.

What is Vue?

Vue is an open source JavaScript framework geared towards building user interfaces, created by Evan You. If we take a glance at the front page of the main website, we can see that Vue is said to be the progressive JavaScript framework that is approachable, versatile, and performant. Let’s explain each of these points:

Progressive

Vue is recognized to be progressive since it can often be scaled down as well as it scales up. For very simple use cases, you can use Vue like you use jQuery - by dropping a single script tag:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

But as your needs start to grow, Vue grows with you by giving you tools within the ecosystem to help you be more productive. Oftentimes, Vue is labeled as an adoptable framework since each of these tools can be incrementally added when needed.

Approachable

Vue is understood to be approachable since as long as you know standard HTML, CSS, and JS; you’re able to start working with Vue right away to build more complex web applications.

Versatile

The Vue framework is recognized to be versatile since the Vue library itself fits neatly within an ecosystem of tools that make up the entire Vue framework. These tools are the:

  • The vue-cli (i.e. Vue Command Line Interface) which allows for rapid prototyping and set-up of Vue-Webpack applications.
  • vue-router which helps us introduce client side routing into our application with relative ease.
  • vuex, the Elm-inspired Flux-like library that helps facilitate how data is managed in an application.
  • vue-test-utils, the testing utility library that introduces various helpers and function to make testing Vue components a lot easier.

Each of the above tools was created and is currently maintained by the Vue core team. This makes integrating and using them in Vue applications a relatively seamless experience. We’ll be discussing each of these libraries at various points throughout this series.

Performant

Finally, Vue is seen to be performant since it takes advantage of the virtual DOM for incredibly fast re-render times. The Vue core library is also built to require minimal effort towards performance optimization.

Okay… cool… but how do we use it?

In the simplest way possible, we can get started working with Vue by placing a script tag in an HTML file that loads the latest version of Vue from a Content Delivery Network (CDN). We can also reference a JavaScript file (named main.js for example) which would be the file where our Vue JavaScript code lives:

<html>
  <body>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
  </body>
</html>

With the Vue library available, we’re able to create a new Vue application. We’ll create this application by declaring the Vue Instance - which is the heart of a Vue application - in the main.js file. The Vue instance is created by declaring the new Vue({}) constructor:

The entire source code for this tutorial series can be found in the GitHub repo, which includes all the styles and code samples.

If at any point you feel stuck, have further questions, feel free to reach out to us by:

Get started now

Join us on our 30-day journey in Vue. Join thousands of other professional Vue developers and learn one of the most powerful web application development frameworks available today.

No spam ever. Easy to unsubscribe.