How to work with Typescript in .vue files using VS Code?

Question

I'm using Visual Studio Code, Vue 2 (webpack template) and Typescript.

This is my App.vue component:

<template>
    <div id="app">
        <navbar></navbar>
        [content here]
    </div>
</template>

<script lang="ts">
    import Navbar from './components/Navbar'

    export default {
        components: {
            Navbar
        }
    }
</script>

Question 1: Everything is working fine, but I would like to have intellisense inside <script lang="ts"> tag as it happens in .ts files, so how can I achieve that?

Question 2: In my main.ts I have import App from './App', but "./App" is underlined in red since VS Code can't find the .ts file. Is there a way to make the editor recognizes .vue before compile time (in editing time)?

Update (2018-03-25): I highly recommend everyone who wants to setup typescript to read this

As for Q2, i'm using import with extension: "import {default as Question} from './Question.vue'" — TSV
– TSV, Commented Feb 6, 2017 at 13:57
Same question here. Intellisense is not working in .vue files with typescript. This question is from February, I'm surprised this issue still hasn't been solved, at least not in VS Code. — Kokodoko
– Kokodoko, Commented Nov 14, 2017 at 11:43

Ying · Accepted Answer · 2017-05-20 14:13:45Z

For Q1, put the Typescript code into a separate script.ts file and include it in App.vue like:

<script lang="ts">
   import s from './script'
   export default s
</script>

For Q2, as suggested by @Oswaldo, you can defined a vue.d.ts file that has the following content:

declare module '*.vue' {
  import Vue = require('vue')
  const value: Vue.ComponentOptions<Vue>
  export default value
}

If you put this file in the ${Project_ROOT}/typings folder, you need to include this type file in your tsconfig.json like

"typeRoots": ["./typings"]

Then you can import *.vue file with the .vue postfix:

import App from './App.vue'

If you don't like to include the .vue postfix, you can put all Vue components in a single folder such as src/components and change the vue.d.ts as the following:

declare module 'src/components/*' {
  import Vue = require('vue')
  const value: Vue.ComponentOptions<Vue>
  export default value
}

The src is defined webpack.base.conf.js as an alias for an absolute path.

resolve: {
  extensions: ['.js', '.vue', '.json', '.ts'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    'src': resolve('src')
  }
}

Then you need to use the full path to import a component without the .vue postfix:

import App from 'src/components/App'

Both are not elegant solutions but the red underline is gone.

thx, just change Q1 to suggest vetur (as my question was about vue single file component) and I'll accept it as the answer
I have discovered that including the .d.ts file is what disables intellisense in .vue files! Apparently when VS Code identifies the *.vue extension as a module, Vetur won't interpret .vue files anymore.

webon · Accepted Answer · 2017-03-02 07:14:53Z

0

For Q2, vue-class-component come with a solution,sfc.d.ts,hope it can helps you. If you have any idea for Q1, please inform me

answered Mar 2, 2017 at 7:14

webon

883 bronze badges

Comments

Oswaldo · Accepted Answer · 2017-03-02 11:57:09Z

0

For Q1 I found a nice VS Code extension called vetur with intellisense support

For Q2 It can't be achieved with .vue files, need to use only .ts with template inside it

answered Mar 2, 2017 at 11:57

Oswaldo

3,4165 gold badges29 silver badges37 bronze badges

2 Comments

user234932 Over a year ago

Should be noted that vetur (or any other VS Code .vue plugin) does not support type checker errors.

Lucas Over a year ago

Vetur intellisense will be added in version 0.6: github.com/octref/vetur/pull/94

Collectives™ on Stack Overflow

How to work with Typescript in .vue files using VS Code?

3 Answers 3

2 Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Linked

Related