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

Improve this question
6
  • Just to confirm: did you use <script> tags with TypeScript? You are saying you lose the autocomplete in this case or are you comparing it to plain JavaScript? Commented Mar 8, 2018 at 15:48
  • I replace HelloWorld.vue by HelloWorld > index.ts, HelloWorld > style.scss, HelloWorld > template.html Commented Mar 8, 2018 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. Commented Mar 8, 2018 at 15:56
  • What IDE are you using? Commented Mar 8, 2018 at 16:03
  • I am using vscode!! Commented Mar 9, 2018 at 1:29

1 Answer 1

Reset to default
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
        }
      },
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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). Why should I even have .vue files?
Hmm, the autocomplete is working for everything but tests, is that what you mean]?
I have added an example of what I am seeing and do not like.
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.