In my index.ts and service plugin files, I have this structure:
service.ts
declare interface Params {
title: string;
description?: string;
type?: string;
duration?: number;
}
export default class ServiceToast {
public toastRef: any; // component
public constructor(modalRef: any) {
this.toastRef = modalRef;
console.log(this.toastRef);
}
public open(params: Params) {
this.toastRef.open(params);
}
}
I have created a service that interacts with the component easily by receiving it as a parameter.
index.ts:
import _Vue from 'vue';
import Toast from '@/components/_includes/layouts/Toast.vue';
import ServiceToast from './service';
const ToastPlugin = {
install: (Vue: typeof _Vue, options?: any) => {
Vue.mixin({
created() {
Vue.prototype.$toast = new ServiceToast(Toast);
},
});
},
};
export default ToastPlugin;
In this setup, I install the plugin and use the service mentioned above.
When I try to call the plugin in any component using:
<a @click="$toast.open({ title: 'Hola mundo' })">Click me for a greeting!</a>
I encounter the error message: "TypeError: this.toastRef.open is not a function"
In the shims-vue-plugin.d.ts file:
/* eslint-disable */
import Vue from 'vue';
import { AxiosInstance } from 'axios';
import 'webpack-env';
import { FieldFlagsBag } from 'vee-validate';
import { SnackbarProgrammatic as Snackbar, DialogProgrammatic as Dialog } from 'buefy';
import ServiceToast from './app-config/toast/service';
declare module 'vue/types/vue' {
interface Vue {
$auth: any;
$axios: AxiosInstance;
veeFields: FieldFlagsBag;
$dialog: typeof Dialog;
$snackbar: typeof Snackbar;
$toast: ServiceToast;
}
}
declare namespace NodeJS {
interface Process extends __WebpackModuleApi.NodeProcess {
server: boolean;
}
}
Can anyone help me identify what might be causing this error or if there's something missing? I've been unable to resolve it:/