maniacs-oss / 30-days-of-vue

:star2: A 30 day learning challenge for VueJS by building simple yet cool projects :muscle:

30 Days of Vue!

🌟 A 30 day learning challenge for VueJS by building simple yet cool projects 💪

Day 1

A Simple Todo 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 📱

Create a beautiful calculator using Vue.js

• Learn to install vue cli
• 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

Day 3

CountDown Timer ⏳

Create a simple countdown timer using Vue.js

• Understand the usage of watch, filters, and intervals

Day 4

Simple Markdown Previewer

Create a Markdown Previewer using Vue.js 🎉

• Understand directives in Vue.js

Tutorial Link

Day 5

LyricFinder

Day 6

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

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

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

Building on Day 8 this tutorial includes:

• Binding fields to Vue data and actions
• Calling an API
• Rendering API Results

Day 30