Edit this page

<Wrapper>

Environment: client, and server if ssr: true.

Implemented by: vike-react.

You need vike-react to be able to use the Wrapper setting. If you don't use vike-react then see Without vike-{react,vue,solid}.

The component defined by the Wrapper setting wraps the <Page> component.

<Wrapper>     ⟸ component defined by the setting "Wrapper"
  <Layout>    ⟸ component defined by the setting "Layout"
    <Page />  ⟸ component defined by the setting "Page"
  </Layout>
</Wrapper>

A page can be wrapped by multiple <Wrapper> components:

<Wrapper1>
  <Wrapper2>
    <Wrapper3>
      <Layout>
        <Page />
      </Layout>
    </Wrapper3>
  </Wrapper2>
</Wrapper1>

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:

• vike-react source code

See also

• API > <Layout>
• API > <Page>