Our intro to Vue 3 crash course will take you from a complete beginner to having a solid foundation of Vue skills. By the end of the course, you’ll dive into these fundamentals and build an app to put these concepts into practice. Ready to level up? Let’s dive in.

This course is your first step along the way, and on our platform you’ll find a whole library of courses you can take to level-up your skills. 👉 https://vuemastery.com/courses

Github: https://github.com/Code-Pop/Intro-to-Vue-3
Codepen: https://codepen.io/VueMastery/projects/public?cursor=ZD0xJm89MCZwPTEmdj01MTcwODI=

Lesson 2 - Creating the Vue App
Codepen:
Starting code: https://codepen.io/VueMastery/project/editor/XvJmbL
Ending code: https://codepen.io/VueMastery/project/editor/AmzmvE
Github:
Starting code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L2-start
Ending code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L2-end

Lesson 3 - Attribute Binding
Codepen:
Starting code: https://codepen.io/VueMastery/project/editor/ZWEjLe
Ending code: https://codepen.io/VueMastery/project/editor/AqemLM
Github:
Starting code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L3-start
Ending code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L3-end

Lesson 4 - Conditional Rendering
Codepen:
Starting code: https://codepen.io/VueMastery/project/editor/AayWgg
Ending code: https://codepen.io/VueMastery/project/editor/XqemMd
Github:
Starting code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L4-start
Ending code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L4-end

Lesson 5 - List Rendering
Codepen:
Starting code: https://codepen.io/VueMastery/project/editor/XLjywE
Ending code: https://codepen.io/VueMastery/project/editor/XoMWKj
Github:
Starting code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L5-start
Ending code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L5-end

Lesson 6 - Event Handling
Codepen:
Starting code: https://codepen.io/VueMastery/project/editor/DdrWxb
Ending code: https://codepen.io/VueMastery/project/editor/AVrboM
Github:
Starting code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L6-start
Ending code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L6-end

Lesson 7 - Class & Style Binding
Codepen:
Starting code: https://codepen.io/VueMastery/project/editor/AYxVmq
Ending code: https://codepen.io/VueMastery/project/editor/XmzmNO
Github:
Starting code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L7-start
Ending code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L7-end

Lesson 8 - Computed Properties
Codepen:
Starting code: https://codepen.io/VueMastery/project/editor/ZGvmVn
Ending code: https://codepen.io/VueMastery/project/editor/XgxWVm
Github:
Starting code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L8-start
Ending code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L8-end

Lesson 9 - Components & Props
Codepen:
Starting code: https://codepen.io/VueMastery/project/editor/DOjmKg
Ending code: https://codepen.io/VueMastery/project/editor/DBdRed
Github:
Starting code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L9-start
Ending code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L9-end

Lesson 10 - Communicating Events
Codepen:
Starting code: https://codepen.io/VueMastery/project/editor/ARkgop
Ending code: https://codepen.io/VueMastery/project/editor/XGvENE
Github:
Starting code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L10-start
Ending code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L10-end

Lesson 11 - Forms & v-model
Codepen:
Starting code: https://codepen.io/VueMastery/project/editor/DVrWmK
Ending code: https://codepen.io/VueMastery/project/editor/XvJkyg
Github:
Starting code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L11-start
Ending code: https://github.com/Code-Pop/Intro-to-Vue-3/tree/L11-end

Final: https://github.com/Code-Pop/Intro-to-Vue-3/tree/final

#vue #vuejs #javascript #web-development #webdev