Laravel, Vue and SPAs

We'll take a one-component-per-page approach to this website. This means, for each link in the sidebar, we need to create a companion Vue component. When finished, we'll review how to apply "active link" styling to the currently selected page.

With the basic structure in place, we can now move on to general page styling and tweaks.

To help improve performance, any route can be lazily-loaded by embracing Vue's async components and webpack's code-splitting feature. Don't worry: I hate confusing jargon, too. Let's break it down and review exactly when and why you might consider lazy loading certain routes in your app.

Due to security concerns, it's not always so easy to make a cross-origin AJAX request to fetch a particular set of data. Instead, you'll often be met with the dreaded No 'Access-Control-Allow-Origin' header is present on the requested resource response. Let's discuss what this header means, and how we can fix it.

Now that you've learned how to make cross-origin AJAX requests, let's move on to the next step: API authentication. In this episode, we'll use a token-based approach as our "permission slip" for fetching user-specific data from the server.

Let's next discuss how to generate hashed API tokens that Laravel can validate against. As of Laravel 5.8, we only need to visit the config/auth.php> file to enable hash-checking.

Any third party platform will need to offer users some way to revoke and generate new API tokens. Let's review a basic example of how you might do that.