Build an Image Filters App with Vue, TypeScript and WebAssembly

1h 44m 19s
English
Paid

WHAT IS THIS PROJECT?

With this project you'll build "Vue Filters", an image filter application built with Vue that allows you to bring the experience of applying Photoshop filters to the web. By the end, you'll learn the best practices for building custom composables.

WHY IS THIS PROJECT AWESOME?

This is a portfolio project. It requires about 3 hours to build.

Don't be fooled by the project size - a lot of modern technologies are utilized here in order to build a modern image application. Under the hood, you'll leverage WebAssembly to process images and integrate a WASM package into Vite's build process. Plus thjs project will give you the opportunity to use the Composition API in a practical scenario.

During the building process we'll take the time to discuss the HTML5 canvas API for drawing, manipulating, and downloading images.

TypeScript is also going to be a major player in this project. Learning how to correctly annotate variables is going to help us debug the application. Lastly, you'll learn the best practices for building custom composables - something I see junior Vue Developers doing incorrectly with all the time!

Watch Online Build an Image Filters App with Vue, TypeScript and WebAssembly

Join premium to watch
Go to premium
# Title Duration
1 Project Demo 01:31
2 Initializing a New Project 02:44
3 What is TypeScript 03:11
4 Reviewing the TypeScript Configuration 05:16
5 TypeScript Basics 06:22
6 Preparing the Template 04:10
7 Adding a Google Font 03:44
8 Automatically Loading Components 04:22
9 Interfaces 06:58
10 Drag and Drop Events 07:16
11 Storing File Data 04:50
12 Filter Buttons 06:38
13 Composables 02:21
14 File Reader 03:10
15 Optional Parameters 06:41
16 Grabbing the Canvas Context 06:09
17 Drawing an Image on the Canvas 05:00
18 Calculating the Aspect Ratio 05:51
19 Subscribing to Mutations 03:16
20 Enabling Web Assembly in Vite 04:23
21 Applying a Filter 06:05
22 Downloading an Image 04:21

Similar courses to Build an Image Filters App with Vue, TypeScript and WebAssembly

Rapid Development with Vite

Rapid Development with Vitevueschool.io

Category: Vue, Vite
Duration 1 hour 40 minutes 49 seconds
Transform Your Craft with TDD: Master clean code and testing

Transform Your Craft with TDD: Master clean code and testingDaniel Moka

Category: TypeScript, Rust
Duration 4 hours 7 minutes 36 seconds
What’s New in Nuxt 4: Key Updates for Nuxt.js Developers

What’s New in Nuxt 4: Key Updates for Nuxt.js Developersvueschool.io

Category: Vue, Nuxt
Duration 33 minutes 19 seconds
Vue 3 and Laravel: Breaking a Monolith to Microservices

Vue 3 and Laravel: Breaking a Monolith to Microservicesudemy

Category: Vue, Laravel, Redis
Duration 14 hours 4 minutes 43 seconds
Vue.js + Laravel: CRUD with SPA

Vue.js + Laravel: CRUD with SPAlaraveldaily.com

Category: Vue, Laravel
Duration 1 hour 50 minutes 29 seconds
Responsive LLM Applications with Server-Sent Events

Responsive LLM Applications with Server-Sent Eventsfullstack.io

Category: TypeScript, React.js, Python
Duration 1 hour 18 minutes 18 seconds
The Nuxt 3 Bootcamp The Complete Developer Guide

The Nuxt 3 Bootcamp The Complete Developer Guideudemy

Category: Vue, Nuxt
Duration 16 hours 52 minutes 7 seconds