KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#typescript #ai-agents #cli #claude-code #codex #developer-tools #ai #dsh-plugin #ai-agent #mcp #deepseek-harness #windows

30-days-of-vue

★ 44 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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)
![TodoTodoTodoo](https://haxzie.github.io/30-days-of-vue/images/day1.png)

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)
![Calicoo](https://haxzie.github.io/30-days-of-vue/images/day2.png)

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)
![HackTime](https://screenshotscdn.firefoxusercontent.com/images/edab1f59-4a39-436a-8afd-6c1d6aa0603e.png)

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)
![Markie](https://haxzie.github.io/30-days-of-vue/images/markie.png)
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)
![LyricFinder](https://haxzie.github.io/30-days-of-vue/images/day5.png)

## Day 6
### [Vuex Chat](https://github.com/haxzie/30-days-of-vue/tree/master/Day6-Vuex-Chat)
![Vuex Chat](https://haxzie.github.io/30-days-of-vue/images/day6.png)
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)
![PWA-medium-rss-feed](https://haxzie.github.io/30-days-of-vue/images/day7.png)

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)
![RecipeApp](https://haxzie.github.io/30-days-of-vue/images/day8-9.jpg)

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)
![RecipeApp](https://haxzie.github.io/30-days-of-vue/images/day8-9.jpg)

Building on ***Day 8*** this tutorial includes:
* Binding fields to Vue data and actions
* Calling an API
* Rendering API Results

## Day 30

30-days-of-vue

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README