Merge pull request #1923 from clarkdo/ts_config

feat: fix typescript example

examples/typescript/modules/typescript.js

@@ -1,16 +1,26 @@
 module.exports = function(options) {
   // Extend build
-  this.extendBuild((config) => {
+  this.extendBuild(config => {
+    const tsLoader = {
+      loader: "ts-loader",
+      options: {
+        appendTsSuffixTo: [/\.vue$/]
+      }
+    };
     // Add TypeScript loader
-    config.module.rules.push({
+    config.module.rules.push(
-      test: /\.ts$/,
+      Object.assign(
-      loader: 'ts-loader'
+        {
-    })
+          test: /((client|server)\.js)|(\.tsx?)$/
+        },
+        tsLoader
+      )
+    );
     // Add TypeScript loader for vue files
     for (let rule of config.module.rules) {
-      if (rule.loader === 'vue-loader') {
+      if (rule.loader === "vue-loader") {
-        rule.query.loaders.ts = 'ts-loader?{"appendTsSuffixTo":["\\\\.vue$"]}'
+        rule.options.loaders.ts = tsLoader;
       }
     }
-  })
+  });
-}
+};

examples/typescript/nuxt.config.js

@@ -22,5 +22,5 @@ module.exports = {
   build: {
     vendor: ['axios', 'gsap', 'vuex-class', 'nuxt-class-component']
   },
-  modules: ['~modules/typescript']
+  modules: ['~/modules/typescript']
 }

examples/typescript/package.json

@@ -4,12 +4,15 @@
   "dependencies": {
     "axios": "^0.16.1",
     "gsap": "^1.19.1",
-    "nuxt": "^1.0.0-alpha2",
+    "nuxt": "latest",
-    "nuxt-class-component": "^1.0.1",
+    "nuxt-class-component": "^1.0.3",
     "tachyons": "^4.7.0",
-    "vue-class-component": "^5.0.1",
+    "vue": "~2.5.1",
-    "vue-property-decorator": "^5.0.1",
+    "vue-server-renderer": "~2.5.1",
-    "vuex-class": "^0.2.0"
+    "vue-template-compiler": "~2.5.1",
+    "vue-class-component": "^6.0.0",
+    "vue-property-decorator": "^6.0.0",
+    "vuex-class": "^0.3.0"
   },
   "scripts": {
     "dev": "nuxt",
@@ -18,7 +21,7 @@
     "generate": "nuxt generate"
   },
   "devDependencies": {
-    "ts-loader": "^2.0.3",
+    "ts-loader": "^3.0.0",
     "typescript": "^2.2.2"
   }
 }

examples/typescript/pages/index.vue

@@ -16,7 +16,7 @@
 <script lang="ts">
 import Vue from "vue";
 import Component from "nuxt-class-component"
-import Card from "~components/Card"
+import Card from "~/components/Card"
 import { State, Getter } from "vuex-class"
 
 @Component({

examples/typescript/store/index.ts

@@ -1,4 +1,4 @@
-import axios from "~plugins/axios";
+import axios from "~/plugins/axios";
 
 export const state = () => ({
   selected: 1,

examples/typescript/tsconfig.json

@@ -8,7 +8,6 @@
     "module": "es2015",
     "moduleResolution": "node",
     "experimentalDecorators": true,
-    "declaration": true,
     "noImplicitAny": false,
     "noImplicitThis": false,
     "strictNullChecks": true,
@@ -16,14 +15,15 @@
     "suppressImplicitAnyIndexErrors": true,
     "allowSyntheticDefaultImports": true,
     "baseUrl": ".",
+    "allowJs": true,
     "paths": {
-      "~": ["./"],
+      "~/": ["./"],
-      "~assets/*": ["./assets/*"],
+      "~/assets/*": ["./assets/*"],
-      "~components/*": ["./components/*"],
+      "~/components/*": ["./components/*"],
-      "~middleware/*": ["./middleware/*"],
+      "~/middleware/*": ["./middleware/*"],
-      "~pages/*": ["./pages/*"],
+      "~/pages/*": ["./pages/*"],
-      "~plugins/*": ["./plugins/*"],
+      "~/plugins/*": ["./plugins/*"],
-      "~static/*": ["./static/*"]
+      "~/static/*": ["./static/*"]
     }
   }
 }