[vue-3] Make useToast available from import

I'm submitting a ...

[ ] Bug report => search github for a similar issue or PR before submitting
[x] Feature request
[ ] Other, please describe

Tell about your platform

Vue.js version : 3.0.x
This package version : next

Current behavior
The $toast object is only available in components, not from imports.

Expected behavior
I would be nice to have useToast available for in .ts files - for instance in Vuex.

example.ts

import { useToast } from "vue-toast-notification";

useToast.success("Hello world.");

It should be as simple matter of exporting { useToast } in index.js and changing the .d.ts file.

vue-toast-notification/src/index.js

Line 14 in e5a5989

export {useToast, ToastComponent, ToastPositions}

This is already being exported, but not documented

Does this work for you?

Unfortunately it doesn't.
I don't know if it's webpack doing treeshaking, or something else, but if I do

import('vue-toast-notification').then(toast => console.log(toast));

I don't get useToast as part of the object.

It is a named export. Should imported in same fashion. Google about it.

Try this code using vue-toast-notification@next on Vue 3.

import * as toast from "vue-toast-notification";
console.log(toast);

This is the object you get in the browser:

Object { install: install(t, e) }
  install: function install(t, e)
    length: 1
    name: "install"
    <prototype>: function ()
  <prototype>: Object { … }

useToast is not part of the export when Vue is done building.

Looks like webpack is removing un used exports from bundle

https://unpkg.com/browse/vue-toast-notification@2.0.0/dist/index.js

Need to find a way to prevent this

fixed with 2.0.1

Looks like it not fixed
webpack/webpack#2933

Thanks for looking in to it.
Guess I wait for Webpack to fix the bug.

You can use composition api now with v3.x

import {useToast} from "vue-toast-notification";

You can use composition api now with v3.x
import {useToast} from "vue-toast-notification";

In typescript it marks an error, apparently the additional exports are not defined in the toast.d.ts:

ts: Module '"vue-toast-notification"' has no exported member 'useToast'.

Feel free to send a PR

I am trying to use the useToast to show some errors in a .ts file.

Here is basically how I am doing it:

import axios, { AxiosInstance } from "axios";

import { useToast } from "vue-toast-notification";

const getApiClient = (): AxiosInstance => {
    return axios.create({
        baseURL: "https://api-url",
        headers: {
            "Content-type": "application/json",
        }
    });
}

const apiClient: AxiosInstance = getApiClient();

apiClient.interceptors.response.use((response) =>
    response
    , (error) => {
        useToast.error(error);
        throw error;
    });

export default apiClient;

I am getting this error:

TypeError: useToast.error is not a function

I have spent a lot of time on this but to no avail. Any help or a point in the right direction would be greatly appreciated.

You suppose to do it like this

useToast().error(error);