Setup
Nuxt TypeScript Support mainly comes through a Nuxt module, @nuxt/typescript-build, and its types @nuxt/types.
Here are the guidelines to install & configure them.
Installation
yarn add --dev @nuxt/typescript-build @nuxt/types
npm install --save-dev @nuxt/typescript-build @nuxt/types
Types version
You may want to install specific types version to match your Nuxt version if its not latest :
yarn add --dev @nuxt/types@2.13.2
# OR
npm install --save-dev @nuxt/types@2.13.2
yarn add --dev @nuxt/types@npm:@nuxt/types-edge
# OR
npm install --save-dev @nuxt/types@npm:@nuxt/types-edge
Types versioning match Nuxt versioning since 2.13.0.
Configuration
All you need to do is add @nuxt/typescript-build
to your buildModules
in nuxt.config.js
export default {
buildModules: ['@nuxt/typescript-build']
}
and create a tsconfig.json
file :
{
"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"
]
},
"exclude": [
"node_modules"
]
}
Notice that ES2018 target is needed to be able to use Optional Chaining and Nullish Coalescing, as ESNext target doesn't seem to support these features for now.
You will also need to provide types for Vue files by adding the following type declaration:
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
You can place this file in the root directory of your project or a directory named types
. You can place it in a custom directory, but you'll need to configure typeRoots
in the tsconfig.json
file.
Check official TypeScript documentation to learn about the different compiler options.
If you are using Nuxt programmatically with a custom server framework, note that you will need to ensure that you wait for Nuxt to be ready before building:
// Make sure to wait for Nuxt to load @nuxt/typescript-build before proceeding
await nuxt.ready()
...
if (config.dev) {
const builder = new Builder(nuxt)
await builder.build()
}
That's it, you're all set to use TypeScript in your layouts, components, plugins and middlewares.
You can check the CookBook section to get some TypeScript recipes for your Nuxt project.
Module options
typeCheck
Enables TypeScript type checking on a separate process.
- Type:
Boolean
orObject
- Default:
true
When enabled, Nuxt.js uses fork-ts-checker-webpack-plugin to provide type checking.
You can use an Object
to override plugin options or set it to false
to disable it.
ignoreNotFoundWarnings
Enables suppress not found typescript warnings.
- Type:
Boolean
- Default:
false
When enabled, you can suppress export ... was not found ...
warnings.
See also about background information here.
Warning: This property might suppress the warnings you want to see. Be careful with how you configure it.
loaders
Customization of
ts-loader
options
- Type:
Object
If you need extra customization of the TypeScript loader, you can customize it for both ts
& tsx
files through loaders.ts
& loaders.tsx
module options :
loaders: {
ts: {
silent: true
},
tsx: {
silent: true
}
}