TypeScript on Nuxt.js as of Jan 2019

How to use TypeScript on Nuxt.js 2.3 and after 2.4

After Nuxt 2.9, the official maintains the new way to support TypeScript on Nuxt. So this article is not worth reading anymore 😉

TypeScript on Nuxt.js

Nowadays, I intend to adopt TypeScript for every new JavaScript project. To enjoy the type safety, to keep certain development speed…etc. From my first Nuxt project, I’ve been seeking the easiest and elegant way to use TypeScript.

Using TypeScript with Vue is not so perfect and lacking many things for the full benefits of TypeScript. However, I’m terrified to use pure (or w/Babel) JavaScript/ECMAScript for Vue project. TypeScript helps like the handrail when I walk the Vue world. Also, avoids tons of trivial mistakes on my coding.

Btw, I’d like to use Elm if I don’t mind the development speed or the power of community libs/resources though 😉 Nuxt definitely helps my quick building of SPA a lot even if lacking something important.

In this article, leaving the summary of the current status of TypeScript on Nuxt as long as I know.

As of Nuxt 2.3.4, we must have some setups to start using TypeScript.

Dependencies

The Nuxt project requires typescript and ts-loader naturally.

$ npx install -D typescript ts-loader

Enable <script lang="ts"> on SFC

It’s the main purpose. At the first of enabling lang="ts", configure TypeScript by tsconfig.json on the project’s root.

This is the typical configuration, so may need to edit as we like.

Then, configure (overwrite) Webpack config using the module. This module provides ts-loader’s settings and enabling files with .ts extension for both Nuxt and Webpack.

Place this file as modules/typescript.js and specify from modules section on nuxt.config.js.

...
export default {
  ...
  modules: [
    '~/modules/typescript.js'
  ],
  ...
}

That’s all to enable TypeScript on Nuxt. I took a long time to determine the fact by reading many other developers’ articles. There were many useful, but not required configuration/installation. In the actual development, I know we need more like TSLint, parallel type check, class component style, TSX, blah blah blah…

Template for the quick start

To write TypeScript on Nuxt efficiently, there’s the nice template besides of below setup. We can start (using the old way of vue-cli 😂)

nuxt-community/typescript-template

Nobody maintains the repository for a while, but I start to maintain to catch the latest Nuxt up. (Thanks for inviting me, Nuxt core team!)

I’m going to maintain the template until create-nuxt-app supports generating TypeScript project officially.

Every JS works by TypeScript?

No. modules like the above sample placed JS file typescript.js. Also, nuxt.config.js couldn’t be TypeScript. I haven’t checked recently though, either plugin or middleware doesn’t work in my memory.

Easy Setup with “nuxt-ts" 0.x

I’ve been publishing nuxt-ts to avoid repeating same configurations among my some Nuxt projects.

nuxt-ts

The module works with just adding:

modules: [
  'nuxt-ts'
]

Even tsconfig.json is not required. If your project has fork-ts-checker-plugin, works with that automatically 😉.

No TSLint support, because I don’t think we need. Requires ESLint to lint *.vue files anyways, and TypeScript could be lint-ed with ESLint. So TSLint may be redundant at all.

However, the module’s life ends soon because nuxt-ts is not going to be owned by me as described later. That’s why I have put “0.x” in the heading.
Next Nuxt “2.4” supports TypeScript “naturally”.

Next Nuxt “2.4” supports TypeScript “naturally”

From Nuxt 2.4, the brand new nuxt-ts is released by Nuxt team. That nuxt-ts provides Nuxt.js core which works with TypeScript without any particular configuration (Excepting tsconfig.json) which we’ve been doing until today.
We can use that by replacing nuxt with nuxt-ts on package.json.

nuxt-ts ^2.4.0

I’m pleased with handing over the ownership of the name, nuxt-ts on npmjs.org to Nuxt.js team. They release as 2.4.0 which matches to the version of Nuxt.js.

That supports TypeScript for any JS files on Nuxt project which includes nuxt.config.ts, plugins, modules. I can’t wait for the release!

We can play that by specifying nuxt-ts-edge instead of nuxt on your package.json.

nuxt-ts-edge

After 2.4.0 is released, I’m going to update my all Nuxt project to use nuxt-ts. Then am going to apply those experiences for nuxt-commuinity/typescript-template hopefully ✨