Vue.js Assignment– 7

Vue UI Patterns & Component Design

Basic Questions

  1. Create a dumb ButtonPrimary component that only accepts label and emits click.
  2. Create a smart UserListContainer that fetches users and passes data to a dumb UserList.
  3. Convert a presentational table into a dumb component that receives rows and columns as props.
  4. Build a card component that exposes a scoped slot for custom header content.
  5. Use a scoped slot to render a list item with custom markup provided by the parent.
  6. Create a dynamic component switcher that toggles between LoginForm and SignupForm.
  7. Render a component dynamically by name from an array of component strings.
  8. Implement a child component that emits update:modelValue and bind with v-model.
  9. Add a custom event submitted to a form component and handle it in the parent.
  10. Create a minimal event bus with a tiny emitter and use it to broadcast app:ready.
  11. Add ARIA roles to a tablist component: role=”tablist”, role=”tab”, role=”tabpanel”.
  12. Implement keyboard navigation (Left/Right) for tabs using keydown on the tab elements.
  13. Add aria-expanded and aria-controls to an accordion button + panel.
  14. Provide aria-live=”polite” region to announce form submit results.
  15. Add aria-invalid and aria-describedBy to inputs when showing validation errors.
  16. Create a render function that outputs a simple <ul><li>…</li></ul> from props.
  17. Install JSX support and render a <Badge> component using JSX in Vue.
  18. Emit a typed payload (object) from child to parent and assert its shape in the handler.
  19. Implement a StopPropagationButton that stops event bubbling on click.
  20. Add aria-busy=”true” to a button while an async action runs and reset it on completion.

Intermediate Questions

  1. Refactor a page into smart container + dumb presentational components; move all data fetching to the container.
  2. Build a dumb DataTable that renders via a scoped slot for each cell to customize content.
  3. Create a ListProvider smart component that exposes { items, loading, error } via a scoped slot.
  4. Implement a dynamic component router that renders components from a config array with props.
  5. Write a render function that injects attributes and listeners into its children (this.$slots.default).
  6. Create a JSX-based Menu component that supports nested items and emits select.
  7. Add a custom event strategy: child emits save, parent re-emits save upward with extra metadata.
  8. Build a small event bus plugin with on, off, emit and provide/inject it app-wide.
  9. Implement a global beforeUnmount listener that unsubscribes components from the event bus.
  10. Add ARIA keyboard support to a dropdown: Down to open, Esc to close, Enter to select.
  11. Add focus trapping in a modal using tabindex and return focus to the opener on close.
  12. Provide accessible labels for icon-only buttons with aria-label and title.
  13. Implement aria-current=”page” for active navigation link in a custom router-link wrapper.
  14. Create a controlled vs uncontrolled input pair and compare v-model vs explicit value/emit.
  15. Build a Toggle dumb component and a ThemeToggleContainer smart component that persists state.
  16. Implement a renderless component that exposes pagination state via a scoped slot.
  17. Create a Portal component that renders its slot into a different DOM node via render function.
  18. Write a JSX List that accepts a renderItem prop (function as child) to render each item.
  19. Add role=”alertdialog” to a confirmation modal and wire up ARIA attributes correctly.
  20. Build a Breadcrumbs component with proper nav/aria-label and list semantics.

Advanced Questions

  1. Design a component library skeleton: all components dumb by default, with separate smart containers.
  2. Implement a renderless autocomplete that exposes { query, results, select, loading } via scoped slots.
  3. Build a dynamic form renderer that maps a JSON schema to dynamic components using a render function.
  4. Create an event channel pattern: namespaced events (cart:add, cart:remove) with the event bus.
  5. Implement a batched emit strategy: child queues rapid changes and emits a single change after debounce.
  6. Create a complex a11y-compliant combobox with ARIA roles (combobox, listbox, option) and keyboard support.
  7. Write a JSX VirtualList that only renders visible rows and emits scroll-end for infinite loading.
  8. Build a layout system component that uses scoped slots for header/sidebar/content and supports dynamic component injection.
  9. Create a plugin that enforces accessibility checks (warn when components miss ARIA labels on interactive elements).
  10. Final Hands-on Project:
    • Refactor a medium UI into smart containers + dumb components
    • Use scoped slots and a renderless component for reusable behaviors
    • Mix render functions and JSX for highly dynamic UIs
    • Establish event strategy (custom events, namespaced bus, batched emits)
    • Ensure full accessibility: roles, keyboard, focus management, live regions, and ARIA attributes throughout