Nuxt2.9からTypescriptの導入方法がガラッと変わりました。
今回は現在最新のNuxt2.10を新規にインストールし、Typescript化する方法を解説していきます。
Nuxt2.10とタイトルにはありますが、2.9でも同じ手順でTypescript化することができます。
Nuxtのインストール
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
npx create-nuxt-app your-title Project name (your-title) Project description (My wicked Nuxt.js project) Author name (author-name) Choose the package manager Yarn > Npm Choose UI framework (Use arrow keys) > None Ant Design Vue Bootstrap Vue Buefy Bulma Element Framevuerk iView Tachyons Tailwind CSS Vuetify.js Choose custom server framework (Use arrow keys) > None (Recommended) AdonisJs Express Fastify Feathers hapi Koa Micro #スペースで選択エンターで決定 Choose Nuxt.js modules >(*) Axios ( ) Progressive Web App (PWA) Support Choose linting tools >(*) ESLint ( ) Prettier ( ) Lint staged files Choose test framework None > Jest AVA Choose rendering mode (Use arrow keys) > Universal (SSR) Single Page App Choose development tools >(*) jsconfig.json (Recommended for VS Code) |
続いてNuxtを最新版にアップデートします
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Nuxtのインストールディレクトリに移動 cd your-title #事前にncuをインストールしておく npm install -g npm-check-updates #ncuコマンドが認識されない場合は、以下コマンドで出てきたフォルダにパスを通す npm bin -g #ncuでバージョンアップの確認 ncu #package.jsonの更新 ncu -u #更新の反映 npm install |
これでNuxtのインストールは完了したのでTypescript化を行っていきます。
@nuxt/typescript-runtime、@nuxt/typescript-build、@nuxt/typesのインストール
|
1 |
npm install @nuxt/typescript-runtime @nuxt/typescript-build @nuxt/types |
jsconfig.jsonを削除して、以下のtsconfig.jsonを作成する。
今回は階層をスッキリさせるために各種フォルダはsrcフォルダに格納しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
{ "include": [ "./src/**/*" ], "compilerOptions": { "target": "esnext", "module": "esnext", "moduleResolution": "node", "lib": [ "esnext", "esnext.asynciterable", "dom" ], "esModuleInterop": true, "experimentalDecorators": true, "allowJs": true, "sourceMap": true, "strict": true, "noEmit": true, "baseUrl": ".", "paths": { "~/*": [ "./src/*" ], "@/*": [ "./src/*" ] }, "types": [ "@types/node", "@nuxt/types", "@nuxtjs/axios", "@nuxtjs/vuetify" ] }, "exclude": [ "node_modules" ] } |
nuxt.config.jsを削除して、nuxt.config.tsを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
import { Configuration } from '@nuxt/types' const nuxtConfig: Configuration = { mode: 'universal', buildModules: ['@nuxt/typescript-build'], server: { port: 3000, host: 'localhost', }, /* ** Headers of the page */ head: { title: process.env.npm_package_name || '', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, /* ** Customize the progress-bar color */ loading: { color: '#fff' }, /* ** Global CSS */ css: [ ], /* ** Plugins to load before mounting the App */ plugins: [ ], typescript: { typeCheck: true, ignoreNotFoundWarnings: true }, /* ** Nuxt.js modules */ modules: [ // Doc: https://axios.nuxtjs.org/usage '@nuxtjs/axios', '@nuxtjs/eslint-module', ], /* ** Axios module configuration ** See https://axios.nuxtjs.org/options */ /* ** Build configuration */ build: { /* ** You can extend webpack config here */ extend(config, ctx) { } }, srcDir: 'src/' } module.exports = nuxtConfig |
srcフォルダ下にvue-shim.d.tsを追加します。
|
1 2 3 4 |
declare module "*.vue" { import Vue from "vue"; export default Vue; } |
package.jsonのnuxtコマンドをnuxt-tsに書き換えます。
|
1 2 3 4 5 6 7 8 9 10 11 |
※一部抜粋 "private": true, "scripts": { "dev": "nuxt-ts", "build": "nuxt-ts build", "start": "nuxt-ts start", "generate": "nuxt-ts generate", "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", "test": "jest" }, "dependencies": { |
以上で完了です。
最終的なフォルダ構成は以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
your-title/ ├ .nuxt/ ├ node_modules/ ├ src/ │ ├ assets/ │ ├ components/ │ ├ layouts/ │ ├ middleware/ │ ├ pages/ │ ├ plugins/ │ ├ static/ │ ├ store/ │ ├ test/ │ └ vue.shim.d.ts ├ .babelrc ├ .editorconfig ├ .eslintrc.js ├ .gitignore ├ jest.config.js ├ nuxt.config.ts ├ package-lock.json ├ package.json ├ README.md └ tsconfig.json |
nuxt-property-decoratorを使用する場合は別途インストールして使用してください。