Cover image for Playing in the Vuetify Playground

Playing in the Vuetify Playground

grneyedgrl01 profile image Heather Hill-Leider ・3 min read

If there is one thing I can say about patience, it is NOT a virtue of mine. No matter how hard I try. John and the team are prepping for Vuetify version 2.3 and are super busy with that, so the book has taken a back seat. I can't just wait around. After my last post, I received many responses about resources that have helped others learn programming. So, I'm going that route for a little bit until I can jump back into the book. It's kind of taken me backwards a little bit.

One of the tutorials I chose started me at the very beginning of learning plain text HTML code which I learned in high school. I went through a large portion of it for the sake of review but I was honestly pretty bored. 🥱
Another one I took had an instructor with a thick accent that was a little difficult to understand, and he was extremely monotoned. I literally had to take a break to go take a nap after an hour of that one. 😴😂
Then there was another one someone recommended to me that seemed promising. The instructor seemed good and so did the lessons, but the content was out of

John is pretty much ready to push me in the deep end and wants me to create a new page in the documentation.🤓 It's a page that I recommended (way to go Heather 🙄) so he thought I should create it.
He gave me access to the Vuetify repository on my computer, and in doing so found a lot of areas for improvement. It was a terrible process that he was embarrassingly unhappy about. We are going to fix this problem by creating a guide to walk through the process. And I believe there are bugs in the process that are getting fixed as well.
The beauty in all this is that John is seeing areas that need improvement that he wouldn't have seen otherwise! So this enforces the value of my learning to program even more from a beginners stand point. We have needed to make Vuetify more beginner friendly and the way to do that is by me being the beginner that finds the bugs and the frustrations and gets them fixed for all the beginners that are going to come after me.

After he gave me access to the Vuetify repository, he showed me the Playground I can work in. So I just played around in the Playground a little bit to see what I could do and get a feel for it.
The Vuetify playground starts as a blank slate. It's a bare land of development possibilities!

Here's what I did:
I added a carousal and a navigation drawer that I got from the docs.

5 19 Screenshot HelloWorld

Hello World screenshot

carbon (4)

Code example of screenshot

Here's the gist on Github

I feel like the code seems a bit bloated for how simple the page is and it probably is. I'm still learning how to simplify my code and how to determine what is needed and what isn't.
What I did find helpful was going through the Vuetify docs and copying components from Codepen and seeing how I can customize them to make them into what I wanted.
That in itself is probably something I could teach to new beginners one day. How to properly customize Vuetify components! IDEA!💡 File that in the future ideas folder

This was fun to play around with! It took me a long time to figure out though unfortunately. I'm looking forward to when I can put some of these components together quickly! I guess I should try not to get ahead of myself and get through some of these tutorials first before trying to jump into the unknown.

I know one day I'm going to look back on some of these and probably be embarrassed by them, but oh well. This is my beginning. This is where I'm starting and everyone has to start somewhere!

Where did you start?
How long did it take for you to get from ground zero to a great project that you were proud of? And what did you do to get there?
I would love to hear your stories!

Posted on by:

grneyedgrl01 profile

Heather Hill-Leider


I am the Chief Operating Officer of Vuetify, the founder of Women Who Vuetify. A mom to many babies; bio, step, and fur. And married to the creator of Vuetify


markdown guide