Source: 2018 State of JS Survey Interest in Vue.js has nearly tripled from 2016 to 2018 with an increase in those who are interested in learning it and those who would use it again. Inside the src folder there is a folder per feature (app, home, login, register) and a few folders for non-feature code that can be shared across different parts of the app (_helpers, _services, _store). It's implemented as an axios request interceptor, by passing a callback function to axios.interceptors.request.use() you can intercept requests before they get sent to the server. In the handleResponse method the service checks if the http response from the api is 401 Unauthorized and automatically logs the user out. We’ll update it so that it contains a super stripped down form template. What this does is to sync the input data to the data object *after* a change event such as moving focus to a different field. Now, we will implement the Facebook Login in the Vue.js 2 application. When we want to sign out, we have the logout method which will set our authentication status to false. I'm a web developer in Sydney Australia and the technical lead at Point Blank Development,
It displays validation messages for invalid fields when the user attempts to submit the form. The login component template contains a single Facebook login button that is bound to the login method on click. The main index.html file is the initial page loaded by the browser that kicks everything off. The fake backend is organised into a top level handleRoute() function that checks the request url and method to determine how the request should be handled. Facebook
If you’d like to see how to make HTTP requests from your Vue.js application, check out my previous tutorial titled, Consume Remote API Data via HTTP in a Vue.js Web Application. For more info on using environment variables in Vue see https://cli.vuejs.org/guide/mode-and-env.html#environment-variables. You can also grab the code from this tutorial on Github. Before starting the Vue app it imports the global LESS/CSS stylesheet into the application, enables the fake backend api, enables the jwt interceptor and error interceptor, and waits for the Facebook SDK to load and initialize. Nic Raboy is an advocate of modern web and mobile development technologies. I've been building websites and web applications in Sydney since 1998. The example project is available on GitHub at https://github.com/cornflourblue/vue-facebook-login-example. Here is the final markup for the