{"id":35281,"date":"2024-10-17T18:25:20","date_gmt":"2024-10-17T16:25:20","guid":{"rendered":"https:\/\/www.dbi-services.com\/blog\/?p=35281"},"modified":"2024-10-17T18:36:03","modified_gmt":"2024-10-17T16:36:03","slug":"creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia","status":"publish","type":"post","link":"https:\/\/www.dbi-services.com\/blog\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\/","title":{"rendered":"Creating a Global and Custom Snackbar in Vue 3 Using Vuetify and Pinia"},"content":{"rendered":"\n

In this post, we’ll walk through how to implement a Global and Custom Snackbar in Vue 3 with Vuetify and Pinia for state management. We’ll set it up so that you can easily trigger the Snackbar from any component in your app.<\/p>\n\n\n\n

I. Set Up Your Vue App with Vuetify CLI<\/h2>\n\n\n\n

To start, we\u2019ll create our Vue 3 app using the Vuetify CLI. This CLI simplifies the process of integrating Vuetify and sets up your project structure. <\/p>\n\n\n

\nnpm create vuetify@latest\n<\/pre><\/div>\n\n\n
Follow the prompts to choose your project settings and install dependencies. As we are going to use Pinia, don’t forget to choose this option. I decided to keep all the generated files to keep it simple and straightforward, but you can clean the code that was automatically generated. I just cleaned the component HelloWorld.vue, that now looks like this:<\/p>\n\n\n
\n<template>\n  <v-container class="fill-height">\n    <v-responsive class="align-centerfill-height mx-auto" max-width="900">\n    <\/v-responsive>\n  <\/v-container>\n<\/template>\n\n<script setup lang="ts">\n<\/script>\n<\/pre><\/div>\n\n\n
II. Set Up the Pinia Store for Snackbar<\/h2>\n\n\n\n
Next, create a Pinia store (SnackbarStore.ts<\/code>) to handle the state of the Snackbar (open\/close, message, status, etc.). This will allow you to trigger the Snackbar from anywhere in the app.<\/p>\n\n\n
\n\/\/ SnackbarStore.ts inside stores directory\n\nimport { defineStore } from 'pinia'\nimport { Ref, ref } from 'vue'\n\nexport interface CustomAction {\n  actionName: string;\n  link: any;\n}\n\nexport const useSnackbarStore = defineStore('SnackbarStore', () => {\n  const isOpen = ref(false)\n  const message = ref('')\n  const status = ref('error')\n  const customActions: Ref<CustomAction[]> = ref([])\n\n  const showSnackbar = (msg: string, st: string, optionalActions?: CustomAction[]) => { \/\/ Change to accept an array\n    message.value = msg\n    status.value = st\n    isOpen.value = true\n    if (optionalActions) {\n      customActions.value.push(...optionalActions) \/\/ Spread the array into customActions\n    }\n    if (status.value.toLowerCase() === 'success') {\n      setTimeout(() => {\n        closeSnackbar()\n      }, 2500)\n    }\n  }\n\n  function closeSnackbar () {\n    isOpen.value = false\n    customActions.value.splice(0, customActions.value.length) \/\/ Clear custom actions\n  }\n\n  return { isOpen, message, status, showSnackbar, closeSnackbar, customActions }\n})\n<\/pre><\/div>\n\n\n
III. Create the Snackbar Component<\/h2>\n\n\n\n
We’ll create a reusable Snackbar component (GlobalSnackbar.vue<\/code>) that can be used anywhere in your application.<\/p>\n\n\n
\n<template>\n  <div class="text-center">\n    <v-snackbar\n      v-model="snackbarRef"\n      class="customSnackbar"\n      :color="snackbarStatus"\n      variant="outlined"\n      vertical\n    >\n      <div class="text-subtitle-1 pb-2 title-custom">{{ snackbarStatus }}<\/div>\n\n      <p>{{ errorMsg }}<\/p>\n\n      <template #actions>\n        <v-btn\n          v-for="act of snackbarActions"\n          :key="act.actionName"\n          :to="act.link"\n        >\n          {{ act.actionName }}\n        <\/v-btn>\n        <v-btn variant="tonal" @click="closeSnackbar"> Close <\/v-btn>\n      <\/template>\n    <\/v-snackbar>\n  <\/div>\n<\/template>\n\n<script lang="ts" setup>\n  import { toRef } from 'vue'\n  import { CustomAction, useSnackbarStore } from '@\/stores\/SnackbarStore'\n\n  \/\/ Define the properties that the component will receive\n  const props = defineProps({\n    snackbarShow: Boolean,\n    errorMsg: String,\n    snackbarStatus: String,\n    snackbarActions: {\n      type: Array as () => CustomAction[], \/\/ Custom type to define snackbar actions\n    },\n  })\n\n  const snackbar = useSnackbarStore()\n  const snackbarRef = toRef(props, 'snackbarShow')\n\n  const closeSnackbar = () => {\n    snackbar.closeSnackbar()\n  }\n<\/script>\n\n<style>\n.customSnackbar.v-snackbar--vertical .v-snackbar__wrapper {\n  background-color: rgb(238, 238, 238);\n}\n.title-custom {\n  text-transform: uppercase !important;\n}\n<\/style>\n<\/pre><\/div>\n\n\n
IV. Modify App.vue<\/code> to Include the Global Snackbar<\/h2>\n\n\n\n
To ensure the Snackbar is available across your entire app, import it into App.vue<\/code> and pass the required props from the SnackbarStore<\/code>.<\/p>\n\n\n
\n<template>\n  <v-app>\n    <v-main>\n      <router-view \/>\n    <\/v-main>\n    <GlobalSnackbar\n      :error-msg="snackbar.message"\n      :snackbar-actions="snackbar.customActions"\n      :snackbar-show="snackbar.isOpen"\n      :snackbar-status="snackbar.status"\n    \/>\n  <\/v-app>\n<\/template>\n\n<script lang="ts" setup>\n  import { useSnackbarStore } from '@\/stores\/SnackbarStore'\n  const snackbar = useSnackbarStore()\n<\/script>\n<\/pre><\/div>\n\n\n
This step is essential to making sure the GlobalSnackbar<\/code> component is part of the root layout and is always available to display messages.<\/p>\n\n\n\n
V. Using the Snackbar in a Component<\/h2>\n\n\n\n
Now, let’s demonstrate how to trigger the Snackbar from any component. For this example, we\u2019ll use a button that, when clicked, shows a success message with an optional action. We can edit HelloWord.vue with following code.<\/p>\n\n\n
\n<template>\n  <v-container class="fill-height">\n    <v-responsive class="align-centerfill-height mx-auto" max-width="900">\n      <v-btn @click="openSnackbar()">test<\/v-btn>\n    <\/v-responsive>\n  <\/v-container>\n<\/template>\n\n<script setup lang="ts">\n  import { useSnackbarStore } from '@\/stores\/SnackbarStore'\n  const snackbar = useSnackbarStore()\n\n  const openSnackbar = () => {\n    snackbar.showSnackbar('Show snackbar', 'success', [\n      { actionName: 'Go to Home', link: '\/home' },\n      { actionName: 'Go to Test', link: '\/test' },\n    ])\n  }\n<\/script>\n<\/pre><\/div>\n\n\n
VI. Testing the Snackbar<\/h2>\n\n\n\n
Once everything is in place, try clicking the button to trigger the Snackbar. You should see the Snackbar with a success message and an optional action button appear at the bottom of the screen. And Logically, if you click on one of the custom action buttons, it will redirect you properly, but you will obviously see a blank page, as the view doesn’t exist.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
In this post, we created a global and custom Snackbar component in Vue 3 using Vuetify and Pinia. We set it up so that it can be easily triggered from anywhere in the app. By managing its state with Pinia, we keep the logic centralized and clean, making the Snackbar reusable across the entire application.<\/p>\n\n\n\n
Feel free to adjust the styling and functionality of the Snackbar to suit your needs. Now you have a flexible, easy-to-use notification system for your Vue 3 project!<\/p>\n","protected":false},"excerpt":{"rendered":"
In this post, we’ll walk through how to implement a Global and Custom Snackbar in Vue 3 with Vuetify and Pinia for state management. We’ll set it up so that you can easily trigger the Snackbar from any component in your app. I. Set Up Your Vue App with Vuetify CLI To start, we\u2019ll create […]<\/p>\n","protected":false},"author":87,"featured_media":33232,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3029],"tags":[3443,437,3032,3442,3034,3035,3358],"type_dbi":[3040,3039,3038,3359],"class_list":["post-35281","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web","tag-global","tag-global-page","tag-pinia","tag-snackbar","tag-vue","tag-vuejs","tag-vuetify","type-pinia","type-vue","type-vuejs","type-vuetify"],"acf":[],"yoast_head":"\nCreating a Global and Custom Snackbar in Vue 3 Using Vuetify and Pinia - dbi Blog<\/title>\n<meta name=\"description\" content=\"Learn how to create a global & Custom Snackbar in Vue 3 using Vuetify and Pinia. This tutorial walks you through setup, state management, and triggering notifications from any component.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dbi-services.com\/blog\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a Global and Custom Snackbar in Vue 3 Using Vuetify and Pinia\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a global & Custom Snackbar in Vue 3 using Vuetify and Pinia. This tutorial walks you through setup, state management, and triggering notifications from any component.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dbi-services.com\/blog\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\/\" \/>\n<meta property=\"og:site_name\" content=\"dbi Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-17T16:25:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-17T16:36:03+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/Logo-Vuejs-e1716299720267.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"180\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Joan Frey\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joan Frey\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\\\/\"},\"author\":{\"name\":\"Joan Frey\",\"@id\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/#\\\/schema\\\/person\\\/c03c47649664fe73b27ce457e99f5b06\"},\"headline\":\"Creating a Global and Custom Snackbar in Vue 3 Using Vuetify and Pinia\",\"datePublished\":\"2024-10-17T16:25:20+00:00\",\"dateModified\":\"2024-10-17T16:36:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\\\/\"},\"wordCount\":455,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2024\\\/05\\\/Logo-Vuejs-e1716299720267.png\",\"keywords\":[\"global\",\"Global page\",\"Pinia\",\"snackbar\",\"vue\",\"vuejs\",\"vuetify\"],\"articleSection\":[\"Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\\\/\",\"url\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\\\/\",\"name\":\"Creating a Global and Custom Snackbar in Vue 3 Using Vuetify and Pinia - dbi Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2024\\\/05\\\/Logo-Vuejs-e1716299720267.png\",\"datePublished\":\"2024-10-17T16:25:20+00:00\",\"dateModified\":\"2024-10-17T16:36:03+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/#\\\/schema\\\/person\\\/c03c47649664fe73b27ce457e99f5b06\"},\"description\":\"Learn how to create a global & Custom Snackbar in Vue 3 using Vuetify and Pinia. This tutorial walks you through setup, state management, and triggering notifications from any component.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2024\\\/05\\\/Logo-Vuejs-e1716299720267.png\",\"contentUrl\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2024\\\/05\\\/Logo-Vuejs-e1716299720267.png\",\"width\":300,\"height\":180,\"caption\":\"Logo-Vuejs\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating a Global and Custom Snackbar in Vue 3 Using Vuetify and Pinia\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/\",\"name\":\"dbi Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/#\\\/schema\\\/person\\\/c03c47649664fe73b27ce457e99f5b06\",\"name\":\"Joan Frey\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g\",\"caption\":\"Joan Frey\"},\"url\":\"https:\\\/\\\/www.dbi-services.com\\\/blog\\\/author\\\/joanfrey\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating a Global and Custom Snackbar in Vue 3 Using Vuetify and Pinia - dbi Blog","description":"Learn how to create a global & Custom Snackbar in Vue 3 using Vuetify and Pinia. This tutorial walks you through setup, state management, and triggering notifications from any component.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dbi-services.com\/blog\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\/","og_locale":"en_US","og_type":"article","og_title":"Creating a Global and Custom Snackbar in Vue 3 Using Vuetify and Pinia","og_description":"Learn how to create a global & Custom Snackbar in Vue 3 using Vuetify and Pinia. This tutorial walks you through setup, state management, and triggering notifications from any component.","og_url":"https:\/\/www.dbi-services.com\/blog\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\/","og_site_name":"dbi Blog","article_published_time":"2024-10-17T16:25:20+00:00","article_modified_time":"2024-10-17T16:36:03+00:00","og_image":[{"width":300,"height":180,"url":"http:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/Logo-Vuejs-e1716299720267.png","type":"image\/png"}],"author":"Joan Frey","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Joan Frey","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.dbi-services.com\/blog\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\/#article","isPartOf":{"@id":"https:\/\/www.dbi-services.com\/blog\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\/"},"author":{"name":"Joan Frey","@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06"},"headline":"Creating a Global and Custom Snackbar in Vue 3 Using Vuetify and Pinia","datePublished":"2024-10-17T16:25:20+00:00","dateModified":"2024-10-17T16:36:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.dbi-services.com\/blog\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\/"},"wordCount":455,"commentCount":0,"image":{"@id":"https:\/\/www.dbi-services.com\/blog\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/Logo-Vuejs-e1716299720267.png","keywords":["global","Global page","Pinia","snackbar","vue","vuejs","vuetify"],"articleSection":["Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.dbi-services.com\/blog\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.dbi-services.com\/blog\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\/","url":"https:\/\/www.dbi-services.com\/blog\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\/","name":"Creating a Global and Custom Snackbar in Vue 3 Using Vuetify and Pinia - dbi Blog","isPartOf":{"@id":"https:\/\/www.dbi-services.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dbi-services.com\/blog\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\/#primaryimage"},"image":{"@id":"https:\/\/www.dbi-services.com\/blog\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/Logo-Vuejs-e1716299720267.png","datePublished":"2024-10-17T16:25:20+00:00","dateModified":"2024-10-17T16:36:03+00:00","author":{"@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06"},"description":"Learn how to create a global & Custom Snackbar in Vue 3 using Vuetify and Pinia. This tutorial walks you through setup, state management, and triggering notifications from any component.","breadcrumb":{"@id":"https:\/\/www.dbi-services.com\/blog\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dbi-services.com\/blog\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dbi-services.com\/blog\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\/#primaryimage","url":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/Logo-Vuejs-e1716299720267.png","contentUrl":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2024\/05\/Logo-Vuejs-e1716299720267.png","width":300,"height":180,"caption":"Logo-Vuejs"},{"@type":"BreadcrumbList","@id":"https:\/\/www.dbi-services.com\/blog\/creating-a-global-snackbar-in-a-vue-3-application-using-vuetify-and-pinia\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.dbi-services.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating a Global and Custom Snackbar in Vue 3 Using Vuetify and Pinia"}]},{"@type":"WebSite","@id":"https:\/\/www.dbi-services.com\/blog\/#website","url":"https:\/\/www.dbi-services.com\/blog\/","name":"dbi Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dbi-services.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/c03c47649664fe73b27ce457e99f5b06","name":"Joan Frey","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1e650cf665b4d44dd186355827c0b049d2f95c8cbb45fd10d4e7cb255be67ecb?s=96&d=mm&r=g","caption":"Joan Frey"},"url":"https:\/\/www.dbi-services.com\/blog\/author\/joanfrey\/"}]}},"_links":{"self":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/35281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/comments?post=35281"}],"version-history":[{"count":15,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/35281\/revisions"}],"predecessor-version":[{"id":35309,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/35281\/revisions\/35309"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/media\/33232"}],"wp:attachment":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/media?parent=35281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/categories?post=35281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/tags?post=35281"},{"taxonomy":"type","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/type_dbi?post=35281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}