Day 54 Vue.js

Vue is an open source javascript front end framework. Similar products include React, made by Facebook and Angular, made by Google. The benefits of an opensource framework are:

• Can be used freely
• Non-opinionated interface (not built with a particular company’s needs in mind)
• Can be used more easily with other libraries/frameworks

The traditional website exists in three main files: HTML, CSS, and Javascript. When you start to build a large application, keeping track of things gets out of control really quickly. Vue allows us to build Single Page Applications(SPA) with one central HTML page. In order to change things on the page, we insert different components using DOM manipulation. Now we can build quite versitle and modular web applications in javascript.

Some cons:

• slower upfront load time
• bad for Search Engine Optimaztion
• absolutely dependent on javascript (sorry no-js plugins)
• you have to handle page navigation yourself

The key things to understand about Vue is that it allows us to create encapsulated, re-usable components. These components can be entire pages, or simple elements (called widgets). All of the js, html, and css necessary for the component is handled in one file. Each component has the following structure:

<template>
    html goes here
</template>
<script>
    js goes here
</script>
<style>
    css goes here
</style>

Now we can load these components into our app and create some delicious front end interfaces!