My Favorite Vue Resources

To learn about Vue, I started following interesting people in the Vue community, listened to podcasts, and completed several tutorials. I thought it might be helpful to others to share some my favorite of those Vue resources.

A New Vue On JavaScript30 - 08 Fun with HTML5 Canvas

This article is part of the A New Vue On JavaScript30 series that explores re-implementing Wes Bos’s (@wesbos) #JavaScript30 projects using Vue. Today I will be working with #JavaScript30’s 08 Fun with HTML5 Canvas project. This project uses a <canvas> element to provide a fun a way to draw in the browser window by clicking and dragging the mouse. As you draw, the line will get larger and smaller as well as change color. Here is an animated gif of it in action.

A New Vue On JavaScript30 - 06 Type Ahead

This article is part of the A New Vue On JavaScript30 series that explores re-implementing Wes Bos’s (@wesbos) #JavaScript30 projects using Vue. Today I will be working with #JavaScript30’s 06 - Type Ahead project. This project uses an input to filter down a list of cities as the user types. In addition to filtering the list, it also highlights the input value in the results. Here is an animated gif of it in action.

#JavaScript30 Finished Type Ahead Project

A New Vue On JavaScript30 - 05 Flex Panel Gallery

This article is part of the A New Vue On JavaScript30 series that explores re-implementing Wes Bos’s (@wesbos) #JavaScript30 projects using Vue. Today I will be tackling #JavaScript30’s 05 - Flex Panel Gallery project. This project displays a page of five images in vertical slices with words on them. When an image is clicked there is a neat animation to expand the image and slide in some additional text.

A New Vue On JavaScript30 - 03 CSS Variables

This article is part of the A New Vue On JavaScript30 series that explores re-implementing #JavaScript30 projects using Vue. Today we will be working with the third of Wes Bos’s (@wesbos) #JavaScript30 projects titled: 03 - CSS Variables. This project uses an HTML inputs to control CSS variables to change an image’s blur, padding, and background color.

Key Vue Concepts

The following Vue concepts are discussed in this article:

  • Style binding with :style (shorthand for v-bind:style)
  • v-model directive to create two-way data bindings on form input
  • Computed Properties
  • Watched Properties
  • The mounted lifecycle hook

A New Vue On JavaScript30 - 02 JS and CSS Clock

This article is part of the A New Vue On JavaScript30 series that explores re-implementing #JavaScript30 projects using Vue. Today we will be working with the second of Wes Bos’s (@wesbos) #JavaScript30 projects titled: 02 - JS and CSS Clock. It’s a cool looking analog clock that uses a setInterval() callback to control the clock hands by rotating them based on the current time.

Key Vue Concepts

The following Vue concepts are discussed in this article:

  • Style binding with :style (shorthand for v-bind:style)
  • data reactivity
  • mounted lifecycle hook

A New Vue On JavaScript30 - 01 JavaScript Drum Kit

This article is part of the A New Vue On JavaScript30 series that explores re-implementing JavaScript30 projects using Vue. Before reading, its a good idea to have:

Key Vue Concepts

The following Vue concepts are discussed in this article:

  • v-for directive
  • Class binding
  • Event binding

A New Vue On JavaScript30 - Getting Started

A few months ago, I worked through the JavaScript30 video tutorial series created by Wes Bos (@wesbos) as a way improve my JavaScript skills. While I didn’t keep up with his one a day recommendation, I did 2 a week, I really enjoyed it and learned a lot. Part of what drew me to JavaScript30 was that it is entirely written with vanilla JS - no frameworks, no libraries, and no compilers. But as I got into it, I was left wondering, what would it look like if Vue were used? With this series I will explore the differences between the two approaches.

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×