device
device copied to clipboard
Typescript typings missing?
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?
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
}
}
sorry
types exist, you need tsconfig.json
{
"compilerOptions": {
...
"types": [
"@nuxtjs/device"
]
...
}
}