nuxt-typescript
v0.10.0Nuxt 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.js
module.exports = {
modules: ["nuxt-typescript"]
}
Configure tsconfig.json
with the following settings:
{
"compilerOptions": {
"jsx": "preserve",
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"@/*": ["./*"]
},
"strict": true,
"sourceMap": true,
"noUnusedLocals": true,
"experimentalDecorators": true
}
}
Now you can use TypeScript in your Nuxt project:
// core/utils.ts
export function reverseString(value: string) {
return value
.split("")
.reverse()
.join("")
}
// store/index.ts
export const state = () => ({
title: "Nuxt + TypeScript"
})
<template>
<div>
<h1 v-text="title"/>
<input v-model="input"/>
<pre v-text="reversed"/>
</div>
</template>
<script lang="ts">
import { State } from 'vuex-class'
import { Component, Vue } from 'nuxt-property-decorator'
import { reverseString } from '~/core/utils'
@Component
export default class extends Vue {
@State public title: string
public input = 'TypeScript'
head() {
return {
title: this.title
}
}
get reversed(): string {
return reverseString(this.input)
}
}
</script>
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:
{
"defaultSeverity": "warning",
"extends": ["tslint:latest"]
}
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.js
module.exports = {
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.
Author
License
Metadata
- MIT
- Whatever
- Matthew Wagerfield
- released 6/8/2018