import { type Props } from '../shared/index.js';
/**
* Wrapper for cacheable components.
*
* The component is cached based on the props of the first child in the
* default slot. Alternatively you can provide a custom cache key.
*
* The slot can only have a single child. That means you would have to wrap it
* in a
, but you likely want to create a component that "groups" together
* all your other components.
*
* On the server the contents of the default slot will be cached in Nitro's
* storage as markup. After that rendering is skipped and the markup is directly
* rendered. This means that the entire tree of the slot must not produce any
* side effects and must not access any form of global state:
*
* - Using or changing any form of global state (Pinia, vue-router, session,
* cookie, auth, meta) won't work and can lead to unexpected (and dangerous)
* behavior. This is also true for provide/inject (unless it's a
* helper/instance of some sort).
* - All data must be provided using props. That way it's possible to generate a
* unique cache key that changes when the props are different.
* - For example in a multi-lingual setup you would need to pass the "current
* language" as a prop and take it into account for the cache key if your
* component uses i18n. And if you don't render user information directly,
* you could cache components based on wether the request is authenticated
* or not.
*
* In addition to the markup it will also cache payloads produced by the
* component (e.g. via useAsyncData) if the keys are provided. It is advisable
* though to not fetch any data in cached components but instead pass it in
* via props and cache this data via a separate cache.
*/
declare const _default: import("vue").DefineComponent
& Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
export default _default;