Book Image

Vue.js 2 Web Development Projects

Book Image

Vue.js 2 Web Development Projects


Overview of this book

Do you want to make your web application amazingly responsive? Are you unhappy with your app's performance and looking forward to trying out ways to make your app more powerful? Then Vue.js, a framework for building user interfaces, is a great choice, and this book is the ideal way to put it through its paces. This book's project-based approach will get you to build six stunning applications from scratch and gain valuable insights in Vue.js 2.5. You'll start by learning the basics of Vue.js and create your first web app using directives along with rich and attractive user experiences. You will learn about animations and interactivity by creating a browser-based game. Using the available tools and preprocessor, you will learn how to create multi-page apps with plugins. You will create highly efficient and performant functional components for your app. Next, you will create your own online store and optimize it. Finally, you will integrate Vue.js with the real-time Meteor library and create a dashboard showing real-time data. By the end of this book you will have enough skills and will have worked through enough examples of real Vue.js projects to create interactive professional web applications with Vue.js 2.5.
Table of Contents (15 chapters)

Our first full-blown Vue application

The previous applications were both made in quite an old-school way, with script tags and simple JavaScript. In this section, we will discover new ways of creating Vue applications with some powerful features and tools. In this part, we will create a mini project to demonstrate the new tools we will use as we move on.

Scaffolding the project

The vue-cli tool enables us to create ready-to-use app skeletons to help us get started on a new project. It works with a project template system that can ask you some questions to customize the skeleton to your needs:

  1. List the official project templates with the following command:
      vue list

Here's the list displayed in the terminal:

There are three main types of official templates:

  • simple: Uses no build tools
  • webpack: Uses the very popular webpack bundler (recommended)
  • browserify: Uses the browserify build tool


The recommended official template is the webpack template. It features all you need to create a full-scale...