<Wrapper>
Environment: client, and server if ssr: true
.
Implemented by: vike-react
.
You need
vike-react
to be able to use theWrapper
setting. If you don't usevike-react
then see Withoutvike-{react,vue,solid}
.
The component defined by the Wrapper
setting wraps the <Page>
component.
A page can be wrapped by multiple <Wrapper>
components:
The <Wrapper>
component is usually used for integrating tools, such as data fetching and state management tools.
Both
<Wrapper>
and<Layout>
achieve the same, except that<Wrapper>
is guaranteed to also wrap all<Layout>
components.Since the wrapper component of tools usually want to wrap as much as possible, we generally recommend using
<Wrapper>
for integrating tools and using<Layout>
for defining the visual appearance of your pages.It's also more idiomatic and common to use
<Wrapper>
for tool integration and<Layout>
for visual appearance.
Without vike-{react,vue,solid}
In case you don't use a UI framework Vike extension vike-react
/vike-vue
/vike-solid
, you can implement the Wrapper
setting yourself by using meta.
Example: