Typescript typings missing?

[Parakoos]

Hi,

I followed the install instructions. So, I have:

// package.json
"devDependencies": {
  "@nuxtjs/device": "^2.0.1",
},

//  nuxt.config.ts
buildModules: [
  '@nuxt/typescript-build',
  '@nuxtjs/vuetify',
  '@nuxtjs/pwa',
  '@nuxtjs/firebase',
  '@nuxtjs/device',
],

And yet, I do not get any type-ahead typings anywhere. I tried in the store, on the nuxt Context object and a component's 'this'. No $device object found anywhere. If I run the app and inspect it with the Chrome dev tools, I can see it is there. And, if I do the following, it works!

// Inside a component (using property decorator syntax)
get isOnDesktop() {
  return (this as any).$device.isDesktop
}

I've even restarted windows just to make sure it wasn't something weird like that.

Where am I going wrong?

[teaknig]

types are missing here, so you have to solve the problem by yourself

create a file vue.d.ts

and copy there

// ./vue.d.ts

// eslint-disable-next-line @typescript-eslint/no-unused-vars
import Vue from 'vue'

interface IDevice {
  isDesktop: boolean
  isMobile: boolean
  // etc
}

declare module 'vue/types/vue' {
  interface Vue {
    $device: IDevice
  }
}

declare module '@nuxt/types' {
  interface NuxtAppOptions {
    $device: IDevice
  }
}

[teaknig]

sorry

types exist, you need tsconfig.json

{
   "compilerOptions": {
    ...
      "types": [
        "@nuxtjs/device"
      ]
    ...
  }
}

[DamianGlowala]

As Nuxt 2 has reached End of Life (https://nuxt.com/blog/nuxt2-eol), this issue will now be closed. Please feel free to comment or create a new one if it is still relevant in the Nuxt 3 version of this module.