(Day 2 of 100) Vue Create App

What I did:

1. created Vue CLI3 project using command: vue create project-name
2. chose options for VUE CLI3 to include: vuex, router, linter (prettier), and CSS Preprocessor (Stylus)
3. Created a toolbar component using v-toolbar vuetify component
4. Created a side menu drawer Component using v-navigation-drawer and v-treview component. Mock data on the tree data was stored in store.js per vuex req.
5. Added on-click action so that when side menu icon is clicked menu drawer appears and disappears.
6. Created the router for the content.

This is what the application looks like so far.

What I learned:

1. I should skip on the section if I cannot figure out how to do it for a long period of time. I spent way too much time on how to change the fonts and how to push content to the left when the drawer menu disappears.
2. To make the v-navigation-drawer be underneath the toolbar, I had to use clipped property of the v-navigation-drawer

What I am stuck with:

1. I cannot figure out how to change fonts in Vuetify. The default font for Vuetify is Roboto. I tried to write a scoped css style in stylus but the font didn’t change. I also tried to add main.styl into src folder and change the vuetify stylus variables $body-font-family as recommended by Jacob from his article. This method succeeded in changing font but it actually conflicted and made vue.js javascript to not function properly. When projected is created under vue-cli3, the Vue community does not recommend this method. Perhaps I need to learn more about stylus syntax etc.
2. I cannot figure out how to make v-navigation-drawer push and pull the content when it appears and disappears.

Total time spent on the challenge: 4 hours

Actual Time focused on the challenge: 2 hours

Plan for the next day:

1. learn how to commit on GitHub
2. make a form template for adding customer/vendor information.
3. Revisit Vue and Vuex fundamentals, especially how v-model binding in vue.js is handled through Vuex
4. make the code editable and interactive by the reader so that it’s easier for me to get feedback.

I will keep you updated. Thanks for reading!