Book Image

Vue.js 2 Web Development Projects

By : CHAU GUILLAUME
Book Image

Vue.js 2 Web Development Projects

By: CHAU GUILLAUME

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)

FAQ - Consuming an API


In this section, we will create the FAQ page, which will get data from the server. It will display a loading animation and then the list of questions and answers.

Server setup

This is our first app that will communicate with a server. You will get a server with a ready-to-use API.

You can download the server files (https://github.com/Akryum/packt-vue-project-guide/tree/master/chapter5-download). Extract them into another folder than our app and run the following commands to install the dependencies and launch the server:

cd server_folder
npm install
npm start

You should now have the server running on port 3000. When this is done, we can continue building our app with a real backend this time!

Using fetch

In the FAQ.vue Single File Component, we will use the standard fetch API of the web browser to retrieve the questions from our server. The request will be a very simple GET request to http://localhost:3000/questions with no authentication. Each question object will have title...