Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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がサポートされたらそっちで始める感じになるかな。
geerpm
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした