2018.10.17
- 前提
-
vue-cli
3.0.1 -
yarn
1.10.1 -
Nuxt TypeScript Starter
6af12b0
-
vue-cli
一旦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にアクセスすると下記の様に表示される。
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がサポートされたらそっちで始める感じになるかな。