https://github.com/haxzie-xx/30-days-of-vue
:star2: A 30 day learning challenge for VueJS by building simple yet cool projects :muscle:
https://github.com/haxzie-xx/30-days-of-vue
30-days-of-code challenge hacktoberfest hacktoberfest2018 javascript tutorial vue
Last synced: about 2 months ago
JSON representation
:star2: A 30 day learning challenge for VueJS by building simple yet cool projects :muscle:
- Host: GitHub
- URL: https://github.com/haxzie-xx/30-days-of-vue
- Owner: haxzie-xx
- License: mit
- Created: 2018-08-19T06:09:49.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-10-23T05:59:56.000Z (over 6 years ago)
- Last Synced: 2025-02-28T10:03:43.171Z (2 months ago)
- Topics: 30-days-of-code, challenge, hacktoberfest, hacktoberfest2018, javascript, tutorial, vue
- Language: JavaScript
- Homepage:
- Size: 1.23 MB
- Stars: 40
- Watchers: 3
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 30 Days of Vue!
:star2: A 30 day learning challenge for VueJS by building simple yet cool projects :muscle:
## Day 1
### [A Simple Todo App :memo:](https://haxzie.github.io/30-days-of-vue/day1-todo-list-app)
Create a simple Todo-List app with minimal features!
- Learn to set up a simple vue project [without vue cli]
- Understand the Vue app instance
- Creating simple vue components
- Understand the usage of Props, data, Methods and computed
- understand emitters and communication between app and components
## Day 2
### [A Beautiful Calculator :iphone:](https://github.com/haxzie/30-days-of-vue/tree/master/Day2-Calculator)
Create a beautiful calculator using Vue.js
- Learn to install [vue cli](https://cli.vuejs.org/)
- Learn to create a simple vue project using vue cli
- Learn to modify a simple vue app
- Understand how vue components separated using `.vue` extension
- Understand the vue component structure: template, script and style
Turorial link for [Calculator](https://www.youtube.com/watch?v=m1_ih43p24s)
## Day 3
### [CountDown Timer :hourglass_flowing_sand:](https://github.com/haxzie/30-days-of-vue/tree/master/Day3-Hack-time)
Create a simple countdown timer using Vue.js
- Understand the usage of watch, filters, and intervals
## Day 4
### [Simple Markdown Previewer](https://github.com/haxzie/30-days-of-vue/tree/master/Day4-Markdown-Converter)
Create a Markdown Previewer using Vue.js :tada:
- Understand directives in Vue.js
Tutorial [Link](https://www.youtube.com/watch?v=GkvMEYvXMyk)
## Day 5
### [LyricFinder](https://github.com/haxzie/30-days-of-vue/tree/master/Day5-Lyric-Finder)
## Day 6
### [Vuex Chat](https://github.com/haxzie/30-days-of-vue/tree/master/Day6-Vuex-Chat)
Learn Vuex and the *state management pattern* by building a simple chat application.
- Learn a simple implementation of `Vuex`
- Share a message history among any number of chat clients.
- Get a taste of `mapGetters` and `mapActions` to expose functionality in your components.
- Explore how your components can react to change sin the `Vuex Store`
## Day 7
### [PWA-medium-rss-feed](https://github.com/haxzie/30-days-of-vue/tree/master/Day7-pwa-medium-rss-feed)
Learn how to use `Vue`, `Vuex` and `Vue-router` and add `Progressive Web Apps(pwa)` features to the vuejs application.
# Day 8
### [Recipe Search App - Part 1](https://github.com/haxzie/30-days-of-vue/tree/master/Day8-RecipeSearchApp-Part1)
This app walks you through two days of various Vue project concepts. Day 1 includes:
- Installing and creating with ***vue-cli***
- List-rendering with ***v-for***
# Day 9
### [Recipe Search App - Part 2](https://github.com/haxzie/30-days-of-vue/tree/master/Day9-RecipeSearchApp-Part2)
Building on ***Day 8*** this tutorial includes:
* Binding fields to Vue data and actions
* Calling an API
* Rendering API Results
## Day 30