Your journey with Contentful will most likely start with a clean environment. The Vue Storefront team will populate it with content types parallel to your frontend setup. We have devided them into three groups: components, field groups and containers.
See it yourself
This is just a beginning
The default set of content types provided by Vue Storefront is just a starting point. Use them as a foundation and as an example helping you to develop your project further.
Creating content types for your components is the first step towards building dynamic pages with Contentful. The default setup provided by Vue Storefront includes content types for all frontend components such as Banner, Grid, Hero and Scrollable. You can recognize them by the
[Component] tag in the description.
All content types for components feature the
Component field. It is hidden for editing but defaults to the name of the frontend component used for rendering entries of this content type. Thanks to that, content types and components are not tightly coupled.
For example: by default entries of type Banner are rendered by the Banner component but if you decide to rename it or use another component instead, the change will be as simple as updating the default value for the
Field groups are used by components content types whenever some more complex field structure is needed. For example, Banner, Hero and Product Card use a field group called Button which has two fields:
Link. Moreover, field groups can reference other field groups (e.g. Styles referencing fields groups for CSS width, height or padding properties).
Field groups can be identified by the
[Field Group] tag in their description. From a higher-level perspective, the integration distinguishes field groups from components based on the presence (or absence) of the
Component field, which is exclusive to components and should not exist in field groups.
Containers are the last step towards building dynamic pages. They allow you to create entries grouping your components and fetch them with a single API call. They can be identified by the
[Container] tag in their description. The default Vue Storefront setup ships with two containers: Page and Layout.
Pages feature the
URL field which is used by the frontend to get the right page for the currently visited route. They also feature two fields of type Reference:
Components above the fold and
Components below the fold. They can be used to add any type of component in any combination and tell the frontend to render them either eagerly or lazily.
Layouts are identified by the
Name field. Whereas your setup will feature a lot of Page entries, there will be way fewer Layout entries in it. Sometimes even a single Layout is enough because - although not directly connected - it is there to augment your pages with a shell consisting of components such as MegaMenu or Footer which should be persisted across all routes.