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
قسمت 1
The Skeleton
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 epis...
02
قسمت 2
Building the Layout
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 f...
03
قسمت 3
One Component Per Page
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. Vie...
04
قسمت 4
404 Pages
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.
05
قسمت 5
General Page Styling
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.
06
قسمت 6
Lazy Loading Routes
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 la...
07
قسمت 7
Cross-Origin Resource Sharing (CORS)
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 respon...
08
قسمت 8
Token-Based API Authentication
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.
09
قسمت 9
Hashed API Tokens
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
قسمت 10
Generating New Tokens
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.