Tutorial: Vue.js 3

This project includes my implementation of Tania Rascia's Vue tutorial and a color converter of my own imagining. The tutorial was a great introduction to Vue, thoughtfully walking me through each step, but it didn't give me a great grasp of the deeper concepts or a sense of why you would use Vue over React (for example).

And, frankly, the "employee" subject matter wasn't cute enough for me to get excited about it.

So I started the Color Converter! This part of the project takes in either a hex code or RGB, then uses The Color API to convert the value into either RGB or hex as appropriate. You can also pin or unpin colors to a list.

Tools

In addition to Vue.js, I used this project to learn more about:

• Vue Router
• Vite
• Tailwind CSS (and I used the plugin for Vue forms)
• Headless UI, specifically popovers
• CSS Shapes (for the repeated circles in the background)
• Writing to the user's clipboard

I thought about experimenting with editable SVG using heroicons, but my motivation petered out before I could get to it. Maybe someday! 🐱‍👓

Setup

I used yarn to manage dependencies and vue create to set up my project. I kept the generated source code as example_src/ so I could reference it.

To install dependencies and setup your environment:

yarn install

To serve the app with hot-reloading for development:

yarn dev

To compile and serve the app as if for production:

yarn build && yarn serve

Notes

Shortcuts

• v-bind:employees = :employees
• v-on:input = @input
• v-slot/x (slots documentation)

Vue Router Bummer

I found out that GitHub pages doesn't support Single Page Apps (SPAs), which is a major bummer with using vue-router. Basically, it tries to look for a dedicated HTML file for each path, but all of my pages are served out from the index.html. Welp!

This issue would prevent anyone from navigating to the Employees page with the URL alone - they would be required to click on the link within the app to get there.

This was wholly unacceptable to me, so I used Learn Vue's advice to copy the index page to 404.html in my deploy workflow. I then added a simple NotFound component for the router to display for any mistyped URL, and everything became perfectly splendid.

Extended Learning

• Mozilla's Vue Tutorial - make a task app
• Learn Vue's Tutorial - search the Vue docs
• Matthias Hager's Tutorial - make a budgeting app (with LocalStorage!)
• 5 feature ideas