Svelte Crash Course

Intro and Basics

We take a look at the demo app we’ll be creating then jump right into a project for a brief look at some of Svelte’s features. We explore reactive state, reactive properties, event listeners, template conditionals and template loops.

The Obligatory Todo App

We begin implementing the Todo App to solidify our understanding of Svelte in practical applications. In the process, we’ll learn about reactive state, reactive properties, binding values and two-way data binding, conditionals and loops in templates, and conditional class rendering.

More Todo App Features

We finish off most of the Todo app features including filters and editing todos. Nothing new here, we are continuing to make use of concepts like event listeners, conditionals and reactive properties.

Transitions in Svelte

Svelte comes with a built-in transition system which is incredibly easy to use and packed full of features. We take a look at some of these transitions including fade, fly, and scale and incorporate them into our Todo app.

Component Communication using Events

So far, we’ve only been making use of one component for our Todo app. When you start extracting to multiple components, your components need a way to pass state around and communicate with each other. In this video, we’ll take a look at dispatching and listening for events between components.

Component Communication using Events Part 2

We continue to make use of events as we extract a TodoList component for our Todo app. We also take a look at another way of passing state around by passing props down from a parent component into a child component.

Global Writable Stores

As our component tree grows, passing events around might not be the optimal solution. An alternative way to share state is to make use of a global writable store. Any component can read or write to the store, and any updates to the store will automatically re-render components that make use of that global state.

Pass Markup Around with Slots

Let’s take a look at using slots, which allows you to pass markup around between your components. This can result in customizations between component instances which we’ll explore with a contact card example.

Data Fetching in Svelte

At some point, you’re going to have to fetch data from an external API. We take a look at 3 ways to do this by either making use of state, using await blocks, or using dedicated data fetching libraries like Svelte Query or Svelte SWR.

SvelteKit Overview

SvelteKit is a framework on top of Svelte that offers features like server-side rendering, file-based routing, layouts, static site generation and more. It’s Svelte’s version of Next.js in React, or Nuxt.js in Vue. In this video, we take a look at installing SvelteKit and explore some of its features.

API Endpoints

Now that we have access to a server, we can make use of API Endpoints whenever we want to write code that only runs server-side. We can do things like access a database to fetch data, or call an API that requires credentials.

Deploying your SvelteKit app

There are several ways of deploying your SvelteKit application, each with their own pros and cons. SvelteKit allows you to do this with its various adapters. In this video, we take a look at deploying to Vercel using Servless functions, deploying to a traditional Node Server using Laravel Forge, and deploying your statically generated site.

Using Svelte and Laravel Together

In this final video, we take a look at three ways we can use Svelte and Laravel together. We can drop in Svelte components into Blade views, we can make use of Inertia.js, or we can have them in separate projects and have them communicate with an API. Thanks for coming along!