Jake Jake - 9 months ago 193
TypeScript Question

How can I get Vue.js 2.0 typings for TypeScript working with Visual Studio?

I'm trying to get Vue.js 2.0 typings working with TypeScript in Visual Studio. Previously, I had used these typings from DefinitelyTyped, but they are for Vue.js 1.0 and thus don't match up. However, they did work just fine and let me work with the


I've since transitioned to using the typing files that come with Vue.js releases (here). I have included them in my project in my
folder, but my project does not understand them.

I've gathered that these typing files are meant to be used via import/export possibly? There are no other typing files I am using that work this way, so I am not sure how to correctly implement the typings such that they are available globally to my project.

I have a sample solution that shows an example of what I've tried - download here from my github repo.

Here's the structure of my

enter image description here

_references.d.ts contents

/// <reference path="typings/vue/index.d.ts" />

vue_test.ts contents

namespace Test
export class MyClass
public initialize()
var component = this.getComponent();

private getComponent(): Vue.Component
return Vue.component("test", {
template: "<div></div>",
props: ["test"],
methods: {
onClick: () =>

What I would expect is that I would have access to the
namespace and other namespaces that are declared in
, but this does not seem to be the case.

I did attempt to import the exported class into
, like this:

import * as _Vue from "./index";

declare global
export class Vue extends _Vue


However, this only allows me to access the root
class, and thus I cannot do things like specify
as a type, or any other namespace beyond

Other information:

Visual Studio 2015

Vue.js version 2.2.1

TypeScript version 2.1

UPDATE after suggestions from @unional
Here is my new folder structure:
enter image description here

No more _references.d.ts, using tsconfig.json instead. The tsconfig.json file contains this:

"compilerOptions": {
"sourceMap": true
"include": [

The above imports all .ts files in the project. The
file contains the following:

export * from "vue"
export as namespace Vue

Visual Studio tells me
Cannot find module 'vue'
, so my typings are still not functional, although the tsconfig.json file works (I added the jQuery typing to verify that).

Here is a link to the updated solution showing the new problems: [link]

Answer Source

With NPM

I recommend dropping down to the command line in your app's root directory and using NPM and the TypeScript command line interface.

  • If you do not already have a package.json file, then first run npm init.
  • Then to install vue.js, run npm install --save vue.
  • To install its types run npm install --save-dev @types/vue.
  • If you also lack a tsconfig.json file, then run tsc --init.
  • At that point, you will be able to build by running tsc.

Without NPM

Not using NPM is unconventional, particularly because you will not have a package.json file to support the tooling. If you are not able to use NPM, though, here is a valid approach that requires manually installation and setup.

Download VueJe 2.1.1 from the GitHub repo. After extracting the archive,

  1. Put the contents of the dist into your Scripts/vuejs directory,
  2. Put the contents of the typings into your typings/vuejs directory,
  3. Add a tsconfig.json file to your project's root that his this content.


  "compilerOptions": {
    // ....... other properties omitted      
    "typeRoots": [
    "target": "es5",
    "lib": ["es2015", "dom" ]

Then, at the top of your file that uses Vue, add a relative import statement.

import * as Vue from "../typings/vuejs";

interface MyComponent extends Vue {
  message: string
  onClick (): void

export default {
    template: '<button @click="onClick">Click!</button>',
    data: function () {
        return {
            message: 'Hello!'
    methods: {
        onClick: function () {

See also: