npm<\/span> <\/span>install<\/span> vue3-snackbar<\/span><\/div><\/code><\/pre><\/div>\n\n\n\nor on Yarn<\/p>\n\n\n\n
yarn<\/span> <\/span>add<\/span> vue3-snackbar<\/span><\/div><\/code><\/pre><\/div>\n\n\n\nThen inside your Vue app’s entry file:<\/p>\n\n\n\n
1<\/span>import<\/span> <\/span>{<\/span> createApp <\/span>}<\/span> <\/span>from<\/span> <\/span>\"vue\"<\/span>;<\/span><\/span><\/span><\/div>2<\/span><\/span>import<\/span> <\/span>{<\/span> <\/span>SnackbarService<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>\"vue3-snackbar\"<\/span>;<\/span><\/span><\/span><\/div>3<\/span><\/span>import<\/span> <\/span>\"vue3-snackbar\/styles\"<\/span>;<\/span><\/span><\/span><\/div>4<\/span>\n<\/span><\/span><\/div>5<\/span><\/span>import<\/span> <\/span>App<\/span> <\/span>from<\/span> <\/span>\".\/App.vue\"<\/span>;<\/span><\/span><\/span><\/div>6<\/span><\/span>const<\/span> app <\/span>=<\/span> <\/span>createApp<\/span>(<\/span>App<\/span>)<\/span>;<\/span><\/span><\/span><\/div>7<\/span>\n<\/span><\/span><\/div>8<\/span>app<\/span>.<\/span>use<\/span>(<\/span>SnackbarService<\/span>)<\/span>;<\/span><\/span><\/span><\/div>9<\/span>\n<\/span><\/span><\/div>10<\/span>app<\/span>.<\/span>mount<\/span>(<\/span>\"#app\"<\/span>)<\/span>;<\/span><\/span><\/div><\/code><\/pre><\/div>\n\n\n\nFinally, you need to import and use the Vue3Snackbar component somewhere in your app. We recommend your main layout file.<\/p>\n\n\n\n
1<\/span><<\/span>template<\/span>><\/span><\/span><\/span><\/div>2<\/span>\t<\/span><<\/span>header<\/span>><\/span>Site Title<\/span><\/<\/span>header<\/span>><\/span><\/span><\/span><\/div>3<\/span>\t<\/span><<\/span>router-view<\/span>><\/span><\/<\/span>router-view<\/span>><\/span><\/span><\/span><\/div>4<\/span>\t<\/span><<\/span>footer<\/span>><\/span>Site Footer<\/span><\/<\/span>footer<\/span>><\/span><\/span><\/span><\/div>5<\/span>\t<\/span><!-- An example of placement --><\/span><\/span><\/span><\/div>6<\/span>\t<\/span><<\/span>vue3-snackbar<\/span> <\/span>bottom<\/span> <\/span>right<\/span> <\/span>:duration<\/span>=<\/span>\"<\/span>4000<\/span>\"<\/span>><\/span><\/<\/span>vue3-snackbar<\/span>><\/span><\/span><\/span><\/div>7<\/span><\/span><\/<\/span>template<\/span>><\/span><\/span><\/span><\/div>8<\/span>\n<\/span><\/span><\/div>9<\/span><\/span><<\/span>script<\/span> <\/span>setup<\/span>><\/span><\/span><\/span><\/div>10<\/span><\/span>import<\/span> <\/span>{<\/span> <\/span>Vue3Snackbar<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>\"vue3-snackbar\"<\/span>;<\/span><\/span><\/span><\/div>11<\/span><\/span><\/<\/span>script<\/span>><\/span><\/span><\/div><\/code><\/pre><\/div>\n\n\n\nThe component itself is automatically teleported to the end of your <body><\/code> element, although you can override this behaviour via props (see below).<\/p>\n\n\n\n
Usage (Composition API)<\/h2>\n\n\n\n1<\/span><<\/span>script setup<\/span>><\/span><\/span><\/span><\/div>2<\/span><\/span>import<\/span> <\/span>{<\/span> useSnackbar <\/span>}<\/span> <\/span>from<\/span> <\/span>\"vue3-snackbar\"<\/span>;<\/span><\/span><\/span><\/div>3<\/span><\/span>const<\/span> snackbar <\/span>=<\/span> <\/span>useSnackbar<\/span>(<\/span>)<\/span>;<\/span><\/span><\/span><\/div>4<\/span>snackbar<\/span>.<\/span>add<\/span>(<\/span>{<\/span><\/span><\/span><\/div>5<\/span>    <\/span>type<\/span>:<\/span> <\/span>'success'<\/span>,<\/span><\/span><\/span><\/div>6<\/span>    <\/span>text<\/span>:<\/span> <\/span>'This is a snackbar message'<\/span><\/span><\/span><\/div>7<\/span><\/span>}<\/span>)<\/span><\/span><\/span><\/div>8<\/span><\/span><<\/span>\/<\/span>script<\/span>><\/span><\/span><\/div><\/code><\/pre><\/div>\n\n\n\nYou can also clear all messages from the Snackbar by calling snackbar.clear()<\/code><\/p>\n\n\n\n
Usage (Options API)<\/h2>\n\n\n\n1<\/span><<\/span>script<\/span>><\/span><\/span><\/span><\/div>2<\/span><\/span>export<\/span> <\/span>default<\/span> <\/span>{<\/span><\/span><\/span><\/div>3<\/span>    <\/span>methods<\/span>:<\/span> <\/span>{<\/span><\/span><\/span><\/div>4<\/span>        <\/span>successMessage<\/span>(<\/span>)<\/span> <\/span>{<\/span><\/span><\/span><\/div>5<\/span>            <\/span>this<\/span>.<\/span>$snackbar<\/span>.<\/span>add<\/span>(<\/span>{<\/span><\/span><\/span><\/div>6<\/span>                <\/span>type<\/span>:<\/span> <\/span>'success'<\/span>,<\/span><\/span><\/span><\/div>7<\/span>                <\/span>text<\/span>:<\/span> <\/span>'This is a snackbar message'<\/span><\/span><\/span><\/div>8<\/span>            <\/span>}<\/span>)<\/span><\/span><\/span><\/div>9<\/span>        <\/span>}<\/span><\/span><\/span><\/div>10<\/span>    <\/span>}<\/span><\/span><\/span><\/div>11<\/span><\/span>}<\/span><\/span><\/span><\/div>12<\/span><\/span><<\/span>\/<\/span>script<\/span>><\/span><\/span><\/div><\/code><\/pre><\/div>\n\n\n\nProps<\/h2>\n\n\n\nProperty<\/th> Type<\/th> Default<\/th> Description<\/th><\/tr><\/thead>
top<\/strong><\/td> Boolean<\/td> false<\/td> Position the snackbar container at the top of the screen<\/em><\/td><\/tr>
bottom<\/strong><\/td> Boolean<\/td> false<\/td> Position the snackbar container at the bottom of the screen<\/em><\/td><\/tr>
left<\/strong><\/td> Boolean<\/td> false<\/td> Position the snackbar container towards the left of the screen<\/em><\/td><\/tr>
right<\/strong><\/td> Boolean<\/td> false<\/td> Position the snackbar container towards the right of the screen<\/em><\/td><\/tr>
success<\/strong><\/td> String<\/td> #4caf50<\/td> Override the background colour of success-type messages<\/em><\/td><\/tr>
error<\/strong><\/td> String<\/td> #ff5252<\/td> Override the background colour of error-type messages<\/em><\/td><\/tr>
warning<\/strong><\/td> String<\/td> #fb8c00<\/td> Override the background colour of warning-type messages<\/em><\/td><\/tr>
info<\/strong><\/td> String<\/td> #2196f3<\/td> Override the background colour of info-type messages<\/em><\/td><\/tr>
duration<\/strong><\/td> Number<\/td> 4000<\/td> The default time in ms for messages to be displayed before being removed<\/em><\/td><\/tr>
attach<\/strong><\/td> [String,HTMLElement]<\/td> body<\/td> A query selector string or HTML element node to attach the snackbar container to<\/td><\/tr>
messageClass<\/strong><\/td> String<\/td> null<\/td> Adds a custom class to every message<\/em><\/td><\/tr>
messageActionClass<\/strong><\/td> String<\/td> “vue3-snackbar-message-action”<\/td> Class to apply to the message action container<\/td><\/tr>
zIndex<\/strong><\/td> Number<\/td> 10000<\/td> The z-index setting for the snackbar container<\/em><\/td><\/tr>
limit<\/strong><\/td> Number<\/td> null<\/td> Limit the number of messages\/message groups to display<\/td><\/tr>
dense<\/strong><\/td> Boolean<\/td> false<\/td> Reduce the y-axis padding around each message<\/em><\/td><\/tr>
shadow<\/strong><\/td> Boolean<\/td> false<\/td> Add shadows to the displayed messages<\/em><\/td><\/tr>
groups<\/strong><\/td> Boolean<\/td> false<\/td> Group messages with the same group-key<\/em><\/td><\/tr>
reverse<\/strong><\/td> Boolean<\/td> false<\/td> Reverse the stacking order of snackbar messages<\/em><\/td><\/tr>
border<\/strong><\/td> String<\/td> <empty string><\/td> “left”,”right”,”top”,”bottom”: Choose a setting for border-style messages<\/em><\/td><\/tr>
backgroundOpacity<\/strong><\/td> [String,Number]<\/td> 0.12<\/td> (with border-style messages) Set the opacity of the background<\/em><\/td><\/tr>
backgroundColor<\/strong><\/td> String<\/td> “currentColor”<\/td> (with border-style messages) Set the colour of the background<\/em><\/td><\/tr>
baseBackgroundColor<\/strong><\/td> String<\/td> “#fff”<\/td> (with border-style messages) Set the base colour of the background<\/em><\/td><\/tr>
dismissOnActionClick<\/strong><\/td> Boolean<\/td> true<\/td> Whether the message should be dismissed when the action container is clicked<\/td><\/tr>
iconPresets<\/strong><\/td> Object<\/td> null<\/td> Object with “success”, “error”, “info” and “warning” properties having the default vue3-icon props for each type<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nMethods<\/h2>\n\n\n\n
snackbar.add({  })<\/h4>\n\n\n\nThis method takes a single message config object with the following props:<\/p>\n\n\n\n
Property<\/th> Type<\/th> Default<\/th> Description<\/th><\/tr><\/thead>
type<\/td> String<\/td> null<\/td> Use a preset icon and colour scheme for common alert types: success, error, warning, info<\/em><\/td><\/tr>
background<\/td> String<\/td> null<\/td> Set the background colour manually for the message. Accepts any CSS colour value<\/em><\/td><\/tr>
title<\/td> String<\/td> <empty string><\/td> The title of the message<\/td><\/tr>
text *<\/td> String<\/td> <empty string><\/td> The body of the message<\/td><\/tr>
dismissible<\/td> Boolean<\/td> true<\/td> Allow the user to manually dismiss the message via a close button<\/em><\/td><\/tr>
icon<\/td> Object<\/td> {}<\/td> Manually set the icon for the message (see below)<\/em><\/td><\/tr>
groupKey<\/td> String<\/td> (see description)<\/td> Message group key (for when groups are enabled). Defaults to a string hash based on type, title and text<\/em><\/td><\/tr>
action<\/td> Component<\/td> null<\/td> A Vue component\/render function to render inside the actions slot for the message. Receives same props as the “message-action” slot detailed below.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nFor more information on the icon object, please see the Vue3 Icon<\/a> documentation’s props.<\/p>\n\n\n\n
snackbar.clear()<\/h4>\n\n\n\nRemoves all messages from the snackbar.<\/p>\n\n\n\n
Events<\/h2>\n\n\n\nEvent<\/th> Parameters<\/th> Description<\/th><\/tr><\/thead>
added<\/strong><\/td> Message {object}<\/td> Emitted when a snackbar message is added to the stack<\/em><\/td><\/tr>
removed<\/strong><\/td> Message {object}<\/td> Emitted when a snackbar message times out and is removed from the stack<\/em><\/td><\/tr>
dismissed<\/strong><\/td> Message {object}<\/td> Emitted when a message is manually dismissed from the stack<\/em><\/td><\/tr>
cleared<\/strong><\/td> none<\/em><\/td> Emitted when all messages are cleared from the stack<\/em><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nSlots<\/h2>\n\n\n\n
#message-inner<\/h3>\n\n\n\nTakes over all rendering inside the snackbar message. Receives message<\/code> as a slotProp.<\/p>\n\n\n\n
1<\/span><<\/span>Vue3Snackbar<\/span>><\/span><\/span><\/span><\/div>2<\/span>\t<\/span><<\/span>template<\/span> <\/span>#message-inner<\/span>=<\/span>\"<\/span>{ message }<\/span>\"<\/span>><\/span><\/span><\/span><\/div>3<\/span>\t\t<\/span><<\/span>strong<\/span> <\/span>v-text<\/span>=<\/span>\"<\/span>message.title<\/span>\"<\/span>><\/span><\/<\/span>strong<\/span>><\/span><\/span><\/span><\/div>4<\/span>\t\t<\/span><<\/span>p<\/span> <\/span>v-text<\/span>=<\/span>\"<\/span>message.text<\/span>\"<\/span>><\/span><\/<\/span>p<\/span>><\/span><\/span><\/span><\/div>5<\/span>\t<\/span><\/<\/span>template<\/span>><\/span><\/span><\/span><\/div>6<\/span><\/span><\/<\/span>Vue3Snackbar<\/span>><\/span><\/span><\/div><\/code><\/pre><\/div>\n\n\n\n#message-icon<\/h3>\n\n\n\nOverrides the icon slot at the start end of the message container. Receives message<\/code> and icon<\/code> as slotProps. Useful if you wish to use your own icon component inside your messages.<\/p>\n\n\n\n
1<\/span><<\/span>Vue3Snackbar<\/span>><\/span><\/span><\/span><\/div>2<\/span>\t<\/span><<\/span>template<\/span> <\/span>#message-icon<\/span>=<\/span>\"<\/span>{ message }<\/span>\"<\/span>><\/span><\/span><\/span><\/div>3<\/span>\t\t<\/span><<\/span>img<\/span> <\/span>src<\/span>=<\/span>\"<\/span>\/assets\/icons\/warning.svg<\/span>\"<\/span>><\/span><\/span><\/span><\/div>4<\/span>\t<\/span><\/<\/span>template<\/span>><\/span><\/span><\/span><\/div>5<\/span><\/span><\/<\/span>Vue3Snackbar<\/span>><\/span><\/span><\/div><\/code><\/pre><\/div>\n\n\n\n#message-badge<\/h3>\n\n\n\nThe badge is used when the groups<\/code> mode is enabled. It shows how many messages are currently in the stack belonging to that group. Receives message<\/code> and count<\/code> as slotProps.<\/p>\n\n\n\n
1<\/span><<\/span>Vue3Snackbar<\/span>><\/span><\/span><\/span><\/div>2<\/span>\t<\/span><<\/span>template<\/span> <\/span>#message-badge<\/span>=<\/span>\"<\/span>{ message, count }<\/span>\"<\/span>><\/span><\/span><\/span><\/div>3<\/span>\t\t<\/span><<\/span>span<\/span> <\/span>v-if<\/span>=<\/span>\"<\/span>count > 1<\/span>\"<\/span> <\/span>v-text<\/span>=<\/span>\"<\/span>count<\/span>\"<\/span>><\/span><\/<\/span>span<\/span>><\/span><\/span><\/span><\/div>4<\/span>\t<\/span><\/<\/span>template<\/span>><\/span><\/span><\/span><\/div>5<\/span><\/span><\/<\/span>Vue3Snackbar<\/span>><\/span><\/span><\/div><\/code><\/pre><\/div>\n\n\n\n#message-content<\/h3>\n\n\n\nThe main content slot of each message. This one receives message<\/code>, title<\/code> and text<\/code> as slotProps. Bear in mind that title<\/code> is an optional field whereas text<\/code> is not.<\/p>\n\n\n\n
1<\/span><<\/span>Vue3Snackbar<\/span>><\/span><\/span><\/span><\/div>2<\/span>\t<\/span><<\/span>template<\/span> <\/span>#message-content<\/span>=<\/span>\"<\/span>{ message, title, text }<\/span>\"<\/span>><\/span><\/span><\/span><\/div>3<\/span>\t\t<\/span><<\/span>strong<\/span> <\/span>v-text<\/span>=<\/span>\"<\/span>title<\/span>\"<\/span>><\/span><\/<\/span>strong<\/span>><\/span><\/span><\/span><\/div>4<\/span>\t\t<\/span><<\/span>p<\/span> <\/span>v-text<\/span>=<\/span>\"<\/span>text<\/span>\"<\/span>><\/span><\/<\/span>p<\/span>><\/span><\/span><\/span><\/div>5<\/span>\t<\/span><\/<\/span>template<\/span>><\/span><\/span><\/span><\/div>6<\/span><\/span><\/<\/span>Vue3Snackbar<\/span>><\/span><\/span><\/div><\/code><\/pre><\/div>\n\n\n\n#message-close-icon<\/h3>\n\n\n\nWhen a message is marked dismissible<\/code>, this is the slot tasked with allowing the user to dismiss it. The slots receives the values message<\/code> and isDismissible<\/code> (boolean) as well as the action dismiss<\/code> which… see if you can guess.<\/p>\n\n\n\n
1<\/span><<\/span>Vue3Snackbar<\/span>><\/span><\/span><\/span><\/div>2<\/span>\t<\/span><<\/span>template<\/span> <\/span>#message-close-icon<\/span>=<\/span>\"<\/span>{ message, isDismissible, dismiss }<\/span>\"<\/span>><\/span><\/span><\/span><\/div>3<\/span>\t\t<\/span><<\/span>button<\/span> <\/span>v-if<\/span>=<\/span>\"<\/span>isDismissible<\/span>\"<\/span> <\/span>@click<\/span>=<\/span>\"<\/span>dismiss<\/span>\"<\/span>><\/span><\/span><\/span><\/div>4<\/span>\t\t\tClose<\/span><\/span><\/div>5<\/span>\t\t<\/span><\/<\/span>button<\/span>><\/span><\/span><\/span><\/div>6<\/span>\t<\/span><\/<\/span>template<\/span>><\/span><\/span><\/span><\/div>7<\/span><\/span><\/<\/span>Vue3Snackbar<\/span>><\/span><\/span><\/div><\/code><\/pre><\/div>\n\n\n\n#message-action (new in 2.3.0)<\/h3>\n\n\n\nPositioned below the message content, the message-action slot allows you to add an action to your snackbar messages. If you’d prefer, you can also pass a render function\/component to the message’s “action” property<\/p>\n\n\n\n
1<\/span><<\/span>Vue3Snackbar<\/span>><\/span><\/span><\/span><\/div>2<\/span>\t<\/span><<\/span>template<\/span> <\/span>#message-action<\/span>=<\/span>\"<\/span>{ message, isDismissible, dismiss }<\/span>\"<\/span>><\/span><\/span><\/span><\/div>3<\/span>\t\t<\/span><<\/span>button<\/span> <\/span>v-if<\/span>=<\/span>\"<\/span>message.title === <\/span>'<\/span>Added to cart<\/span>'<\/span>\"<\/span>><\/span>Go To Checkout<\/span><\/<\/span>button<\/span>><\/span><\/span><\/span><\/div>4<\/span>\t<\/span><\/<\/span>template<\/span>><\/span><\/span><\/span><\/div>5<\/span><\/span><\/<\/span>Vue3Snackbar<\/span>><\/span><\/span><\/div><\/code><\/pre><\/div>\n\n\n\nDemo & Nuxt<\/h2>\n\n\n\n You can see a demo of Vue3 Snackbar over on our Github Pages demo<\/a> site.<\/p>\n\n\n\n
If you’re looking to use this package with Nuxt, then our friend modbender<\/strong> has created a plugin which makes using the component a breeze. You can see the project at https:\/\/github.com\/modbender\/nuxt-snackbar<\/a> or on NPM<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Installation From the root of your project, in NPM or on Yarn Then inside your Vue app’s entry file: Finally, you need to import and use the Vue3Snackbar component somewhere in your app. We recommend your main layout file. The component itself is automatically teleported to the end of your <body> element, although you can…<\/p>\n","protected":false},"author":2,"featured_media":286,"parent":218,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/open-source-software.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-285","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/pages\/285","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/comments?post=285"}],"version-history":[{"count":14,"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/pages\/285\/revisions"}],"predecessor-version":[{"id":640,"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/pages\/285\/revisions\/640"}],"up":[{"embeddable":true,"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/pages\/218"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/media\/286"}],"wp:attachment":[{"href":"https:\/\/evomark.co.uk\/wp-json\/wp\/v2\/media?parent=285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}