Back Button Vue

Laravel, Vue and SPAs

In this series, come along as I build an "assets" website for Laracasts. Using Laravel as a backend, step-by-step, we'll pull in Vue and Vue Router to construct a practical and real-life single-page application.

10 episodes
1:24:07 hrs
Start Series
  • Latest Episode: Generating New Tokens

  • Like this series? Share the love!

    1. Run Time 8:23 Free

      As we do in many series at Laracasts, we'll begin with laravel new project. Following that, we'll incrementally pull in all necessary npm dependencies and construct the base skeleton for our "assets" website.

      View the source code for this episode on GitHub.

    2. Run Time 14:58

      In this episode, we'll construct the main layout for our assets website. To streamline this process, I'll pull in Tailwind and add it to my Laravel Mix build.

      Once installed, we can very quickly prepare the core site layout.

      View the source code for this episode on GitHub.

    3. 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.

      View the source code for this episode on GitHub.

    4. Run Time 1:49

      What if the user visits a URI that doesn't exist? At the moment, they'll see a blank page. Not good. Let's fix that by creating a NotFound component.

      View the source code for this episode on GitHub.

    5. Run Time 13:32

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

      View the source code for this episode on GitHub.

    6. Run Time 6:16 Free

      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.

      View the source code for this episode on GitHub.

    7. 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.

    8. 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.

    9. Run Time 3:50

      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.

    10. 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.

Series still in development robot

*Series still in development. Check back often for updates.