I recently configured a new Nuxt.js app with Typescript, but I'm encountering some Typescript errors that seem to be connected to the $auth module.
Here is how my tsconfig.json looks in terms of "types" settings:
"types": [
"@types/node",
"@nuxt/types",
"@types/nuxtjs__auth",
"@nuxtjs/axios",
]
Below is the code snippet causing the issue:
async login() {
try {
await this.$auth.loginWith('local', {
data: {
user: {
email: this.email,
password: this.password
}
}
})
this.$router.push('/dashboard')
} catch (e) {
this.error = e.response.data.message
}
}
This is the error message I'm receiving:
Property '$auth' does not exist on type '{ login(): Promise<void>; }'.
I've read several Stack Overflow posts suggesting to add types to the tsconfig.json, which I implemented but it hasn't resolved this particular issue.
Any suggestions on how I can resolve this?
EDIT:
nuxt.config.js
require('dotenv').config()
const axiosUrl = process.env.AXIOS_BASE_URL;
const port = process.env.NODE_ENV === 'production' ? process.env.PORT : 3333;
export default {
// Disable server-side rendering (https://go.nuxtjs.dev/ssr-mode)
ssr: true,
// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
title: 'ollie-frontend',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
// Global CSS (https://go.nuxtjs.dev/config-css)
css: [
],
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
],
// Auto import components (https://go.nuxtjs.dev/config-components)
components: true,
// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
buildModules: [
// https://go.nuxtjs.dev/tailwindcss
'@nuxtjs/tailwindcss',
'@nuxtjs/google-fonts',
['@nuxt/typescript-build', {
typeCheck: true,
ignoreNotFoundWarnings: true,
}],
],
// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
'@nuxtjs/axios',
'@nuxtjs/auth'
],
// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {
},
server: {
port: port,
},
axios: {
baseURL: axiosUrl
},
auth: {
redirect: {
login: '/sign_in',
logout: '/',
},
strategies: {
local: {
endpoints: {
login: { url: '/login', method: 'post', propertyName: 'token' },
register: { url: '/signup', method: 'post' },
user: { url: '/api/v1/users/me', method: 'get', propertyName: 'user' },
logout: false
}
}
}
},
router: {
middleware: ['auth']
},
typescript: {
typeCheck: {
eslint: {
files: './**/*.{ts,js,vue}'
}
}
},
}
tsconfig.json:
{
"compilerOptions": {
"target": "ES2018",
"module": "ESNext",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"baseUrl": ".",
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./*"
]
},
"types": [
"@types/node",
"@nuxt/types",
"@types/nuxtjs__auth",
"@nuxtjs/axios",
]
},
"exclude": [
"node_modules"
]
}