CODEWITHSUNDEEP
typescriptvue.jsvue-component
Buda Sergiu Flavius
Buda Sergiu Flavius

Reputation: 230

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

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?

Upvotes: 3

Views: 1182

Answers (1)

tony19
tony19

Reputation: 138226

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 {}

Upvotes: 1

Related Questions