100 days of *Learning Vue js* By Soliu Yusuf

# 100 days of *Learning Vue js* By Soliu Yusuf > Name: Soliu Yusuf > Stack: PHP/Laravel > Want's to Learn: Vue js --- ## Day 1: (04/05/20) **My first day of 100DaysOfLearning** Preparing for the coming future --- I wish to handle all my past activities and the coming ones in coding Bus to God to please bless every of my single taps on keyboard, stares on monitor screen and every brain works i got myself engaged in... Amen.. | Days | Target | Accomplishment | Prove Link | | -------- | -------- | -------- |-------| | 1st 10Days | Familiarising myself with VueJs | Making a Note on it | Must provide a prove of work| |2nd 10Days| Installation of the app on my machine and little practice| Must install and create a tiny app | upload my work | |3rd 10Days| Using of Vue Concepts | Creation/Usage of methods, props, data etc| Photo Attachment| 4th 10Days| Studing of Vue dependencies like: axios, vue-router, and other deps| Must use atleast 2 perfectly to work| Photo Attachment Or git repo link| 5th 10days| Work through all previous work for perfection| Create a neat and efficient code| Photo Attachment or git repo link| This is all i on my mind for now.. I hope my development will tell me the next thing o know and work on... *Leggo....* ## Day 2 (05/05/20) # 100DaysLearning: Day 2 ***Activities:*** In my quest of Learning Vue Js, my day 2 activities goes thus..... * Installation of **VUE cli** on my machine * Downloading of an Editor recommended by my tutorial book which i am using as a guide **VSCodium** * Running of First vue command to download a fresh **Vue App Template** * I download a **Vue Project Sample** *CoreUI VueJS* on Github to explore and view the Vue Coding paradigms * I subcribed to a youtube channel **Bitfumes** and get all the required resources ready.. # Future Aims * I planned mostly on using Vue with Laravel but its seems to be a tiny plan and knowing the full dev of vue is what i actually desire.. # Prove of Work **The first for VSCoodium App Installation** ![](https://i.imgur.com/dBIYc57.png) **The Run Command for running dev env of VUE APP** ![](https://i.imgur.com/67rCnLa.png) This is what I have today.. *Leggo* Shout out to 100DaysLearn Team Members ## Day 3 (06/05/20) **Today is day 3 and I thank God for making it easy on me till this day** I review an existing vue js code and observed that way the components were built was not with html and css for the template.. after i bit of research, i came across the Vue js dependency called ***VueVuetify This is what i then do * I open an existing projects and install the dependency.. * I downloaded its icon fonts too and configure the app to be suitable to use the dep.. * i created a form component which i love its UI so much... * I also worked on the integration of vue paystack payment gateway on a project... Although, this is all I could tell but I'm really excited that am not tired yet and there is a long journey ahead... **Sample of what I practiced** ``` <v-container> <v-flex xs6> //like that, like that, like that... </v-flex> </v-container> ``` Love to ma team ... # 100DaysofLearning: Day 4 (07/05/20) ***Activities*** * I read about **slots** and their extensive usage (how to name and access a named slot) * I read and understand reasons **data** in Vue js happens to be a **function** (because data in it are not to remain static but asynchronous) * I understand how to use **props** in a vue component or when embedded into html file **Prove of Work** --- **Slot Usage** ![](https://i.imgur.com/ChiXFwv.jpg) ![](https://i.imgur.com/pb81kcS.jpg) **Props usage in vue component** ![](https://i.imgur.com/qA7h5hv.png) **Pros usage in html** ![](https://i.imgur.com/hT2NVpE.png) Love yall all # Day 5: (08/05/20) **Activities:** I was so excited when i get this working. With the knowledge of what i read about slots and props previously, I integrated a Vue-Paystack and manipulated its entire UI to fit my taste and It does work well as i want it. **Prove of Work** *The manipulated view* ![](https://i.imgur.com/rRsrP8G.png) *The Payment View* ![](https://i.imgur.com/2DEjPRF.png) I'm so happy brothers.. Cheers.... --- # Day 6: (09/05/20) **Activities:** I walked to my Tutorial Channel Playlist on youtube and watch some tutorials there.. It was kinda nice.. **Vue.js Beginner Series** [https://www.youtube.com/playlist?list=PLe30vg_FG4OS2ITq96FZLqHi1YreNuVVl](https://) I recommend for anyone trying to learn Vue.js Big thanks to my homies here..... # Day 7: (10/05/20) **Activities:** Due to the fact that am configuring my new machine. I read my Tutorial on Vue Js Documentation website and also find some time to watch and dowload an intro to Vue Js For Beginners Tutorial Video. **Vue Js Documentation Website Link** [https://vuejs.org/v2/guide](https://) **Vuejs Beginner Series** [https://www.youtube.com/playlist?list=PLe30vg_FG4OS2ITq96FZLqHi1YreNuVVl](https://) From the contents menu of official documentation of vuejs, I was able to tell i still have a long way to go... But, we are still rolling... # Day 8: (11/05/20) **Activities:** I still repeat yesterday process by reading and watching tutorial videos of vuejs on my mobile due to the fact that my machine is not all SET.. I read about the .. * Computed Properties of Vue Js and the usage * Computed Setter and Getter.. * Watchers I watch a video on it for more knowledge about it to... *Though, the day was not that resourceful, but i still managed to add to what am carrying about on Vuejs* # Day 9: (12/05/20) **Activities:** On this day, I bless God for making me resolve and make my machine all Set for work. I install every necessary apps and tried to work on my project which is made of Laravel Framework and VueJs scaffolding for the Views.. The first thing i did was i practiced what i read in the past days and implement it.. **On Computed Properties of Vuejs** I managed to create a PROP(type: function) of a component to be 'reference' by name and property is excuted in **computed** part of vue js... ![](https://i.imgur.com/1IyG7U4.png) It worked well and am so happy... Till another day... Shout out to my team mems... # Day 10: (13/05/20) **Activities:** Today is a **Debugging Day** I am trying to install the **Vue CLI** on machine but it is very annoying i could use it... After the installation, I tried downloading a fresh app from my console but I keep receiving different errors as if the VUE CLI does not exist on my machine... **Errors** ![](https://i.imgur.com/oCEzJE5.png) **Hummm**, this won me today... I will work and fix it tomorrow In Sha Allah... still on the journey...