I am currently trying to integrate a self-made plugin for Vue with TypeScript.
However, when I try to use the method from my vue prototype, I encounter an issue where my method $auth is not recognized on type 'myComponent'. I have also included a .d.ts file for the plugin, but I suspect there may be some issues with it. Additionally, I am unsure if the install function is required in the plugin. While some examples do not include it, the documentation states that it is necessary.
My Custom 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 Definition
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)
}
}
}