@esmx/router-vue/dist/use.d.ts

Vue integration for @esmx/router - A universal router that works seamlessly with both Vue 2.7+ and Vue 3

import type { Route, Router, RouterLinkProps } from '@esmx/router';
export interface VueInstance {
    $parent?: VueInstance | null;
    $root?: VueInstance | null;
    $children?: VueInstance[] | null;
}
/**
 * Get router instance from a Vue component instance.
 * This is a lower-level function used internally by useRouter().
 * Use this in Options API, use useRouter() in Composition API.
 *
 * @param instance - Vue component instance (optional, will use getCurrentInstance if not provided)
 * @returns Router instance
 * @throws {Error} If router context is not found
 *
 * @example
 * ```typescript
 * // Options API usage
 * import { defineComponent } from 'vue';
 * import { getRouter } from '@esmx/router-vue';
 *
 * export default defineComponent({
 *   mounted() {
 *     const router = getRouter(this);
 *     router.push('/dashboard');
 *   },
 *   methods: {
 *     handleNavigation() {
 *       const router = getRouter(this);
 *       router.replace('/profile');
 *     }
 *   }
 * });
 *
 * // Can also be called without instance (uses getCurrentInstance internally)
 * const router = getRouter(); // Works in globalProperties getters
 * ```
 */
export declare function getRouter(instance?: VueInstance): Router;
/**
 * Get current route from a Vue component instance.
 * This is a lower-level function used internally by useRoute().
 * Use this in Options API, use useRoute() in Composition API.
 *
 * @param instance - Vue component instance (optional, will use getCurrentInstance if not provided)
 * @returns Current route object
 * @throws {Error} If router context is not found
 *
 * @example
 * ```typescript
 * // Options API usage
 * import { defineComponent } from 'vue';
 * import { getRoute } from '@esmx/router-vue';
 *
 * export default defineComponent({
 *   computed: {
 *     routeInfo() {
 *       const route = getRoute(this);
 *       return {
 *         path: route.path,
 *         params: route.params,
 *         query: route.query
 *       };
 *     }
 *   }
 * });
 *
 * // Can also be called without instance (uses getCurrentInstance internally)
 * const route = getRoute(); // Works in globalProperties getters
 * ```
 */
export declare function getRoute(instance?: VueInstance): Route;
/**
 * Get the router instance in a Vue component.
 * Must be called within setup() or other composition functions.
 * Use this in Composition API, use getRouter() in Options API.
 *
 * @returns Router instance for navigation and route management
 * @throws {Error} If called outside setup() or router context not found
 *
 * @example
 * ```vue
 * <script setup lang="ts">
 * import { useRouter } from '@esmx/router-vue';
 *
 * const router = useRouter();
 *
 * const navigateToHome = () => {
 *   router.push('/home');
 * };
 *
 * const goBack = () => {
 *   router.back();
 * };
 *
 * const navigateWithQuery = () => {
 *   router.push({
 *     path: '/search',
 *     query: { q: 'vue router', page: '1' }
 *   });
 * };
 * </script>
 * ```
 */
export declare function useRouter(): Router;
/**
 * Get the current route information in a Vue component.
 * Returns a reactive reference that automatically updates when the route changes.
 * Must be called within setup() or other composition functions.
 * Use this in Composition API, use getRoute() in Options API.
 *
 * @returns Current route object with path, params, query, etc.
 * @throws {Error} If called outside setup() or router context not found
 *
 * @example
 * ```vue
 * <template>
 *   <div>
 *     <h1>{{ route.meta?.title || 'Page' }}</h1>
 *     <p>Path: {{ route.path }}</p>
 *     <p>Params: {{ JSON.stringify(route.params) }}</p>
 *     <p>Query: {{ JSON.stringify(route.query) }}</p>
 *   </div>
 * </template>
 *
 * <script setup lang="ts">
 * import { useRoute } from '@esmx/router-vue';
 * import { watch } from 'vue';
 *
 * const route = useRoute();
 *
 * watch(() => route.path, (newPath) => {
 *   console.log('Route changed to:', newPath);
 * });
 * </script>
 * ```
 */
