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)

Chapter 6. Project 4 - Geolocated Blog

In this chapter, we will build our fourth app. We will cover new topics, such as:

  • Managing the state of the app in a centralized store using the official Vuex library
  • Using the Google OAuth API to connect our users to the app
  • Integrating Google Maps to our app with the vue-googlemaps third-party library
  • Rendering functions and JSX
  • Functional components--making lighter and faster components

The app will be a Geolocated Blog that will mainly display a big map where the user will add blog posts. Here are the main features of the app:

  • A login page will ask the user to authenticate using their Google account
  • The main view will be a Google map embeded in the app, with a marker for each post
  • Clicking on the markers will display the content in a side panel to the right, with the description of the location, the post, a like counter, and a list of comments
  • Clicking anywhere else on the map will display a form in the side panel so the user can create a new post at this...