After setting up Nuxtjs with typescript, I noticed that there are no code completions in the template and script as expected based on the title.
Here is the code:
<script lang="ts">
import Vue from 'vue';
import { FeaturedJobs } from '../../types/featuredJobs';
export default Vue.extend({
data() {
return {
transform: 0,
movedTimes: 0,
featuredJobs: {} as FeaturedJobs,
}
},
mounted() {
console.log(this.featuredJobs.title) // Here, I anticipate code completion to suggest title and other properties (or anywhere else inside the template same situation)
}
})
This is my nuxt config build modules where nuxt typescript build is added upon installation:
buildModules: [
// https://go.nuxtjs.dev/typescript
'@nuxt/typescript-build',
// https://go.nuxtjs.dev/tailwindcss
'@nuxtjs/tailwindcss',
]
These are my package.json dev dependencies:
"devDependencies": {
"@nuxt/types": "^2.15.8",
"@nuxt/typescript-build": "^2.1.0",
"@nuxtjs/dotenv": "^1.4.1",
"@nuxtjs/style-resources": "^1.2.1",
"@nuxtjs/tailwindcss": "^4.2.1",
}
Furthermore, this is my tsconfig:
{
"compilerOptions": {
"target": "ES2018",
"module": "ESNext",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"experimentalDecorators": true,
"baseUrl": ".",
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./*"
]
},
"types": [
"@nuxt/types",
"@types/node",
"@nuxtjs/axios",
]
},
"exclude": [
"node_modules",
".nuxt",
"dist"
]
}
It seems that when I type featuredJobs., completions and suggestions do not come from the FeaturedJobs type.