Merge pull request #27 from qm3ster/update-1.3.0

Merging since since I applied the "alternative fix" and it currently works even for users of npm on the first try.
If this issue is resolved, 814fb80 should be reverted.

example/initialize

@@ -3,7 +3,7 @@ set timeout 360
 
 spawn ./node_modules/.bin/vue init ../ test-project
 
-# This happens because of
+# We need to use expect to pass user input because of
 # https://github.com/vuejs/vue-cli/issues/291
 expect "name" { send "\n" }
 expect "author" { send "\n" }

example/package.json

@@ -3,7 +3,7 @@
   "description": "example",
   "version": "1.0.0",
   "devDependencies": {
-    "vue-cli": "^2.9.1"
+    "vue-cli": "^2.9.3"
   },
   "license": "UNLICENSED",
   "main": "n/a",

template/api/people.ts

@@ -1,5 +1,4 @@
-import axios from "~plugins/axios"
+import axios from '~/plugins/axios'
 
 export const getPeople = async (total = 10) =>
   (await axios.get('/random-data.json')).data.slice(0, total)
-

template/components/Card.vue

@@ -9,14 +9,14 @@
 </template>
 // **PLEASE NOTE** All "Nuxt Class Components" require at minimum a script tag that exports a default object
 <script lang="ts">
-import Vue from "vue"
-import Component from "nuxt-class-component"
-import { Prop } from "vue-property-decorator"
-import { Action } from "vuex-class"
+import Vue from 'vue'
+import Component from 'nuxt-class-component'
+import { Prop } from 'vue-property-decorator'
+import { Action } from 'vuex-class'
 
 @Component({})
 export default class Card extends Vue {
   @Prop() person
   @Action select
 }
-</script>
+</script>

template/index.d.ts

@@ -1,5 +1,5 @@
 declare module '*.vue' {
   import Vue from 'vue'
-  const _default: Vue;
-  export default _default;
+  const _default: Vue
+  export default _default
 }

template/modules/typescript.js

@@ -0,0 +1,32 @@
+module.exports = function() {
+  // Add .ts extension for store, middleware and more
+  this.nuxt.options.extensions.push('ts')
+  // Extend build
+  this.extendBuild(config => {
+    const tsLoader = {
+      loader: 'ts-loader',
+      options: {
+        appendTsSuffixTo: [/\.vue$/]
+      }
+    }
+    // Add TypeScript 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.options.loaders.ts = tsLoader
+      }
+    }
+    // Add .ts extension in webpack resolve
+    if (config.resolve.extensions.indexOf('.ts') === -1) {
+      config.resolve.extensions.push('.ts')
+    }
+  })
+}

template/nuxt.config.js

@@ -3,7 +3,7 @@ module.exports = {
     baseUrl: process.env.BASE_URL || 'http://localhost:3000'
   },
   head: {
-    title: 'nuxt-typescript-starter',
+    title: '{{ name }}',
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
@@ -18,9 +18,9 @@ module.exports = {
   /*
   ** Build configuration
   */
-  css: ['tachyons/css/tachyons.min.css', '~assets/css/main.css'],
+  css: ['tachyons/css/tachyons.min.css', '~/assets/css/main.css'],
   build: {
     vendor: ['axios', 'gsap', 'vuex-class', 'nuxt-class-component']
   },
-  modules: ['~modules/typescript.ts']
+  modules: ['~/modules/typescript.js']
 }

template/package.json

@@ -1,16 +1,18 @@
 {
-  "name": "nuxt-typescript-starter",
-  "version": "1.0.4",
+  "name": "{{ name }}",
+  "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.16.2",
-    "gsap": "^1.20.2",
-    "nuxt": "^1.0.0-alpha.5",
-    "nuxt-class-component": "^1.0.1",
-    "tachyons": "^4.7.4",
-    "vue-class-component": "^5.0.2",
-    "vue-property-decorator": "^5.1.1",
-    "vuex-class": "^0.2.0"
+    "axios": "^0.17.1",
+    "gsap": "^1.20.3",
+    "nuxt": "^1.3.0",
+    "nuxt-class-component": "^1.2.0",
+    "tachyons": "^4.9.1",
+    "vue-class-component": "^6.1.2",
+    "vue-property-decorator": "^6.0.0",
+    "vuex-class": "^0.3.0",
+    "vue": "^2.5.13",
+    "webpack": "^3.10.0"
   },
   "scripts": {
     "dev": "nuxt",
@@ -19,8 +21,8 @@
     "generate": "nuxt generate"
   },
   "devDependencies": {
-    "@types/node": "^8.0.14",
-    "ts-loader": "^2.3.0",
-    "typescript": "^2.4.1"
+    "@types/node": "^9.4.0",
+    "ts-loader": "^3.4.0",
+    "typescript": "^2.7.1"
   }
 }

template/pages/index.vue

@@ -14,10 +14,10 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import Component from "nuxt-class-component"
-import Card from "~components/Card.vue"
-import { State, Getter } from "vuex-class"
+import Vue from 'vue'
+import Component from 'nuxt-class-component'
+import Card from '~/components/Card.vue'
+import { State, Getter } from 'vuex-class'
 
 @Component({
   components: {
@@ -29,4 +29,4 @@ export default class extends Vue {
   @State people
   @Getter selectedPerson
 }
-</script>
+</script>

template/store/index.ts

@@ -1,4 +1,4 @@
-import { getPeople } from "~/api/people"
+import { getPeople } from '~/api/people'
 
 export const state = () => ({
   selected: 1,

template/tsconfig.json

@@ -1,10 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "es2015"
-    ],
+    "lib": ["dom", "es2015"],
     "module": "es2015",
     "moduleResolution": "node",
     "experimentalDecorators": true,
@@ -17,16 +14,7 @@
     "allowJs": true,
     "baseUrl": ".",
     "paths": {
-      "~/*" : ["./*"],
-      "~assets/*": ["./assets/*"],
-      "~components/*": ["./components/*"],
-      "~middleware/*": ["./middleware/*"],
-      "~modules/*": ["./modules/*"],
-      "~pages/*": ["./pages/*"],
-      "~plugins/*": ["./plugins/*"],
-      "~static/*": ["./static/*"],
-      "~store": ["./.nuxt/store"],
-      "~router": ["./.nuxt/router"]
+      "~/*": ["./*"]
     }
   }
-}
+}