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.
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! 🐱👓
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
v-bind:employees
=:employees
v-on:input
=@input
v-slot
/x
(slots documentation)
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.
- 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