1

According to the documentation I should write vue components in .vue files. I love to use TypeScript in vscode because of the awesome navigation, autocompletion, autoimport and intellisense features. Type safety is as well a plus.

When I use .vue files, I loose both intellisense and tyoe safety in external exports.

Using katashins vue-template-loader I get all those back.

Why should I use .vue files in TypeScript?

Here is a repo where I used katashin's wonderful loader.

[EDIT] Here is a quick display of what the HelloWorld.spec.ts file looks like with vetur 0.11.0, vscode 1.21.0 and the vue cli.

One can see the problem line 11. It can be solved using the any keyword but it will loose type safety.

failing compilation test

tony19
  • 125,647
  • 18
  • 229
  • 307
ElevateBart
  • 36
  • 1
  • 6
  • Just to confirm: did you use ` – acdcjunior Mar 08 '18 at 15:48
  • I replace HelloWorld.vue by HelloWorld > index.ts, HelloWorld > style.scss, HelloWorld > template.html – ElevateBart Mar 08 '18 at 15:55
  • I am saying that I loose autocomplete when I import a file in another file. For instance if I want to test HelloWorld.vue, I will not have typescript autocompletion in the test files. – ElevateBart Mar 08 '18 at 15:56
  • What IDE are you using? – acdcjunior Mar 08 '18 at 16:03
  • I am using vscode!! – ElevateBart Mar 09 '18 at 01:29
  • What I like about Single File Components, is that keeping HTML, JavaScript and CSS all in 1 file, forces me to keep components simple and short. Never have I such a nice designed architecture of components before I started using Single File Components. – Robert Kusznier Jun 08 '18 at 09:45

1 Answers1

1

In VSCode, install the Vetur Extension/Plugin to edit .vue files.

As an example, git clone the https://github.com/Microsoft/TypeScript-Vue-Starter project and go to:

  • Menu File -> Open Folder...

  • .vue files have the <script lang="ts"> tags perfectly

As shown in the screenshot below:

enter image description here

As what dependencies the project needs, again, check the https://github.com/Microsoft/TypeScript-Vue-Starter. For reference, here are its dependencies as of now:

  "dependencies": {
    "vue": "^2.5.2",
    "vue-class-component": "^6.0.0",
    "vue-property-decorator": "^6.0.0",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "css-loader": "^0.28.1",
    "ts-loader": "^2.0.3",
    "typescript": "^2.3.2",
    "vue-loader": "^12.0.3",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^2.5.0"
  }

And a webpack.config.js excerpt (the point where .vue files are handled):

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
          }
          // other vue-loader options go here
        }
      },
acdcjunior
  • 132,397
  • 37
  • 331
  • 304
  • Thank you so much for your answer. It's very complete and when I try it, I am blocked a little bit further. I have to import `.vue` files them in my tests. Because of the shims.d.ts "fake typing" importing renders all the props/data/methods/actions inaccessible. Only the features common to all components are testable. Not the case using @ktsn template loader, though. ([see other issue](https://stackoverflow.com/questions/42058620/how-to-work-with-typescript-in-vue-files-using-vs-code)). Why should I even have `.vue` files? – ElevateBart Mar 10 '18 at 16:26
  • Hmm, the autocomplete is working for everything but tests, is that what you mean]? – acdcjunior Mar 10 '18 at 16:50
  • I have added an example of what I am seeing and do not like. – ElevateBart Mar 10 '18 at 17:40
  • I import vue files in tests, indeed. I would like also to import them in other vuejs component. It will help me compose interfaces with dependency injection. – ElevateBart Mar 10 '18 at 17:49