@tanstack/vue-router/dist/source/ClientOnly.d.ts

Modern and scalable routing for Vue applications

import * as Vue from 'vue';
export interface ClientOnlyProps {
    /**
     * The children to render when the JS is loaded.
     */
    children?: Vue.VNode;
    /**
     * The fallback component to render if the JS is not yet loaded.
     */
    fallback?: Vue.VNode;
}
/**
 * Render the children only after the JS has loaded client-side. Use an optional
 * fallback component if the JS is not yet loaded.
 *
 * @example
 * Render a Chart component if JS loads, renders a simple FakeChart
 * component server-side or if there is no JS. The FakeChart can have only the
 * UI without the behavior or be a loading spinner or skeleton.
 *
 * ```tsx
 * return (
 *   <ClientOnly fallback={<FakeChart />}>
 *     <Chart />
 *   </ClientOnly>
 * )
 * ```
 */
export declare const ClientOnly: Vue.DefineComponent<Vue.ExtractPropTypes<{
    fallback: {
        type: Vue.PropType<Vue.VNode>;
        default: null;
    };
}>, () => Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
    [key: string]: any;
}> | Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
    [key: string]: any;
}>[] | undefined, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
    fallback: {
        type: Vue.PropType<Vue.VNode>;
        default: null;
    };
}>> & Readonly<{}>, {
    fallback: Vue.VNode<Vue.RendererNode, Vue.RendererElement, {
        [key: string]: any;
    }>;
}, {}, {}, {}, string, Vue.ComponentProvideOptions, true, {}, any>;
/**
 * Return a boolean indicating if the JS has been hydrated already.
 * When doing Server-Side Rendering, the result will always be false.
 * When doing Client-Side Rendering, the result will always be false on the
 * first render and true from then on. Even if a new component renders it will
 * always start with true.
 *
 * @example
 * ```tsx
 * // Disable a button that needs JS to work.
 * const hydrated = useHydrated()
 * return (
 *   <button type="button" disabled={!hydrated.value} onClick={doSomethingCustom}>
 *     Click me
 *   </button>
 * )
 * ```
 * @returns True if the JS has been hydrated already, false otherwise.
 */
export declare function useHydrated(): Vue.Ref<boolean>;