nuxt2 + TypeScriptでプロジェクトスタートする

2018.10.17


一旦nuxt1で初期化(templateをそのまま使う)

// 'nuxt2ts'はプロジェクトディレクトリ

$ vue init nuxt-community/typescript-template nuxt2ts

? Project name nuxt2ts
? Project description Nuxt.js TypeScript project
? Author ****

vue-cli · Generated "nuxt2ts".

To get started:

cd nuxt2ts
npm install # Or yarn
npm run dev

$ cd nuxt2ts
$ yarn
$ yarn dev

http://localhost:3000にアクセスすると下記の様に表示される。

スクリーンショット 2018-10-17 13.49.04.png


nuxt2に上げると同時に必要な調整を行う


各package更新


package.json

@@ -4,7 +4,7 @@

"private": true,
"dependencies": {
"@nuxtjs/axios": "^5.0.0",
- "nuxt": "^1.3.0",
+ "nuxt": "^2.2.0",
"nuxt-property-decorator": "^1.2.0",
"vuex-class": "^0.3.0"
},
@@ -16,7 +16,7 @@
},
"devDependencies": {
"@types/node": "^9.4.6",
- "ts-loader": "^3.5.0",
- "typescript": "^2.7.2"
+ "ts-loader": "^5.2.1",
+ "typescript": "^3.0.3"
}
}



typescriptのビルド設定調整


modules/typescript.js

@@ -1,6 +1,6 @@

-module.exports = function() {
+export default function() {
// Add .ts extension for store, middleware and more
- this.nuxt.options.extensions.push("ts")
+ this.nuxt.options.extensions.push("ts", "tsx");
// Extend build
this.extendBuild(config => {
const tsLoader = {
@@ -21,7 +21,8 @@ module.exports = function() {
// Add TypeScript loader for vue files
for (let rule of config.module.rules) {
if (rule.loader === "vue-loader") {
- rule.options.loaders.ts = tsLoader
+ if (!rule.options.loaders) rule.options.loaders = {};
+ rule.options.loaders.ts = tsLoader;
}
}
// Add .ts extension in webpack resolve


package更新、ローカル起動

$ yarn

$ yarn dev

上記スクショと同じ状態で起動する。



  • diffでセミコロンがついてるのはフォーマッタによるもので、無くても問題ない。


  • create-nuxt-appなんてものが出来てるので、こちらでTypeScriptがサポートされたらそっちで始める感じになるかな。