Nuxt-TS: Nuxt application powered by TypeScript

Half tutorial, half exploration, I want to check out how far I can get with Nuxt+TypeScript in a full application from scratch.

Table of contents

• 01. Initialise Project
• 02. Switch to TypeScript
  • 02.1 Adding nuxt-ts
  • 02.2 Update Nuxt configuration
  • 02.3 Update existing code
• 03. Code control: formatter and linter
  • 03.1 Prettier
  • 03.2 ESLint
• 04. Polls: components & vuex
  • 04.1 Models
  • 04.2 Page
  • 04.3 Components
  • 04.4 Store
• 05. Style
  • 05.1 SCSS
  • 05.2 styling
  • 05.3 filters
• 06. Testing
  • 06.1 Jest
  • 06.2 Testing Vuex
  • 06.3 Testing Components
  • 06.3 Coverage
• 07. Deployment
  • 07.1 Universal vs Pre-rendered vs SPA
  • 07.2 Surge
  • 07.3 AWS S3
  • 07.4 Heroku
  • 07.5 Travis CI
  • 07.6 Circle CI

Nuxt

• 24-Oct-2019: Nuxt 2.10.2 @nuxt/typescript has been externalized therefore the dependency has to be changed to @nuxt/typescript-build nuxt typescript setup guide

• 22-Mar-2019: Nuxt 2.5.0

  nuxt-ts is not needed anymore. Nuxt Typescript support is done by adding @nuxt/typescript

  Update from Nuxt 2.4.0 is done with:

  yarn remove nuxt-ts
  yarn add nuxt @nuxt/typescript
  rm -Rf node_modules/
  rm yarn.lock
  yarn

  As-of 24-Mar-2019, Nuxt version is 2.5.1.

  Side-effect is that as-of Nuxt 2.5.1, Nuxt does not support "extends": "@nuxt/typescript" and tsconfig.json is initialized by Nuxt:

  • "resolveJsonModule": true has to be added
  • "types": ["@types/node", "@nuxt/vue-app", "@types/jest"] has @types/jest added back

• 28-Jan-2019: Nuxt 2.4.0

  Nuxt 2.4.0 release (Jan-2019) has pushed one step forward TypeScript integration into Nuxt thanks to nuxt-ts

  Kudos to Nuxt team.

This tutorial has undergone a complete refactoring on March 2019. Old version is archived at the archive/2019-03-09_refactoring branch