Comments (9)
Should this library expose useToast()
that you could use directly in the components? For example vue-router
exposes useRouter
, which is simple as this:
function useRouter() {
return vue.inject(routerKey);
}
Right now I have:
import { Toaster } from '@meforma/vue-toaster';
import { inject } from 'vue';
export function useToast(): Toaster {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return inject<Toaster>('toast')!;
}
based on @andgeno's example
@jprodrigues70 what do you think?
from vue-toaster.
Not sure if this will help, but I set it this way to use the toast on any composition API components.
// useToast.js
import { getCurrentInstance } from "@vue/runtime-core";
export default () => {
const toast = getCurrentInstance().ctx.$toast;
const trigger = (message, type) => {
switch (type) {
case "success":
toast.sucess(message);
break;
case "error":
toast.error(message);
break;
case "warning":
toast.warning(message);
break;
case "info":
toast.info(message);
break;
default:
toast.show(message);
break;
}
};
return {
trigger,
};
};
// app.js
import { createApp } from "vue";
import Toaster from "@meforma/vue-toaster";
import App from "./App.vue";
createApp(App)
.use(Toaster, {
duration: 5000, // or additional global properties
})
.mount("#app");
// Component.vue
...
import useToast from "path/to/useToast";
...
setup() {
const { trigger } = useToast();
...
trigger('Show me toast!'); // or pass the toast type as the second args
}
...
Edit: Change to set the toast type on trigger.
from vue-toaster.
Maybe this is of interest for you. I wrote a quick index.d.ts
file to make vue-toaster have a typed class Toaster
and a corresponding interface ToasterOptions
. This also enables code auto-completion. π
declare module '@meforma/vue-toaster' {
export const install: PluginFunction<{}>;
export interface ToasterOptions {
message?: string;
type?: 'default' | 'success' | 'info' | 'warning' | 'error';
position?: 'top' | 'bottom' | 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left';
duration?: number;
dismissible?: boolean;
onClick?(): void;
onClose?(): void;
queue?: boolean;
pauseOnHover?: boolean;
useDefaultCss?: boolean;
}
export = class Toaster {
clear(): void;
show(message: string, options?: ToasterOptions): void;
success(message: string, options?: ToasterOptions): void;
error(message: string, options?: ToasterOptions): void;
info(message: string, options?: ToasterOptions): void;
warning(message: string, options?: ToasterOptions): void;
};
}
from vue-toaster.
Hi, @restyler
the component was not written with the new Composition API. So for now itβs not supported, but I want it to be supported.
It's a great candidate for PRs π
UPDATE: You can use it in Composition API as @andgeno related in this comment #16 (comment)
from vue-toaster.
Thank you! In case anyone is interested in quick solution, I've found https://github.com/Maronato/vue-toastification/tree/next which is a similar project but designed with Vue 3 Composition API support in mind.
from vue-toaster.
@andgeno @naftis Very nice! Would you open a PR with these improvements?
from vue-toaster.
I'm really interested in having this. @naftis solutions seem the proper one, is there a PR already opened?
from vue-toaster.
@alvarosaburido My project moved to https://github.com/Maronato/vue-toastification/tree/next which implements the hook and also had other features this one was missing. It would be nice to have this + solid TypeScript support in this project too!
from vue-toaster.
You can try
https://github.com/ankurk91/vue-toast-notification
for composition api
from vue-toaster.
Related Issues (20)
- Use in Composition API supported? HOT 4
- Add github star and fork buttons on example
- Doesn't work in Typescript HOT 1
- Vue 4 suppport? HOT 2
- Use vue-toaster inside action.js HOT 6
- Should be used with Vue3 Typescript HOT 3
- ReferenceError glob is not defined
- Add separate close button HOT 2
- Publish latest release to npm HOT 1
- @meforma/vue-toaster doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module HOT 1
- Warnings when installing?
- Cannot read properties of undefined (reading '$toast') HOT 3
- Custom CSS HOT 3
- Calling this.$toast.clear() doesn't clear any toasts (using Vite) HOT 7
- Why the toaster doesn't show up on mobile browsers?
- Is there a way to change the toast colors? HOT 2
- Unable to build the site HOT 1
- Import not work in main.js
- Different mounting point HOT 1
- Simple Import in app.js not working Vue3 /Inertia
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-toaster.