You're reading from Vue.js 2.x by Example Example-driven guide to build web apps with Vue.js for beginners

Product type Paperback

Published in Dec 2017

Publisher Packt

ISBN-13 9781788293464

Length 412 pages

Edition 1st Edition

Languages

JavaScript

Tools

Vue

Concepts

Front End Web Development

Author (1):

Mike Street

View More author details

Creating the workspace

To use Vue, we first need to include the library in our HTML and initialize it. For the examples in the first section of this book, we are going to be building our application in a single HTML page. This means the JavaScript to initialize and control Vue will be placed at the bottom of our page. This will keep all our code contained, and means it will easily run on your computer. Open your favorite text editor and create a new HTML page. Use the following template as a starting point:

      <!DOCTYPE html>
      <html>
        <head>
        <meta charset="utf-8">
        <title>Vue.js App</title>
        </head>
        <body>
        <div id="app">
          </div>
          <script src="https://unpkg.com/vue"></script>
          <script type="text/javascript">
            // JS Code here
          </script>
        </body>
      </html>

The main HTML tags and structure should be familiar to you. Let's run over a few of the other aspects.

Application space

This is the container for your application and provides a canvas for Vue to work in. All the Vue code will be placed within this tag. The actual tag can be any HTML element - main, section, and so on. The ID of the element needs to be unique, but again, can be anything you wish. This allows you to have multiple Vue instances on one page or identify which Vue instance relates to which Vue code:

      <div id="app">
      </div>

During the tutorials, this element with the ID will be referred to as the app space or view. It should be noted that all HTML and tags and code for your application should be placed within this container.

Although you can use most HTML tags for your application space, you cannot initialize Vue on the <body> or <HTML> tags - if you do so, Vue will throw a JavaScript error and will fail to initialize. You will have to use an element inside your body.

Vue library

For the examples in this book, we are going to be using a hosted version of Vue.js from a CDN (Content Delivery Network) unpkg. This ensures that we have the latest version of Vue in our application, and also means we do not need to create and host other JavaScript files. Unpkg is an independent site that hosts popular libraries. It enables you to quickly and easily add a JavaScript package to your HTML, without having to download and host the file yourself:

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

When deploying your code, it is a good practice to serve up your libraries from local files rather than relying on CDNs. This ensures that your implementation will work with the currently - saved version, should they release an update. It will also increase the speed of your application, as it will not need to request the file from another server.

The script block following the library include is where we are going to be writing all our JavaScript for our Vue application.