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)


In this chapter, we created a fairly big application with the help of Vue and the official vue-router library. We created a few routes and connected them with links that turned into a real navigation menu. Then, we created a generic and reusable component to build the application forms, which helped us make the login and signup forms. We then integrated the user authentication system with the router, so our application could react in smart ways to page refreshes or session expirations. Finally, we went deeper into the features and capabilities of vue-router to enhance our application and user experience even further.

We are done with the app, but feel free to improve it on your own! Here are some ideas you could implement:

  • Add comments to the tickets. Display the list of comments with the name of the corresponding user.
  • Add close this ticket button, preventing users from adding new comments.
  • Display a special icon next to a closed ticket in the tickets list!
  • Add roles to users. For example...