$page type not defined

[nurdism]

Version:

• @inertiajs/vue3 version: 1.0.0

Describe the problem:

$page type for ComponentCustomProperties is not defined in the typings for @inertiajs/vue3

[martinbean]

I’m getting the same too with code like this:

<Link
  v-bind:class="{ 'active': $page.component === 'Dashboard' }"
  v-bind:href="dashboardUrl"
>Dashboard</Link>

The error I get in Visual Studio Code is:

Property '$page' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<ExtractPropTypes<{}>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => ...'.ts(2339)

[nurdism]

I think the issue might be that types.ts never gets exported in index.ts where typescript is trying to pickup its types.

[nurdism]

As a temp fix you can declare your own types like this:

import type { Page } from '@inertiajs/core'
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $page: Page
  }
}

[rev4324]

You can also just import types.ts into your own .d.ts file as another temporary fix:

import Types from "@inertiajs/vue3/types/types"

[iraklisg]

The last release (1.0.0) does not include that fix. Is it going to be included in a future patch?

[martinbean]

@reinink Hey, any news on what version this fix will be included in and a ETA on release?