<Wrapper>


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 extension.

The Wrapper setting wraps your Page component with another 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>

Unlike <Wrapper>, a page can have only one <Layout> component. (In other words <Wrapper> is cumulative whereas <Layout> isn't.)

The <Wrapper> component is usually used for integrating tools, such as data fetching and state management tools.

Without Vike extension

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:

See also