bug #484 Allow to import .vue files when using TypeScript (Lyrkan)

This PR was merged into the master branch.

Discussion
----------

Allow to import .vue files when using TypeScript

With the current default config importing a `.vue` file from a `.ts` file results in an error because the `ts-loader` don't know how to handle Vue files.

This PR resolves that issue by setting the `appendTsSuffixTo` option of the `ts-loader` to `[/\.vue$/]` (as described [here](https://vue-loader.vuejs.org/guide/pre-processors.html#typescript)) when the `vue-loader` is enabled (fixes #467).

Commits
-------

8bbc3f6 Allow to import .vue files when using TypeScript

Author: weaverryan

fixtures/vuejs-typescript/App.vue

@@ -0,0 +1,46 @@
+<template>
+  <div id="app">
+    <img src="./assets/logo.png">
+    <hello></hello>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Hello from './components/Hello.vue'
+
+class TestClassSyntax {
+
+}
+
+export default Vue.extend({
+  name: 'app',
+  components: {
+    Hello
+  }
+})
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
+
+<style lang="scss">
+#app {
+  display: flex;
+  color: #2c3e90;
+}
+</style>
+
+<style lang="less">
+#app {
+  margin-top: 40px;
+}
+</style>

fixtures/vuejs-typescript/assets/logo.png

@@ -0,0 +1,55 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <h2>Essential Links</h2>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
+      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
+      <br>
+      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
+    </ul>
+    <h2>Ecosystem</h2>
+    <ul>
+      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
+      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
+      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  name: 'hello',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  }
+})
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+a {
+  color: #42b983;
+}
+</style>

fixtures/vuejs-typescript/components/Hello.vue

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+new Vue({
+  el: '#app',
+  template: '<App/>',
+  components: { App }
+})

fixtures/vuejs-typescript/main.ts

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "target": "es6",
+        "strict": true,
+        "module": "es2015",
+        "moduleResolution": "node"
+    },
+    "include": [
+        "./**/*.ts",
+    ]
+}

fixtures/vuejs-typescript/tsconfig.json

@@ -40,6 +40,11 @@ module.exports = {
             forkedTypesPluginUtil(webpackConfig);
         }
 
+        // allow to import .vue files
+        if (webpackConfig.useVueLoader) {
+            config.appendTsSuffixTo = [/\.vue$/];
+        }
+
         // use ts alongside with babel
         // @see https://github.com/TypeStrong/ts-loader/blob/master/README.md#babel
         let loaders = babelLoader.getLoaders(webpackConfig);

lib/loaders/typescript.js

@@ -1285,6 +1285,71 @@ module.exports = {
             });
         });
 
+        it('Vue.js is compiled correctly using TypeScript', (done) => {
+            const appDir = testSetup.createTestAppDir();
+
+            fs.writeFileSync(
+                path.join(appDir, 'postcss.config.js'),
+                `
+module.exports = {
+  plugins: [
+    require('autoprefixer')()
+  ]
+}                            `
+            );
+
+            const config = testSetup.createWebpackConfig(appDir, 'www/build', 'dev');
+            config.enableSingleRuntimeChunk();
+            config.setPublicPath('/build');
+            config.addEntry('main', './vuejs-typescript/main');
+            config.enableVueLoader();
+            config.enableSassLoader();
+            config.enableLessLoader();
+            config.enableTypeScriptLoader();
+            config.configureBabel(function(config) {
+                config.presets = [
+                    ['@babel/preset-env', {
+                        'targets': {
+                            'chrome': 52
+                        }
+                    }]
+                ];
+            });
+
+            testSetup.runWebpack(config, (webpackAssert) => {
+                expect(config.outputPath).to.be.a.directory().with.deep.files([
+                    'main.js',
+                    'main.css',
+                    'images/logo.82b9c7a5.png',
+                    'manifest.json',
+                    'entrypoints.json',
+                    'runtime.js',
+                ]);
+
+                // test that our custom babel config is used
+                webpackAssert.assertOutputFileContains(
+                    'main.js',
+                    'class TestClassSyntax'
+                );
+
+                testSetup.requestTestPage(
+                    path.join(config.getContext(), 'www'),
+                    [
+                        'build/runtime.js',
+                        'build/main.js'
+                    ],
+                    (browser) => {
+                        // assert that the vue.js app rendered
+                        browser.assert.text('#app h1', 'Welcome to Your Vue.js App');
+                        // make sure the styles are not inlined
+                        browser.assert.elements('style', 0);
+
+                        done();
+                    }
+                );
+            });
+        });
+
         it('Vue.js error when using non-activated loaders', (done) => {
             const config = createWebpackConfig('www/build', 'dev');
             config.setPublicPath('/build');