Allow TypeScript in Vue components

sebastiandedeyne · May 17, 2017 · ffa9347 · ffa9347
1 parent a375cdc
commit ffa9347
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 41 deletions.
diff --git a/public/js/app.js b/public/js/app.js
@@ -471,7 +471,7 @@ utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
 
 module.exports = defaults;
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(33)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(32)))
 
 /***/ }),
 /* 2 */
@@ -775,7 +775,7 @@ module.exports = g;
  * building robust, powerful web applications using Vue and Laravel.
  */
 
-__webpack_require__(29);
+__webpack_require__(28);
 
 window.Vue = __webpack_require__(38);
 
@@ -1648,39 +1648,10 @@ module.exports = function spread(callback) {
 
 /***/ }),
 /* 28 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-
-/* harmony default export */ __webpack_exports__["default"] = ({
-    mounted: function mounted() {
-        console.log('Component mounted.');
-    }
-});
-
-/***/ }),
-/* 29 */
 /***/ (function(module, exports, __webpack_require__) {
 
 
-window._ = __webpack_require__(32);
+window._ = __webpack_require__(31);
 
 /**
  * We'll load jQuery and the Bootstrap jQuery plugin which provides support
@@ -1689,9 +1660,9 @@ window._ = __webpack_require__(32);
  */
 
 try {
-  window.$ = window.jQuery = __webpack_require__(31);
+  window.$ = window.jQuery = __webpack_require__(30);
 
-  __webpack_require__(30);
+  __webpack_require__(29);
 } catch (e) {}
 
 /**
@@ -1734,7 +1705,7 @@ if (token) {
 // });
 
 /***/ }),
-/* 30 */
+/* 29 */
 /***/ (function(module, exports) {
 
 /*!
@@ -4117,7 +4088,7 @@ if (typeof jQuery === 'undefined') {
 
 
 /***/ }),
-/* 31 */
+/* 30 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -14377,7 +14348,7 @@ return jQuery;
 
 
 /***/ }),
-/* 32 */
+/* 31 */
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(global, module) {var __WEBPACK_AMD_DEFINE_RESULT__;/**
@@ -31469,7 +31440,7 @@ return jQuery;
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(7), __webpack_require__(39)(module)))
 
 /***/ }),
-/* 33 */
+/* 32 */
 /***/ (function(module, exports) {
 
 // shim for using process in browser
@@ -31658,6 +31629,20 @@ process.chdir = function (dir) {
 process.umask = function() { return 0; };
 
 
+/***/ }),
+/* 33 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    mounted: function () {
+        console.log('Component mounted.');
+    }
+};
+
+
 /***/ }),
 /* 34 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -31677,7 +31662,7 @@ exports.helloWorld = helloWorld;
 
 var Component = __webpack_require__(36)(
   /* script */
-  __webpack_require__(28),
+  __webpack_require__(33),
   /* template */
   __webpack_require__(37),
   /* scopeId */

diff --git a/resources/assets/js/components/Example.vue b/resources/assets/js/components/Example.vue
@@ -14,9 +14,9 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
     export default {
-        mounted() {
+        mounted(): void {
             console.log('Component mounted.')
         }
     }

diff --git a/webpack.mix.js b/webpack.mix.js
@@ -22,6 +22,7 @@ mix.js('resources/assets/js/app.js', 'public/js')
                {
                    test: /\.tsx?$/,
                    loader: 'ts-loader',
+                   options: { appendTsSuffixTo: [/\.vue$/] },
                    exclude: /node_modules/,
                },
            ],