Setup nuxtjs with typescript

>> Url source on Github

1. Three packages Nuxt Typescript support

- @nuxt/types: contains Nuxt Typescript type definition

- @nuxt/typescript-build: for use Typescript in pages, layouts, comopents, plugins, middlewares.

- @nuxt/typescript-runtime: to provide Typescript runtime support for nuxt.config.js file, local modules and serverMiddlewares (^Nuxt 2.15 no longer needed)

2. Install Typescript for Nuxtjs

- with "nuxt": "^2.15.8", using: "@nuxt/types": "^2.15.8", "@nuxt/typescript-build": "^2.1.0",

yarn add --dev @nuxt/typescript-build@2.1.0
yarn add --dev @nuxt/types@2.15.8 

3. Configuration

- edit nuxt.config.js to add module that are used during the build process, Nuxt.js will install the necessary dependencies (including TypeScript itself) and configure the build process to include TypeScript files

import type { NuxtConfig } from '@nuxt/types'

export default {
.....
buildModules: ['@nuxt/typescript-build']
.....
}

- add tsconfig.json to configure the TypeScript compiler, which is used to transpile TypeScript code into JavaScript

{
"compilerOptions": {
"target": "ES2018",
"module": "ESNext",
"moduleResolution": "Node",
"lib": [
"ESNext",
"ESNext.AsyncIterable",
"DOM"
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"baseUrl": ".",
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./*"
]
},
"types": [
"@nuxt/types",
"@nuxt/typescript-build",
"@types/node"
]
},
"exclude": [
"node_modules"
]
}

-  add vue-shim.d.ts to provide TypeScript type information for Vue.js components

declare module "*.vue" {
import Vue from 'vue'
export default Vue
}

Thank you

Reference:

- https://typescript.nuxtjs.org/guide/setup/