Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to add types for vue plugin?

I try add self plugin for vue with type script.

But at moment when i use my method from vue prototype, my method $auth does not exist on type myComponent. I also add .d.ts for plugin, but i think he is little not correct, and also i think in plugin don't need use install, or need? Just in some examples i dont see install, but in docs say - need use install.

my plugin

import _Vue from 'vue';
import store from '@/store'
import * as firebase from 'firebase';

export default {
    install: (Vue: typeof _Vue, options?: any) => {
        const base = firebase.initializeApp(config);
        const auth = firebase.auth();
        Vue.prototype.$auth = {
            login: async (username: string, pass: string) => {
                return await auth.signInWithEmailAndPassword(username, pass)
            },
            logout: async () => {
                await auth.signOut()
            }
        };
        auth.onAuthStateChanged((user: any) => {
            store.commit('updateUser',{ user })
        })
    }
}

myPlugin.d.ts

declare module 'vue/types/vue' {
    interface Vue {
        $auth: {
            login: (username: string, pass: string) => Promise<any>
        };
    }
}

component

export default class SignUp extends Vue {
    email: string = '';
    password: string = '';

    async onSubmit(){
        if ((this.$refs.form as any).validate()) {
            const auth = await this.$auth.login(this.email, this.password)
        }
    }


}
like image 469
Drop Avatar asked Mar 23 '19 07:03

Drop


People also ask

How do I add plugins to Vue?

Creating a new Vue plugin is simple. We just have to create a module that exports an object with the install method inside it. The install method has a Vue parameter for the Vue instance, and an options object that takes various options that we pass in by calling Vue. use to register the plugin.

Should I use JSX with Vue?

js. Love it or hate it, JSX is a popular extension to JavaScript that allows XML tokens in your scripts. If you want to create templates in your script files and you find Vue's render() function to be difficult to work with, JSX may be just what you need.

Is Vue 3 written in TypeScript?

Vue is written in TypeScript itself and provides first-class TypeScript support. All official Vue packages come with bundled type declarations that should work out-of-the-box.


1 Answers

  1. install function is a strict requirement, this function is used by Vue internally in Vue.use(YourAwesomePlugin) to load your plugin.

  2. I could not make the declaration file work as well as you mentioned, but in docs examples an author put the declaration merging in a file with logic (not in a separate d.ts). So if you put content of your myPlugin.d.ts to a main plugin file - it will load your interface and $auth will exist on this.

TS Docs(see Module Augmentation section): Declaration Merging


UPDATE

To make .d.ts file work you just need to import vue in that file.

Vue docs: Augmenting Types for Use with Plugins

like image 88
Max Sinev Avatar answered Oct 06 '22 09:10

Max Sinev