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