Back Button JavaScript

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.

Intermediate
Difficulty
4 episodes
30:26 mins
Start Series

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.

  • 01

    Episode 1 Run Time 8:23

    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.

  • 02

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

  • 03

    Episode 3 Run Time 5:16

    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.

  • 04

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

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