IT Bootcamp 2025 - Wahyu

Sharing about how to get started with Vue.js and bring your frontend to life using Motion Vue for smooth, modern animations.

Transcript

1. Level Up Your Frontend: Getting Started with Vue.js & Motion Vue Wahyu Ivan FE Developer, Incentro APAC
2. </ Introduction Hi, I’m Wahyu. 3 years exp of working, 1 year as QA, 2 year as dev, polygloting on every tech. And I am currently continuing my studies in the Master of Computer Science program at Undiksha.
3. Why Vue and Motion?
4. 1. Simple and intuitive API 2. Declarative animations with React, Vue, and more 3. High performance with optimized rendering </ Why Motion?
5. 1. Gentle learning curve 2. Lightweight and fast performance 3. Clean and flexible component structure 4. Powerful reactivity system 5. Strong official ecosystem (Vue Router, Pinia, Vite) 6. Easy integration 7. Balanced between structure and flexibility 8. Great documentation and community support 9. Built-in TypeScript support in Vue 3 10. Excellent developer experience (DX) </ Why Vue?
7. Setup Project
8. </ Lets take our first step • Open the generated URL in browser → you now have a Vue project!
9. Template dan Interpolation
10. </ Important building blocks - Vue templates are enhanced HTML with data binding. - Use double curly braces {{ }} to show reactive data. Example: * The template remains valid HTML, making it approachable.
11. Reactive State
12. </ State handling made easy 1. ref — for primitive or object values
13. </ State handling made easy 2. reactive — for reactive objects (not primitives)
14. Binding Attribute, Class & Style
15. Use : shorthand (e.g. :src, :class, :style) Examples: </ Bind it!
16. Important Directive
17. v-if — conditionally render v-show — hide/show (via CSS) v-for — loop over arrays/objects (use :key) v-model — two-way binding (forms etc.) These directives replace many manual DOM logic lines. </ No DOM Needed
18. Event Handling
19. Instead of addEventListener, use @event syntax. Example: </ Event handling made easy * Very straightforward and ties directly to reactive logic.
20. Computed Property
21. For derived values from reactive state. Example: </ Derived values never been this simple If firstName or lastName change, fullName updates automatically. Use computed instead of writing heavy logic directly in template.
22. Watch & watchEffect
23. watch — observe specific reactive(s) and run side-effect </ Need to keep an eye?
24. </ Need to keep an eye? watchEffect — auto-runs function and tracks dependencies
25. Component Basics
26. Components = reusable building blocks Props — parent → child data </ Basic of things
27. Emit / Events — child → parent communication </ Basic of things In parent:
28. Lifecycle Hooks
29. Hooks let you run code at specific component moments: mount, update, unmount. Common ones: - onMounted - onUpdated - onUnmounted Use cases: fetch API on mount, set up subscriptions, cleanup to avoid memory leaks. </ Can’t get away from hooks
30. Template refs
31. Sometimes need direct DOM access. Use ref in template + ref() in script: </ Well, sometimes we need DOM
32. Best practices dan common pitfalls
33. - Don’t mutate props directly — use emit or local copy - Use computed for derived state, avoid heavy logic inside template - Be careful with expensive watchers — consider debounce/throttle - Clean up subscriptions in onUnmounted - Avoid very large reactive objects that frequently change — break state into smaller parts </ Do and Don’t
34. Adding animation to website with Motion for Vue
35. Motion for Vue is an animation library optimized for performance. It provides <motion> components that behave like DOM elements but with animation props. Features: property-based animations, gestures, scroll-driven, layout transitions, exit animations. Install: </ Getting started using Motion
36. Using initial, animate, transition: </ Basic Animation
37. Gestures: whileHover, whilePress: </ Interaction & Scroll
38. Scroll-triggered with useScroll: </ Interaction & Scroll
39. Layout transitions: add :layout to motion elements: </ Layout & Exit Animations
40. Exit Animations: use <AnimatePresence> wrapper: </ Layout & Exit Animations
41. Mini project for practice
42. Todo App • Input with v-model • List rendering with v-for + :key • Add / remove items (emit pattern) • computed to count completed • watch to auto-persist to localStorage • Animations on item enter/exit with Motion Registration Form • Binding & validation • Use computed to enable/disable submit • Use onMounted to auto-focus input Image Gallery with Modal • Bind src dynamically • Modal as child component (props + emit) • Animate modal in/out with Motion transitions </ Practice time!
43. That’s it, Thank You! Medium Article for today’s topic. Need a Free Private Mentoring? why.u9 @ivanwahyu195 wahyuivan