`<Wrapper>`

Environment: client, and server (if ssr: true).

Provided by: vike-react/vike-solid.

You need vike-react/vike-solid to be able to use the +Wrapper setting.

The +Wrapper component wraps the +Page component and all +Layout components.

<Wrapper>     ⟸ component defined by +Wrapper
  <Layout>    ⟸ component defined by +Layout
    <Page />  ⟸ component defined by +Page
  </Layout>
</Wrapper>

// pages/+Wrapper.jsx
 
// `children` includes +Page and all +Layout components
export default function Wrapper({ children }) {
  return <>
    <MyWrapper>
      {children}
    </MyWrapper>
  </>
}

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

The only difference between +Wrapper and +Layout is that +Wrapper wraps +Layout.

To integrate tools, we generally recommend +Wrapper over +Layout, as it ensures that all +Layout components are also wrapped.

To define your pages' visual appearance, we generally recommend +Layout.

A page can be wrapped by multiple +Wrapper components:

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

<Wrapper>

See also

`<Wrapper>`