wagerfield / nuxt-typescript

TypeScript module for Nuxt
MIT License
90 stars 11 forks source link

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