IDE type issues with $device helper

[gregmulvaney]

Webstorm is unable to locate the types for the $device helper. Not really familiar with Nuxt plugins/modules so unfortunately I'm not able to locate the issue. App fails nuxi typecheck as well but is able to be built and functions as expected. Tried adding the module to my tsconfig with no fix.

Nuxt: v3.2.2
device: v3.1.0

[danielroe]

~> nuxt/nuxt#19399

[gregmulvaney]

Unless Webstorm is changing something under the hood, I can't see why I would also fail nuxi typecheck with the error of

error TS2339: Property '$device' 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) => ...'.

Implementation

<script setup lang="ts">
const { isMobile } = useDevice()
</script>

<template>
  <div class="min-h-[100dvh] flex flex-col">
    <NavDesktop v-if="!$device.isMobile" />

    <div class="mx-auto px-4 container lg:px-8">
      <slot />
    </div>
    <NavMobile v-if="$device.isMobile" />
  </div>
</template>

[danielroe]

No, that shouldn't happen. Would you provide a reproduction?

[gregmulvaney]

Sure can!

Here is the sandbox: https://codesandbox.io/p/sandbox/great-bash-7zdlg1

Issue persist when running pnpx nuxi typecheck

[danielroe]

That's a bug with this module (or rather, in the build system), as it does not generate types for its plugin: https://unpkg.com/browse/@nuxtjs/device@3.1.0/dist/runtime/plugin.d.ts.

[nathanchase]

Yeah, I get a similar error in VSCode:
'__VLS_ctx.$device' is of type 'unknown'.

[joseehilton147]

yep, same error on vs code:

[max-arias]

I came across the same issue, I shimmed it by doing:

import { ComponentCustomProperties } from 'vue';

type Device = {
  userAgent: string;
  isDesktop: boolean;
  isIos: boolean;
  isAndroid: boolean;
  isMobile: boolean;
  isMobileOrTablet: boolean;
  isDesktopOrTablet: boolean;
  isTablet: boolean;
  isWindows: boolean;
  isMacOS: boolean;
  isApple: boolean;
  isSafari: boolean;
  isFirefox: boolean;
  isEdge: boolean;
  isChrome: boolean;
  isSamsung: boolean;
  isCrawler: boolean;
};

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $device: Device;
  }
}

[popdo]

I get a similar error in VSCode:

'__VLS_ctx.$device' is of type 'unknown'.

[sholohov]

I solved the problem for myself like this

// plugins.d.ts

import type { Device } from "@nuxtjs/device/runtime/types";

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $device: Device;
  }
}

[steklopod]

I solved the problem for myself like this

// plugins.d.ts

import type { Device } from "@nuxtjs/device/runtime/types";

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $device: Device;
  }
}

That helped, but would be nice to have it out of the box in library