Build an Image Filters App with Vue, TypeScript and WebAssembly
Course description
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
All Course Lessons (22)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Project Demo 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 |
Unlock unlimited learning
Get instant access to all 21 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
React & TypeScript Mastery
Vue JS 3: Composition API (with Pinia, Firebase 9 & Vite)
Vue Component Design: Master Scalable Vue.js Patterns
Course: Large Scale Apps with Vue, Vite and TypeScript
