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.
Note
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.
