This lesson is for members. Join us?
Subscribe now to get instant access to this course, plus a full library of Vue.js courses tailored to the plan you choose.
A Practical Example Of Seams - Presentational and Container Components
A Vue component that fetches data and renders every UI state in the same file is a knot: you can’t check loading, error, or empty without standing up the network or mocking inside the component.
The previous lesson gave you the vocabulary (units, seams, contracts). This one makes them concrete: split a products list into a container/composable that owns fetch and state, and a presentational component that only displays what it’s handed.
We’ll start by looking at the tangled SFC and it’s limited unit test. A thin Vitest browser-mode spec can wait for real products to appear, but the states you most need to test are awkward without faking the network.
So we cut a couple seams: useProductsfetches and holds state; ProductListPresentational takes products, loading, and error as props to render the UI and ProductListContaine connects the two.
Drive every UI state through that contract and the presentational suite needs zero network. Fetch and state wiring stay a different unit that can be tested separately (more on this later).
A couple of takeaways:
- Sometimes units are obvious (different file types or front-end vs backend) but other times they’re not. Pay attention and split wisely
- AI thrives with vocabulary. Name your seems accordingly within your project structure.
Links
