How to use a javascript component in vue.js with typescript?

Question

I have a component defined in a project and want to expose like this, in order to use in another project:

import ToastNotification from '../ToastNotification';
import Api from './api';

const VueToast = (Vue, options = {}) => {
  const methods = Api(Vue, options);
  Vue.$toast = methods;
  Vue.prototype.$toast = methods;
};

ToastNotification.install = VueToast;

export default ToastNotification;

In index.js I declare :

import VueToast from './toast/js/index';

Vue.use(VueToast);

And in another project I npm install this project as a library but this.$toast('message') is not recognized. It said that "Property '$toast' does not exist on type '' "

I mention that I managed to use inside the project, another class the 'this.$toast('')', but can't manage in another project. The component is implemented in Vue.js using Javascript and I'm trying to use in another project that uses Vue.js that supports typescript.

I already tried to declare in my project in main.ts, but still does not work:

import VueToast from'/src/components/toast/js/index';
Vue.use(VueToast);

Do you have any idea about what I forgot to declare?

tony19 · Accepted Answer · 2022-07-16 01:41:40Z

1

To add $toast to the Vue component instance type, declare the following type augmentation in a .d.ts file (e.g., in src/shims-vue.d.ts):

Vue 2:

import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    $toast: (msg: string) => void;
  }
}

export {}

Vue 3:

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $toast: (msg: string) => void;
  }
}

export {}

edited Jul 16, 2022 at 1:41

answered Mar 29, 2021 at 4:51

tony19

140k23 gold badges281 silver badges354 bronze badges

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

Collectives™ on Stack Overflow

How to use a javascript component in vue.js with typescript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related