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) {
+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({
-      test: /\.ts$/,
-      loader: 'ts-loader'
-    })
+    config.module.rules.push(
+      Object.assign(
+        {
+          test: /((client|server)\.js)|(\.tsx?)$/
+        },
+        tsLoader
+      )
+    );
     // Add TypeScript loader for vue files
     for (let rule of config.module.rules) {
-      if (rule.loader === 'vue-loader') {
-        rule.query.loaders.ts = 'ts-loader?{"appendTsSuffixTo":["\\\\.vue$"]}'
+      if (rule.loader === "vue-loader") {
+        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-class-component": "^1.0.1",
+    "nuxt": "latest",
+    "nuxt-class-component": "^1.0.3",
     "tachyons": "^4.7.0",
-    "vue-class-component": "^5.0.1",
-    "vue-property-decorator": "^5.0.1",
-    "vuex-class": "^0.2.0"
+    "vue": "~2.5.1",
+    "vue-server-renderer": "~2.5.1",
+    "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({
@@ -29,4 +29,4 @@ export default class extends Vue {
   @State people
   @Getter selectedPerson
 }
-</script>
+</script>

examples/typescript/store/index.ts

@@ -1,33 +1,33 @@
-import axios from "~plugins/axios";
-
-export const state = () => ({
-  selected: 1,
-  people: []
-});
-
-export const mutations = {
-  select(state, id) {
-    state.selected = id;
-  },
-  setPeople(state, people) {
-    state.people = people;
-  }
-};
-
-export const getters = {
-  selectedPerson: state => {
-    const p = state.people.find(person => person.id === state.selected);
-    return p ? p : { first_name: "Please,", last_name: "select someone" };
-  }
-};
-
-export const actions = {
-  async nuxtServerInit({ commit }) {
-    const response = await axios.get("/random-data.json");
-    const people = response.data.slice(0, 10);
-    commit("setPeople", people);
-  },
-  select({ commit }, id) {
-    commit("select", id);
-  }
-};
+import axios from "~/plugins/axios";
+
+export const state = () => ({
+  selected: 1,
+  people: []
+});
+
+export const mutations = {
+  select(state, id) {
+    state.selected = id;
+  },
+  setPeople(state, people) {
+    state.people = people;
+  }
+};
+
+export const getters = {
+  selectedPerson: state => {
+    const p = state.people.find(person => person.id === state.selected);
+    return p ? p : { first_name: "Please,", last_name: "select someone" };
+  }
+};
+
+export const actions = {
+  async nuxtServerInit({ commit }) {
+    const response = await axios.get("/random-data.json");
+    const people = response.data.slice(0, 10);
+    commit("setPeople", people);
+  },
+  select({ commit }, id) {
+    commit("select", id);
+  }
+};

examples/typescript/tsconfig.json

@@ -1,29 +1,29 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "es2015"
-    ],
-    "module": "es2015",
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "declaration": true,
-    "noImplicitAny": false,
-    "noImplicitThis": false,
-    "strictNullChecks": true,
-    "removeComments": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "allowSyntheticDefaultImports": true,
-    "baseUrl": ".",
-    "paths": {
-      "~": ["./"],
-      "~assets/*": ["./assets/*"],
-      "~components/*": ["./components/*"],
-      "~middleware/*": ["./middleware/*"],
-      "~pages/*": ["./pages/*"],
-      "~plugins/*": ["./plugins/*"],
-      "~static/*": ["./static/*"]
-    }
-  }
-}
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "es2015"
+    ],
+    "module": "es2015",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "noImplicitAny": false,
+    "noImplicitThis": false,
+    "strictNullChecks": true,
+    "removeComments": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": ".",
+    "allowJs": true,
+    "paths": {
+      "~/": ["./"],
+      "~/assets/*": ["./assets/*"],
+      "~/components/*": ["./components/*"],
+      "~/middleware/*": ["./middleware/*"],
+      "~/pages/*": ["./pages/*"],
+      "~/plugins/*": ["./plugins/*"],
+      "~/static/*": ["./static/*"]
+    }
+  }
+}