I have this structure of my index and service plugin:
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);
}
}
Basically I have created a service that receives the component so that it interacts with the component at ease.
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;
Where I install the plugin and use the service that I showed above.
Here I call the plugin and make it the corresponding Vue.use but when I want to call it in any component:
<a @click="$toast.open({ title: 'Hola mundo' })">Hola, dame click!</a>
I get the following error: "TypeError: this.toastRef.open is not a function"
En el shims-vue-plugin.d.ts:
/* 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;
}
}
Does anyone know what it could be? or that I'm missing since I can't find the error: /
this.$toast
? I am not sure what are you importingimport Toast from '@/components/_includes/layouts/Toast.vue'
? Would you be able to share github/codesandbox project?