async setup and Suspense in Vue

Vue interview exercise on Patterns, difficulty 3 of 3. Solve it in the editor beside a worked example; the tests run the moment you do.

Write UserCard with a prop `load` (() => Promise<{ name, role }>) whose async setup awaits it and renders <div class="user"><b>name</b> <i>role</i></div>; and Profile with the same `load` prop, rendering UserCard inside <Suspense> with a #fallback of <p class="loading">Loading…</p>.

Each exercise pairs a worked example with a twin problem to solve in a real editor; the tests run the moment you do. Progress is saved in your browser, and in your account if you sign in.

More Patterns in Vue

All Vue exercises · Other languages and frameworks