export declare function useRoute(): Route;
/**
 * Provide router context to child components.
 * This must be called in a parent component to make the router available
 * to child components via useRouter() and useRoute().
 *
 * @param router - Router instance to provide to child components
 * @throws {Error} If called outside setup()
 *
 * @example
 * ```typescript
 * // Vue 3 usage
 * import { createApp } from 'vue';
 * import { Router } from '@esmx/router';
 * import { useProvideRouter } from '@esmx/router-vue';
 *
 * const routes = [
 *   { path: '/', component: () => import('./Home.vue') },
 *   { path: '/about', component: () => import('./About.vue') }
 * ];
 *
 * const router = new Router({ routes });
 * const app = createApp({
 *   setup() {
 *     useProvideRouter(router);
 *   }
 * });
 * app.mount('#app');
 * ```
 */
export declare function useProvideRouter(router: Router): void;
/**
 * Get the current RouterView depth in nested routing scenarios.
 * Returns the depth of the current RouterView component in the component tree.
 * Useful for advanced routing scenarios where you need to know the nesting level.
 *
 * @param isRender - Whether this is used in a RouterView component that needs to provide depth for children (default: false)
 * @returns Current RouterView depth (0 for root level, 1 for first nested level, etc.)
 * @throws {Error} If called outside setup()
 *
 * @example
 * ```vue
 * <template>
 *   <div>
 *     <p>Current RouterView depth: {{ depth }}</p>
 *     <RouterView />
 *   </div>
 * </template>
 *
 * <script setup lang="ts">
 * import { useRouterViewDepth } from '@esmx/router-vue';
 *
 * // Get current depth without providing for children
 * const depth = useRouterViewDepth();
 * console.log('Current RouterView depth:', depth); // 0, 1, 2, etc.
 *
 * // Get current depth and provide depth + 1 for children (used in RouterView component)
 * const depth = useRouterViewDepth(true);
 * </script>
 * ```
 */
export declare function _useRouterViewDepth(isRender?: boolean): number;
/**
 * Get the current RouterView depth in nested routing scenarios.
 * Returns the depth of the current RouterView component in the component tree.
 * Useful for advanced routing scenarios where you need to know the nesting level.
 *
 * @returns Current RouterView depth (0 for root level, 1 for first nested level, etc.)
 * @throws {Error} If called outside setup()
 *
 * @example
 * ```vue
 * <template>
 *   <div>
 *     <p>Current RouterView depth: {{ depth }}</p>
 *     <RouterView />
 *   </div>
 * </template>
 *
 * <script setup lang="ts">
 * import { useRouterViewDepth } from '@esmx/router-vue';
 *
 * // Get current depth without providing for children
 * const depth = useRouterViewDepth();
 * console.log('Current RouterView depth:', depth); // 0, 1, 2, etc.
 * </script>
 * ```
 */
export declare function useRouterViewDepth(): number;
/**
 * Get injected RouterView depth from a Vue instance's ancestors.
 * Traverses parent chain to find the value provided under ROUTER_VIEW_DEPTH_KEY.
 *
 * @param instance - Vue component instance to start from
 * @returns Injected RouterView depth value from nearest ancestor
 * @throws {Error} If no ancestor provided ROUTER_VIEW_DEPTH_KEY
 */
export declare function getRouterViewDepth(instance: VueInstance): number;
/**
 * Create reactive link helpers for navigation elements.
 * Returns computed properties for link attributes, classes, and event handlers.
 *
 * @param props - RouterLink properties configuration
 * @returns Computed link resolver with attributes and event handlers
 *
 * @example
 * ```vue
 * <template>
 *   <a
 *     v-bind="link.attributes"
 *     v-on="link.createEventHandlers()"
 *     :class="{ active: link.isActive }"
 *   >
 *     Home
 *   </a>
 * </template>
 *
 * <script setup lang="ts">
 * import { useLink } from '@esmx/router-vue';
 *
 * const link = useLink({
 *   to: '/home',
 *   type: 'push',
 *   exact: 'include'
 * }).value;
 * </script>
 * ```
 */
export declare function useLink(props: RouterLinkProps): import("vue").ComputedRef<import("@esmx/router").RouterLinkResolved>;