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)

Support tickets

In this last part, we will create an authenticated section of our app, where the user will be able to add and view support tickets. All the necessary requests are available on the server you already downloaded and if you are curious about how this has been done in the node with passport.js, you can take a look at the sources!

User authentication

In this first section, we will take care of the user system of our app. We will have both login and sign up components, to be able to create new users.

Storing the user in a centralized state

We will store the user data inside a state object like we did in Chapter 3, Project 2 - Castle Duel Browser Game, so we can access it in any component of the app:

  1. Create a new state.js file next to main.js, which exports the state object:
      export default {
        user: null,

The user property will be null when no user is logged in, or else it will contain the user data.

  1. Then, in the main.js file, import the state:
      import state from...