nuxt-multi-cache/dist/runtime/components/RenderCacheable/index.d.ts

SSR route, component and data cache for Nuxt.js

import type { PropType } from 'vue';
/**
 * 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 <div>, 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<import("vue").ExtractPropTypes<{
    /**
     * The tag to use for the wrapper. It's unfortunately not possible to
     * implement this without a wrapper.
     */
    tag: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Disable caching entirely for this component.
     */
    noCache: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The key to use for the cache entry. If left empty a key is automatically
     * generated based on the props passed to the child.
     * The key is automatically prefixed by the component name.
     */
    cacheKey: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Cache tags that can be later used for invalidation.
     */
    cacheTags: {
        type: PropType<string[]>;
        default: () => never[];
    };
    /**
     * Define a max age for the cached entry.
     */
    maxAge: {
        type: NumberConstructor;
        default: number;
    };
    /**
     * Provide the async data keys used by the cached component.
     *
     * If provided the payload data will be cached alongside the component.
     * If the component uses asyncData and the keys are not provided you will
     * receive a hydration mismatch error in the client.
     */
    asyncDataKeys: {
        type: PropType<string[]>;
        default: () => never[];
    };
}>, (() => string) | (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
}>), {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * The tag to use for the wrapper. It's unfortunately not possible to
     * implement this without a wrapper.
     */
    tag: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Disable caching entirely for this component.
     */
    noCache: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The key to use for the cache entry. If left empty a key is automatically
     * generated based on the props passed to the child.
     * The key is automatically prefixed by the component name.
     */
    cacheKey: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Cache tags that can be later used for invalidation.
     */
    cacheTags: {
        type: PropType<string[]>;
        default: () => never[];
    };
    /**
     * Define a max age for the cached entry.
     */
    maxAge: {
        type: NumberConstructor;
        default: number;
    };
    /**
     * Provide the async data keys used by the cached component.
     *
     * If provided the payload data will be cached alongside the component.
     * If the component uses asyncData and the keys are not provided you will
     * receive a hydration mismatch error in the client.
     */
    asyncDataKeys: {
        type: PropType<string[]>;
        default: () => never[];
    };
}>> & Readonly<{}>, {
    maxAge: number;
    noCache: boolean;
    cacheTags: string[];
    tag: string;
    cacheKey: string;
    asyncDataKeys: string[];
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;