Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Browse all series

NuxtJS Crash Course

NuxtJS is a framework on top of Vue that allows your application to be server-side rendered via Node.js. This allows for better SEO, but still has all the benefits of a fully interactive JavaScript application.

In this series, we'll take a look at using Nuxt 3 and all the features it has to offer including automatic routing, better TypeScript support, Vite support, the Nitro server and more. We'll pair it together with an API powered by Laravel on the backend to build out the obligatory blog application. This will allow us to learn how to communicate between the front-end and the back-end.

Progress

Series Info

Episodes
11
Run Time
2h 33m
Difficulty
Intermediate
Last Updated
Mar 1, 2022
Version
Latest
Play Series

Series Episodes

  1. Nuxt Features (4)

    1. Intro and Demo

      To start off, we discuss some of the pros and cons of building your application using Nuxt. We also take a look at the demo blog application we'll be creating throughout this series.

    2. Nuxt Features and Folder Structure

      Let's review the different folders we can create to utilize the features of Nuxt 3. We'll explore automatic page routing, layouts, meta tags, components, and composables.

    3. Data Fetching

      We take a look at a few different ways we can fetch data using Nuxt 3. We can do it the traditional way and fetch data from the client, or we have a few options we can utilize to fetch data on the server.

    4. Nitro Server

      Nuxt 3 comes with a lightweight server engine, named Nitro. Nitro allows you to easily create API routes that execute on the server. We take a look at an example of calling an external API using Nitro in order to hide our API key on the client.
  2. Build a Blog App (7)

    1. Setting up the Frontend

      We start setting up the frontend for our blog application. We do some styling with Tailwind, add layouts and pages, and set up some reusable components.

    2. Setting up the Backend

      For our backend, we start a new Laravel application and setup our models, migrations, factories and routes.

    3. Communication with Backend

      Now that our backend is in place, we can start wiring it up to our Nuxt frontend. We work on making the index page and the single post page dynamic. We also work on creating posts and handling errors with form validation.

    4. Authentication with Sanctum

      Let's work on getting authentication in place. We'll take a look at setting up Nuxt to ensure all of the cookies and headers are being sent correctly to the backend. We'll also look at protected routes and logging out.

    5. Middleware

      We want to be able to protect our routes if the user is either logged in or not. We can make use of middleware in Nuxt to achieve this. We also take a look at making use of `localstorage` as a way to keep track of the user's logged in status.

    6. Authorization

      We add the ability to edit and delete posts but also make sure that proper authorization is in place for those actions. We utlize polices in Laravel to do this, and wire it up to our Nuxt frontend.

    7. The Deployment Process

      In this final video, we take a look at two ways of deploying Nuxt apps to real servers. We start off by making use of Netlify, where most of the configuration happens automatically. We then deploy our blog application using Laravel Forge, which requires more configuration and setting up modern tools like Node and PM2. Thanks for coming along!

Continue Learning

Blaze Deep-Dive thumbnail

Blaze Deep-Dive

With Caleb Porzio

Blade components are slow. Really slow. At scale, they quietly become the biggest bottleneck in your Laravel application. We discovered this while trying to make Flux as fast as possible, and the result is Blaze: a package that fundamentally rethinks how Blade components are compiled and rendered. With multiple levels of optimization, Blaze can shave hundreds of milliseconds off a page load, making Blade rendering up to 25x faster in some cases.In this series, we'll install it, benchmark it, build a toy version from scratch so you truly understand how it works, and then master every directive and edge case so you can squeeze maximum performance out of your own apps.

  • 20 Episodes
Customizing Filament For User-Facing Apps thumbnail

Customizing Filament For User-Facing Apps

With Shruti Balasa

In this series, we'll build a real, user-facing app called Booknest using Laravel and Filament. We'll begin with a fresh install and begin pushing Filament beyond the usual "internal admin only" setup that you typically see. It's capable of so much more.

  • 14 Episodes
Filament 5 in Depth thumbnail

Filament 5 in Depth

With Kevin McKee

Filament's powers have increased exponentially. Now at version 5, it's more powerful and capable than ever. In this series, we'll build a practical Roadmap app from scratch, using Filament for the admin panel and Livewire for the public-facing side.Along the way, we'll cover panel configuration, enum-driven UI, strict authorization with policies, and newer form inputs like ToggleButtons, Sliders, and the TipTap-powered RichEditor. By the end, you'll have a full-featured app and a solid handle on everything new in Filament.

  • 16 Episodes
Build Native Apps With PHP thumbnail

Build Native Apps With PHP

With Simon Hamp

Welcome to my CreatorSeries! I’m Simon, and in this series we’re going to learn about NativePHP and use it to build true native applications for desktop and mobile. We're not talking about web apps accessed through the browser. Your users will be able to install directly on their devices. This is a big leap forward for the PHP ecosystem, and while it’s a real paradigm shift from the way we normally build with PHP and Laravel, we’ve worked hard to keep it familiar and approachable. So grab a warm drink, get comfortable, and let's start building!

  • 17 Episodes
Everything New in Livewire 4 thumbnail

Everything New in Livewire 4

With Caleb Porzio

Livewire 4 is a major release, and it's packed with features you're going to love. View-based components keep your PHP and Blade together in one file. Islands let you create isolated, independently-updating regions without the overhead of nested components. New directives like wire:sort tackle big things with minimal code. And a powerful JavaScript interceptor system gives you fine-grained control over every request.Whether you're upgrading an existing app or starting fresh, this series will walk you through everything new, from the fundamentals to the advanced stuff. Let's dig in.

  • 25 Episodes