• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/13/21

Create Your First Vue App

Log in or subscribe for free to enjoy all this course has to offer!

Into the World of Single-Page Applications (SPAs)

In the traditional web development model, when a user clicks on a link to go to a new page or has to update content, the entire page usually has to reload. This means that even if the user is doing something, such as submitting a form, the traditional paradigm is to generate a brand new page to handle the response.

However, this is problematic in many ways since:

  1. For users that pay for data they use, this is unnecessarily expensive because the user has to download an entire page just to receive small updates.

  2. This often results in poor user experience.

In the early 2000s, the concept of single-page applications (SPAs) was introduced to the world in order to solve these problems. The core concept around SPAs is that:

  1. Users only load a web page once.

  2. Content on the page is updated individually rather than at the page level, which allows for much more dynamic user interaction.

  3. Going to new pages within the same domain is controlled by JavaScript and does not require a full page refresh.

As browsers and users' devices became more powerful, this idea came to life since users had the computing power necessary to make SPAs a reality. And in today's modern web, they are also known as front-end frameworks.

Our Framework of Choice: Vue

When it comes to learning a front-end framework, there are many options to choose from: React, Angular, Vue, Polymer, and much more. However, as someone who has spent time with most of the popular frameworks, Vue is the best one for getting started because it has the easiest learning curve for any developer with basic HTML, CSS, and JavaScript abilities. As a result, this means:

  1. The barrier to becoming a contributing member on a project is significantly lower.

  2. People who are not JavaScript experts can contribute to a project with minimal guidance.

  3. Developers can spend more time being productive rather than learning how to use a tool.

Also, Vue was designed from the ground up to be as intuitive as possible. This means a lot of time and effort is put into designing the tool so that you need minimum training to be productive with it. When you pair this with a welcoming community and incredible documentation, this makes it the obvious choice for being the first framework with which developers should work.

Let's walkthrough how easy it is to get up and running with Vue in less than two minutes!

Adding Vue to Your Site

While many frameworks have become synonymous with complicated build tools like webpack, the reality is that adding a Vue.js to your site is as simple as including a  script  tag on your HTML page. 

Here we have a simple HTML page with the CDN (content delivery network) link for Vue.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Vue.js App</title>
</head>
<body>
<div id="app">
<h1>My First Vue.js App!</h1>
<p>Can't wait to build so many incredible things!</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</body>
</html>

If you want to test whether or not Vue was successfully loaded:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Vue.js App</title>
</head>
<body>
<div id="app">
<h1>My First Vue.js App!</h1>
<p>Can't wait to build so many incredible things!</p>
</div>
<script>
// Vue has not loaded yet, so it should throw a ReferenceError
console.log(Vue)
</script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
// The console should now log a function
console.log(Vue)
</script>
</body>
</html>

If you open this page in your browser and check the JavaScript console, you should see:

In the JavaScript console
In the JavaScript console

When you see that function, it means that you successfully loaded Vue!

Define Where Vue Should Live on the Page

Even though you have successfully loaded Vue onto the page, this does not mean that your page is a SPA just yet. Although the term single-page application (SPA) might lead many to assume that the entire page is controlled by JavaScript, most of the front-end frameworks empower the developer to be in control of what part of the page is a SPA. In other words, you get to decide the HTML element that the framework is responsible for.

To give Vue access to your page, start by creating a new instance of Vue.

<!DOCTYPE html>
<html lang="en">
<body>
<!-- Content temporarily hidden for this example -->
<script>
const app = new Vue()
</script>
</body>
</html>

Next, configure your Vue instance by passing it an object that contains your first configuration: where Vue should live on the page:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Vue.js App</title>
</head>
<body>
<div id="app">
<h1>My First Vue.js App!</h1>
<p>Can't wait to build so many incredible things!</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const app = new Vue({
el: '#app'
})
</script>
</body>
</html>

This configuration object is made up of a single property:  el, which is short for element. It is then followed by a CSS selector (i.e.,  #app  ,  div  ,  .app).

It is considered best practice to use an ID selector (i.e.,  #app) since your app should be uniquely represented on a page.

And while it can take any type of CSS selector your are used to using, it cannot select the  <html>  or  <body>  element.

The Data Store

How to Store Data

Like any other application, you need a way to store data so you can reuse and perform actions for the user. In Vue, this is done by adding a data property with an object as its value. It can take any normal key-value pair that you would typically define in JavaScript.

<script>
const app = new Vue({
el: '#app'
data: {
message: 'Hello OpenClassrooms!', // String
answerToLife: 42, // Number
groceries: ['Apples', 'Bananas', 'Coconuts'], // Arrays
timeForLunch: false, // Boolean
info: { // Object
topic: 'VueJS',
length: 5
}
}
})
</script>

How to Render Data

When you want to display data in your web app, Vue utilizes the handlebar expression to render data. It is indicated by two curly braces, as shown below:

<div id="#app">
<h1>VueMart</h1>
<h2>Shopping Cart</h2>
<ul>
<li>Apples: ${{ costOfApples }}</li>
<li>Bananas: ${{ costOfBananas }}</li>
<li>Coconut: ${{ costOfCoconuts }}</li>
</ul>
</div>

This example uses the the handlebar expression to display the value of a variable, but it can actually render basic JavaScript expressions. Here are some examples:

<!-- Perform math -->
{{ (2 + 8) * 10 }}
<!-- Call string modifiers -->
{{ "ben".toUpperCase() }}
<!-- Ternary operators -->
{{ 2 > 0 ? 'Two is greater than zero' : 'You should never see this' }}

Exercise

You will find the source code for the exercises in the course's GitHub repo in the  cafe-with-a-vue folder. To get started, check out the  P1C2-Begin  branch. 

Instructions

  1. Add Vue.js to  index.html  to convert it to a single page application.

  2. It should have a data property called  restaurantName.

  3. The restaurant name should be rendered using handlebars.

Let's Recap!

Congratulations! You are now able to:

  • Install Vue on a web page with no build tools.

  • Setup a new Vue instance.

  • Assign Vue to an HTML element.

  • Define a simple data store.

  • Render data using handlebars syntax.

Next, we're going to dive into one of the most powerful aspects of SPAs: managing data!

Example of certificate of achievement
Example of certificate of achievement