Nuxt TypeScript Module
Lightening fast type checking and linting with TypeScript and TSLint.
yarn add nuxt-typescript typescript tslint --dev
Add nuxt-typescript
to Nuxt's config:
// nuxt.config.jsmoduleexports = modules: "nuxt-typescript"
Configure tsconfig.json
with the following settings:
Now you can use TypeScript in your Nuxt project:
// core/utils.ts
// store/index.ts
Check out the working example.
TSLint
If you want to use TSLint to lint your TypeScript files, simply create a tslint.json
file at the root of your project:
It is recommended that you set defaultSeverity
to "warning" so that linting errors can be distinguished from type errors.
Options
Options can be passed to nuxt-typescript
via a typescript
object in the Nuxt config file:
// nuxt.config.jsmoduleexports = modules: "nuxt-typescript" typescript: formatter: "default"
Option | Type | Default | Description |
---|---|---|---|
tsconfig |
String |
"tsconfig.json" | Path to TypeScript config file. |
tslint |
String |
"tslint.json" | Path to TSLint config file. |
formatter |
String |
"codeframe" | TSLint formatter to use. Either "default" or "codeframe". |
parallel |
Boolean |
true |
Enable/disable thread-loader for production builds. |
checker |
Boolean |
true |
Enable/disable the TypeScript checker webpack plugin. |
babel |
Object |
null |
Babel configuration options to be merged with Nuxt's defaults. |
Credits
Thanks to Evan You and Kevin Petit for their work on the Vue CLI TypeScript plugin from which a lot of the implementation is based.
Thanks to John Lindquist for creating the Nuxt TypeScript example that got this project started.