Sorting Algorithm Visualizer Tutorial with Vue 3 in 5 mins ( Bubble Sort Example - Vue Basics )

Quick tutorial using Vue 3 to create a sorting algorithm visualizer. By using bubble sort as the core example this can be replicated on other algorithms like quick sort, insertion sort etc.... You just need to place the sleep function in the right place to display the swapping.

I've added 2 methods for creating this project. 1 using the Vue CLI and the other using only 2 files one html and the other JS. The latter is more manual and basic.

Skip to 3:36 for a really quick version if you understand the basics of Vue.

0:00 - Demo of project
0:08 - Method 1: Vue CLI Create Project
1:05 - Clean up
1:00 - Create the Visualizer
2:29 - Add Styling
3:01 - Test + Modify timeout
3:36 - Create Visualizer without CLI

Music:
------------------------------------------------
Creative Commons — Attribution-ShareAlike 3.0 Unported — CC BY-SA 3.0
------------------------------------------------