YUNOVA · Vue.js
Module 10: UI and UX in Vue
Vue transitions and animations
Key points
- The Transition component animates an element entering or leaving.
- Vue adds classes like v-enter-from and v-leave-to for CSS.
- TransitionGroup animates items in a list.
Teleport and modals in Vue
Key points
- Teleport renders part of a component somewhere else in the DOM.
- Modals are often teleported to body so they sit above everything.
- The modal still uses the parent component's state and events.
Async components and Suspense
Key points
- defineAsyncComponent loads a component only when it is needed.
- Suspense shows fallback content while async parts load.
- This keeps the first page load smaller.
Tailwind CSS with Vue
Key points
- Tailwind styles elements with small utility classes in the template.
- Configure the content paths so unused classes are removed.
- Repeated class sets can move into reusable components.