Augmenting vue.js in typescript

Question

I'm trying to augment vue js with additional mapping. I'm following this: https://v2.vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins

I have created a file vue.d.ts under ./Definitions (relative to my main.ts) I have referenced it in my main.ts:

require("./Definitions/vue.d.ts");

In vue.d.ts I've put:

 // 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'

// 2. Specify a file with the types you want to augment
//    Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
    // 3. Declare augmentation for Vue
    interface Vue {
        $myProperty: string
    }
}

But this:

var vm = new Vue()
console.log(vm.$myProperty);

Doesn't resolve.

I've tried changing declare module 'vue/types/vue' to just declare module 'vue'. This gives me an error: "Cannot augument module 'vue' because it resolves to a non-module entity"

The original vue typings are located under {projectDir}\node_modules\@types\vue\index.d.ts. I'm using webpack.

How do I do it properly?

Harshal Patil · Accepted Answer · 2018-06-18 13:40:33Z

5

Assuming your project has tsconfig.json, you should set following compilerOptions:

{
    "compilerOptions": {

        "baseUrl": ".",

        // other options go here

        "typeRoots": [
            "./node_modules/@types",
            "./typings"
        ]
    }
}

Once you do that, create typings/vue folder relative to tsconfig.json and the path you mentioned. Inside typings/vue folder, create index.d.ts file. Typically, your declaration file would look like:

import Vue from 'vue';
import { AppStore } from '../../src/store/store';

declare module 'vue/types/vue' {
    // Global properties can be declared
    // on the `VueConstructor` interface
    interface VueConstructor {
        // some more augmentation
    }

    // Properties added to Vue interface are added to Vue instance
    interface Vue {
        store$: AppStore;
    }
}

Prefer this approach over the one that you are trying to do as importing type files doesn't scale really well.

Also, with latest Vue.js, you don't need node_modules/@types/vue declarations. They are shipped as part of official node_modules/vue package. If you are doing that then you should delete those.

answered Jun 18, 2018 at 13:40

Harshal Patil

21.5k17 gold badges76 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Archeg Over a year ago

Unfortunately doesn't work. But I think I have some setup problems - you are right, the bindings are supplied in node_modules/vue, but if I remove node_modules/@types/vue, my build process stops from working. I'll try to look at it more tomorrow

Archeg Over a year ago

This is for sure the correct answer. I have cleaned everything and did it again. Then I added vue-resource to my index.d.ts augmentation and everything started to work. Not sure why it didn't at start. My VS still does not see the bindings, but I think I'll find a way to fix this. Thanks

Collectives™ on Stack Overflow

Augmenting vue.js in typescript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related