+Page.mdx

import { Link } from '@brillout/docpress' import { UiFrameworkVikeExtension, ImplementedBy } from '../../components'

Wrapper setting

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 , you can implement the Wrapper setting yourself by using meta.

Examples:

• vike-react source code
• vike-vue source code
• vike-solid source code

See also