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.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

Matthew Wagerfield

License

MIT