diff --git a/kolibri/core/assets/src/composables/__mocks__/useSnackbar.js b/kolibri/core/assets/src/composables/__mocks__/useSnackbar.js
new file mode 100644
index 00000000000..c12bd0c70d6
--- /dev/null
+++ b/kolibri/core/assets/src/composables/__mocks__/useSnackbar.js
@@ -0,0 +1,85 @@
+/**
+ * `useSnackbar` composable function mock.
+ *
+ * If default values are sufficient for tests,
+ * you only need call `jest.mock('<useSnackbar file path>')`
+ * at the top of a test file.
+ *
+ * If you need to override some default values for some tests,
+ * or if you need to inspect the state of the refs during tests,
+ * you can import a helper function `useSnackbarMock` that accepts
+ * an object with values to be overriden and use it together
+ * with  `mockImplementation` as follows:
+ *
+ * ```
+ * // eslint-disable-next-line import/named
+ * import useSnackbar, { useSnackbarMock } from '<useSnackbar file path>';
+ *
+ * jest.mock('<useSnackbar file path>')
+ * describe('describe test', function () {
+ *   let snackbar = { snackbarIsVisible: ref(false) }
+ *
+ *   beforeAll(() => {
+ *     useSnackbar.mockImplementation(() => useSnackbarMock(snackbar)
+ *   })
+ *
+ *   it('the test', () => {
+ *     expect(get(snackbar.snackbarIsVisible)).toEqual(false);
+ *   )
+ * })
+ * ```
+ */
+import { ref } from 'kolibri.lib.vueCompositionApi';
+import { get, set } from '@vueuse/core';
+
+const MOCK_DEFAULTS = {
+  snackbarIsVisible: ref(false),
+  snackbarOptions: ref({
+    text: '',
+    autoDismiss: true,
+  }),
+};
+
+export function useSnackbarMock(overrides = {}) {
+  const mocks = {
+    ...MOCK_DEFAULTS,
+    ...overrides,
+  };
+
+  const createSnackbar = (options = {}) => {
+    // reset
+    set(mocks.snackbarIsVisible, false);
+    set(mocks.snackbarOptions, {});
+
+    // set new options
+    set(mocks.snackbarIsVisible, true);
+
+    // options include text, autoDismiss, duration, actionText, actionCallback,
+    // hideCallback, bottomPosition
+    // if the options are a string, set it as the snackbar text
+    // and default autoDismiss to true
+    if (typeof options === 'string') {
+      set(mocks.snackbarOptions, { text: options, autoDismiss: true });
+    } else {
+      set(mocks.snackbarOptions, options);
+    }
+  };
+
+  const clearSnackbar = () => {
+    set(mocks.snackbarIsVisible, false);
+    set(mocks.snackbarOptions, {});
+  };
+
+  const setSnackbarText = text => {
+    set(mocks.snackbarOptions, { ...get(mocks.snackbarOptions), text });
+  };
+
+  return {
+    createSnackbar,
+    clearSnackbar,
+    setSnackbarText,
+    ...mocks,
+  };
+}
+
+export default jest.fn(() => useSnackbarMock());
diff --git a/kolibri/core/assets/src/composables/useSnackbar.js b/kolibri/core/assets/src/composables/useSnackbar.js
new file mode 100644
index 00000000000..640a496fc02
--- /dev/null
+++ b/kolibri/core/assets/src/composables/useSnackbar.js
@@ -0,0 +1,49 @@
+import { ref } from 'kolibri.lib.vueCompositionApi';
+import { get, set } from '@vueuse/core';
+
+const snackbarIsVisible = ref(false);
+const snackbarOptions = ref({
+  text: '',
+  autoDismiss: true,
+});
+
+export default function useSnackbar() {
+  const createSnackbar = (options = {}) => {
+    // reset
+    set(snackbarIsVisible, false);
+    set(snackbarOptions, {});
+
+    // set new options
+    set(snackbarIsVisible, true);
+
+    // options include text, autoDismiss, duration, actionText, actionCallback,
+    // hideCallback, bottomPosition
+    // if the options are a string, set it as the snackbar text
+    // and default autoDismiss to true
+    if (typeof options === 'string') {
+      set(snackbarOptions, { text: options, autoDismiss: true });
+    } else {
+      set(snackbarOptions, options);
+    }
+  };
+
+  const clearSnackbar = () => {
+    set(snackbarIsVisible, false);
+    set(snackbarOptions, {});
+  };
+
+  const setSnackbarText = text => {
+    set(snackbarOptions, { ...get(snackbarOptions), text });
+  };
+
+  return {
+    // state
+    snackbarIsVisible,
+    snackbarOptions,
+
+    // mutators
+    createSnackbar,
+    clearSnackbar,
+    setSnackbarText,
+  };
+}
diff --git a/kolibri/core/assets/src/core-app/apiSpec.js b/kolibri/core/assets/src/core-app/apiSpec.js
index c3cbfb29f37..07d4a82d6d2 100644
--- a/kolibri/core/assets/src/core-app/apiSpec.js
+++ b/kolibri/core/assets/src/core-app/apiSpec.js
@@ -91,6 +91,7 @@ import NotificationsRoot from '../views/NotificationsRoot';
 import useMinimumKolibriVersion from '../composables/useMinimumKolibriVersion';
 import useUserSyncStatus from '../composables/useUserSyncStatus';
 import useUser from '../composables/useUser';
+import useSnackbar from '../composables/useSnackbar';
 import { registerNavItem } from '../composables/useNav';
 import useNow from '../composables/useNow';
 
@@ -202,6 +203,7 @@ export default {
       useNow,
       useUser,
       useUserSyncStatus,
+      useSnackbar,
     },
   },
   resources,
diff --git a/kolibri/core/assets/src/disconnection.js b/kolibri/core/assets/src/disconnection.js
index df53e9de210..9eb2ebb47d8 100644
--- a/kolibri/core/assets/src/disconnection.js
+++ b/kolibri/core/assets/src/disconnection.js
@@ -1,5 +1,6 @@
 import { createTranslator } from 'kolibri.utils.i18n';
 import { get } from '@vueuse/core';
+import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
 import useConnection from './composables/useConnection';
 
 export const trs = createTranslator('DisconnectionSnackbars', {
@@ -24,8 +25,9 @@ export const trs = createTranslator('DisconnectionSnackbars', {
   },
 });
 
-export function createTryingToReconnectSnackbar(store) {
-  store.commit('CORE_CREATE_SNACKBAR', {
+export function createTryingToReconnectSnackbar() {
+  const { createSnackbar } = useSnackbar();
+  createSnackbar({
     text: trs.$tr('tryingToReconnect'),
     backdrop: true,
     autoDismiss: false,
@@ -42,7 +44,8 @@ export function createDisconnectedSnackbar(store, beatCallback) {
   const { reconnectTime } = useConnection();
   setDynamicReconnectTime(get(reconnectTime));
   // create snackbar
-  store.commit('CORE_CREATE_SNACKBAR', {
+  const { createSnackbar, setSnackbarText } = useSnackbar();
+  createSnackbar({
     text: generateDisconnectedSnackbarText(),
     actionText: trs.$tr('tryNow'),
     actionCallback: beatCallback,
@@ -53,7 +56,7 @@ export function createDisconnectedSnackbar(store, beatCallback) {
   // start timeout
   timer = setInterval(() => {
     setDynamicReconnectTime(dynamicReconnectTime - 1);
-    store.commit('CORE_SET_SNACKBAR_TEXT', generateDisconnectedSnackbarText());
+    setSnackbarText(generateDisconnectedSnackbarText());
   }, 1000);
 }
 
@@ -73,7 +76,8 @@ function clearTimer() {
   }
 }
 
-export function createReconnectedSnackbar(store) {
+export function createReconnectedSnackbar() {
   clearTimer();
-  store.dispatch('createSnackbar', trs.$tr('successfullyReconnected'));
+  const { createSnackbar } = useSnackbar();
+  createSnackbar(trs.$tr('successfullyReconnected'));
 }
diff --git a/kolibri/core/assets/src/heartbeat.js b/kolibri/core/assets/src/heartbeat.js
index 800957d6445..b10282cb845 100644
--- a/kolibri/core/assets/src/heartbeat.js
+++ b/kolibri/core/assets/src/heartbeat.js
@@ -251,7 +251,7 @@ export class HeartBeat {
   _setConnected() {
     set(this._connection.connected, true);
     set(this._connection.reconnectTime, null);
-    createReconnectedSnackbar(store);
+    createReconnectedSnackbar();
     if (get(this._connection.reloadOnReconnect)) {
       // If we were disconnected while loading, we need to reload the page
       // to ensure that we are in a consistent state.
diff --git a/kolibri/core/assets/src/mixins/commonCoreStrings.js b/kolibri/core/assets/src/mixins/commonCoreStrings.js
index a05091a5154..67bdae9bfb5 100644
--- a/kolibri/core/assets/src/mixins/commonCoreStrings.js
+++ b/kolibri/core/assets/src/mixins/commonCoreStrings.js
@@ -3,6 +3,7 @@ import camelCase from 'lodash/camelCase';
 import get from 'lodash/get';
 import invert from 'lodash/invert';
 import * as METADATA from 'kolibri.coreVue.vuex.constants';
+import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
 import notificationStrings from './notificationStrings';
 
 export const coreStrings = createTranslator('CommonCoreStrings', {
@@ -1609,14 +1610,15 @@ export default {
      * `CORE_CREATE_SNACKBAR` mutation.
      */
     showSnackbarNotification(key, args, coreCreateSnackbarArgs) {
+      const { createSnackbar } = useSnackbar();
       const text = notificationStrings.$tr(key, args || {});
       if (coreCreateSnackbarArgs) {
-        this.$store.commit('CORE_CREATE_SNACKBAR', {
+        createSnackbar({
           ...coreCreateSnackbarArgs,
           text,
         });
       } else {
-        this.$store.dispatch('createSnackbar', text);
+        createSnackbar(text);
       }
     },
   },
diff --git a/kolibri/core/assets/src/state/modules/core/actions.js b/kolibri/core/assets/src/state/modules/core/actions.js
index 80321be670c..643aa911d36 100644
--- a/kolibri/core/assets/src/state/modules/core/actions.js
+++ b/kolibri/core/assets/src/state/modules/core/actions.js
@@ -276,15 +276,6 @@ export function fetchPoints(store) {
   }
 }
 
-// Creates a snackbar that automatically dismisses and has no action buttons.
-export function createSnackbar(store, text) {
-  store.commit('CORE_CREATE_SNACKBAR', { text, autoDismiss: true });
-}
-
-export function clearSnackbar(store) {
-  store.commit('CORE_CLEAR_SNACKBAR');
-}
-
 export function loading(store) {
   return new Promise(resolve => {
     store.commit('CORE_SET_PAGE_LOADING', true);
diff --git a/kolibri/core/assets/src/state/modules/core/index.js b/kolibri/core/assets/src/state/modules/core/index.js
index 87c56477b58..8a597501e83 100644
--- a/kolibri/core/assets/src/state/modules/core/index.js
+++ b/kolibri/core/assets/src/state/modules/core/index.js
@@ -1,5 +1,4 @@
 import sessionModule from '../session';
-import snackbarModule from '../snackbar';
 import * as getters from './getters';
 import * as actions from './actions';
 import mutations from './mutations';
@@ -29,6 +28,5 @@ export default {
   mutations,
   modules: {
     session: sessionModule,
-    snackbar: snackbarModule,
   },
 };
diff --git a/kolibri/core/assets/src/state/modules/snackbar.js b/kolibri/core/assets/src/state/modules/snackbar.js
deleted file mode 100644
index 9a853d985f3..00000000000
--- a/kolibri/core/assets/src/state/modules/snackbar.js
+++ /dev/null
@@ -1,36 +0,0 @@
-export default {
-  state: {
-    isVisible: false,
-    options: {
-      text: '',
-      autoDismiss: true,
-    },
-  },
-  getters: {
-    snackbarIsVisible(state) {
-      return state.isVisible;
-    },
-    snackbarOptions(state) {
-      return state.options;
-    },
-  },
-  mutations: {
-    CORE_CREATE_SNACKBAR(state, snackbarOptions = {}) {
-      // reset
-      state.isVisible = false;
-      state.options = {};
-      // set new options
-      state.isVisible = true;
-      // options include text, autoDismiss, duration, actionText, actionCallback,
-      // hideCallback, bottomPosition
-      state.options = snackbarOptions;
-    },
-    CORE_CLEAR_SNACKBAR(state) {
-      state.isVisible = false;
-      state.options = {};
-    },
-    CORE_SET_SNACKBAR_TEXT(state, text) {
-      state.options.text = text;
-    },
-  },
-};
diff --git a/kolibri/core/assets/src/views/CoreSnackbar/index.vue b/kolibri/core/assets/src/views/CoreSnackbar/index.vue
index 6daa93d4fd5..f6ef459fe63 100644
--- a/kolibri/core/assets/src/views/CoreSnackbar/index.vue
+++ b/kolibri/core/assets/src/views/CoreSnackbar/index.vue
@@ -40,9 +40,9 @@
 
 <script>
 
-  import { mapActions } from 'vuex';
   import UiSnackbar from 'kolibri-design-system/lib/keen/UiSnackbar.vue';
   import Backdrop from 'kolibri.coreVue.components.Backdrop';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
 
   /* Snackbars are used to display notification. */
   export default {
@@ -51,6 +51,10 @@
       Backdrop,
       UiSnackbar,
     },
+    setup() {
+      const { clearSnackbar } = useSnackbar();
+      return { clearSnackbar };
+    },
     props: {
       /* Text of notification to be displayed */
       text: {
@@ -119,7 +123,6 @@
       }
     },
     methods: {
-      ...mapActions(['clearSnackbar']),
       hideSnackbar() {
         this.isVisible = false;
         this.$emit('hide');
diff --git a/kolibri/core/assets/src/views/sync/SelectDeviceModalGroup/index.vue b/kolibri/core/assets/src/views/sync/SelectDeviceModalGroup/index.vue
index dfc1ae8d4b9..fa8e53ffbe5 100644
--- a/kolibri/core/assets/src/views/sync/SelectDeviceModalGroup/index.vue
+++ b/kolibri/core/assets/src/views/sync/SelectDeviceModalGroup/index.vue
@@ -28,6 +28,7 @@
 
 <script>
 
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import AddDeviceForm from './AddDeviceForm';
   import SelectDeviceForm from './SelectDeviceForm';
 
@@ -37,6 +38,10 @@
       AddDeviceForm,
       SelectDeviceForm,
     },
+    setup() {
+      const { createSnackbar } = useSnackbar();
+      return { createSnackbar };
+    },
     props: {
       // Channel filter only needed on ManageContentPage/SelectNetworkDeviceModal
       filterByChannelId: {
@@ -74,9 +79,6 @@
       };
     },
     methods: {
-      createSnackbar(args) {
-        this.$store.dispatch('createSnackbar', args);
-      },
       goToAddAddress() {
         this.addedAddressId = '';
         this.addingAddress = true;
diff --git a/kolibri/core/assets/test/heartbeat.spec.js b/kolibri/core/assets/test/heartbeat.spec.js
index bf1abc7e47c..f189a088e74 100644
--- a/kolibri/core/assets/test/heartbeat.spec.js
+++ b/kolibri/core/assets/test/heartbeat.spec.js
@@ -3,6 +3,8 @@ import coreStore from 'kolibri.coreVue.vuex.store';
 import redirectBrowser from 'kolibri.utils.redirectBrowser';
 import * as serverClock from 'kolibri.utils.serverClock';
 import { get, set } from '@vueuse/core';
+import useSnackbar, { useSnackbarMock } from 'kolibri.coreVue.composables.useSnackbar';
+import { ref } from 'kolibri.lib.vueCompositionApi';
 import { HeartBeat } from '../src/heartbeat.js';
 import disconnectionErrorCodes from '../src/disconnectionErrorCodes';
 import { trs } from '../src/disconnection';
@@ -13,6 +15,7 @@ jest.mock('kolibri.lib.logging');
 jest.mock('kolibri.utils.redirectBrowser');
 jest.mock('kolibri.urls');
 jest.mock('lockr');
+jest.mock('kolibri.coreVue.composables.useSnackbar');
 
 coreStore.registerModule('core', coreModule);
 
@@ -161,7 +164,17 @@ describe('HeartBeat', function () {
     });
   });
   describe('monitorDisconnect method', function () {
-    let heartBeat;
+    let heartBeat, snackbar;
+    beforeAll(function () {
+      snackbar = {
+        snackbarIsVisible: ref(false),
+        snackbarOptions: ref({
+          text: '',
+          autoDismiss: true,
+        }),
+      };
+      useSnackbar.mockImplementation(() => useSnackbarMock(snackbar));
+    });
     beforeEach(function () {
       heartBeat = new HeartBeat();
       jest.spyOn(heartBeat, '_wait').mockImplementation(() => {});
@@ -174,9 +187,9 @@ describe('HeartBeat', function () {
       expect(get(heartBeat._connection.reconnectTime)).not.toEqual(null);
     });
     it('should set current snackbar to disconnected', function () {
-      expect(coreStore.getters.snackbarIsVisible).toEqual(true);
+      expect(get(snackbar.snackbarIsVisible)).toEqual(true);
       expect(
-        coreStore.getters.snackbarOptions.text.startsWith(
+        get(snackbar.snackbarOptions).text.startsWith(
           'Disconnected from server. Will try to reconnect in',
         ),
       ).toEqual(true);
@@ -267,13 +280,22 @@ describe('HeartBeat', function () {
         });
     });
     describe('when not connected', function () {
+      let snackbar;
       beforeEach(function () {
+        snackbar = {
+          snackbarIsVisible: ref(false),
+          snackbarOptions: ref({
+            text: '',
+            autoDismiss: true,
+          }),
+        };
+        useSnackbar.mockImplementation(() => useSnackbarMock(snackbar));
         heartBeat.monitorDisconnect();
       });
       it('should set snackbar to trying to reconnect', function () {
         heartBeat._checkSession();
-        expect(coreStore.getters.snackbarIsVisible).toEqual(true);
-        expect(coreStore.getters.snackbarOptions.text).toEqual(trs.$tr('tryingToReconnect'));
+        expect(get(snackbar.snackbarIsVisible)).toEqual(true);
+        expect(get(snackbar.snackbarOptions).text).toEqual(trs.$tr('tryingToReconnect'));
       });
       disconnectionErrorCodes
         .filter(code => code !== 0)
@@ -286,9 +308,9 @@ describe('HeartBeat', function () {
             });
             heartBeat._wait = jest.fn();
             return heartBeat._checkSession().finally(() => {
-              expect(coreStore.getters.snackbarIsVisible).toEqual(true);
+              expect(get(snackbar.snackbarIsVisible)).toEqual(true);
               expect(
-                coreStore.getters.snackbarOptions.text.startsWith(
+                get(snackbar.snackbarOptions).text.startsWith(
                   'Disconnected from server. Will try to reconnect in',
                 ),
               ).toEqual(true);
@@ -299,9 +321,9 @@ describe('HeartBeat', function () {
         jest.spyOn(heartBeat, 'monitorDisconnect');
         mock.put(/.*/, () => Promise.reject(new Error()));
         return heartBeat._checkSession().finally(() => {
-          expect(coreStore.getters.snackbarIsVisible).toEqual(true);
+          expect(get(snackbar.snackbarIsVisible)).toEqual(true);
           expect(
-            coreStore.getters.snackbarOptions.text.startsWith(
+            get(snackbar.snackbarOptions).text.startsWith(
               'Disconnected from server. Will try to reconnect in',
             ),
           ).toEqual(true);
@@ -326,10 +348,8 @@ describe('HeartBeat', function () {
         });
         it('should set snackbar to reconnected', function () {
           return heartBeat._checkSession().finally(() => {
-            expect(coreStore.getters.snackbarIsVisible).toEqual(true);
-            expect(coreStore.getters.snackbarOptions.text).toEqual(
-              trs.$tr('successfullyReconnected'),
-            );
+            expect(get(snackbar.snackbarIsVisible)).toEqual(true);
+            expect(get(snackbar.snackbarOptions).text).toEqual(trs.$tr('successfullyReconnected'));
           });
         });
         it('should set connected to true', function () {
diff --git a/kolibri/plugins/coach/assets/src/app.js b/kolibri/plugins/coach/assets/src/app.js
index b9ef0883bc5..eb9a4c4dac7 100644
--- a/kolibri/plugins/coach/assets/src/app.js
+++ b/kolibri/plugins/coach/assets/src/app.js
@@ -4,6 +4,7 @@ import redirectBrowser from 'kolibri.utils.redirectBrowser';
 import { setChannelInfo } from 'kolibri.coreVue.vuex.actions';
 import router from 'kolibri.coreVue.router';
 import KolibriApp from 'kolibri_app';
+import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
 import { PageNames } from './constants';
 import routes from './routes';
 import pluginModule from './modules/pluginModule';
@@ -26,6 +27,7 @@ class CoachToolsModule extends KolibriApp {
     return pluginModule;
   }
   ready() {
+    const { snackbarIsVisibile, clearSnackbar } = useSnackbar();
     const { isLearnerOnlyImport } = useUser();
     router.beforeEach((to, from, next) => {
       if (get(isLearnerOnlyImport)) {
@@ -54,8 +56,8 @@ class CoachToolsModule extends KolibriApp {
 
       // Clear the snackbar at every navigation to prevent it from re-appearing
       // when the next page component mounts.
-      if (this.store.state.core.snackbar.isVisible && !skipLoading.includes(to.name)) {
-        this.store.dispatch('clearSnackbar');
+      if (get(snackbarIsVisibile) && !skipLoading.includes(to.name)) {
+        clearSnackbar();
       }
 
       this.store.commit('SET_PAGE_NAME', to.name);
diff --git a/kolibri/plugins/coach/assets/src/modules/lessonsRoot/actions.js b/kolibri/plugins/coach/assets/src/modules/lessonsRoot/actions.js
index 18797d29542..4529a43b8ee 100644
--- a/kolibri/plugins/coach/assets/src/modules/lessonsRoot/actions.js
+++ b/kolibri/plugins/coach/assets/src/modules/lessonsRoot/actions.js
@@ -1,6 +1,7 @@
 import { LessonResource } from 'kolibri.resources';
 import router from 'kolibri.coreVue.router';
 import { createTranslator } from 'kolibri.utils.i18n';
+import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
 import { lessonSummaryLink } from '../../routes/planLessonsRouterUtils';
 
 const translator = createTranslator('LessonRootActionTexts', {
@@ -63,7 +64,8 @@ export function createLesson(store, { classId, payload }) {
       data,
     })
       .then(newLesson => {
-        store.dispatch('createSnackbar', translator.$tr('newLessonCreated'), { root: true });
+        const { createSnackbar } = useSnackbar();
+        createSnackbar(translator.$tr('newLessonCreated'));
         // Update the class summary now that we have a new lesson in town!
         store.dispatch('classSummary/refreshClassSummary', null, { root: true }).then(() => {
           router.push(lessonSummaryLink({ classId, lessonId: newLesson.id }));
diff --git a/kolibri/plugins/coach/assets/src/views/common/LessonStatus.vue b/kolibri/plugins/coach/assets/src/views/common/LessonStatus.vue
index 5d53ed67f65..72e2d9defd3 100644
--- a/kolibri/plugins/coach/assets/src/views/common/LessonStatus.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/LessonStatus.vue
@@ -137,6 +137,7 @@
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import { LESSON_VISIBILITY_MODAL_DISMISSED } from 'kolibri.coreVue.vuex.constants';
   import Lockr from 'lockr';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import Recipients from './Recipients';
   import { coachStringsMixin } from './commonCoachStrings';
 
@@ -144,6 +145,10 @@
     name: 'LessonStatus',
     components: { Recipients },
     mixins: [coachStringsMixin, commonCoreStrings],
+    setup() {
+      const { createSnackbar } = useSnackbar();
+      return { createSnackbar };
+    },
     props: {
       className: {
         type: String,
@@ -215,7 +220,7 @@
         return promise.then(() => {
           this.$store.dispatch('lessonSummary/updateCurrentLesson', this.lesson.id);
           this.$store.dispatch('classSummary/refreshClassSummary');
-          this.$store.dispatch('createSnackbar', snackbarMessage);
+          this.createSnackbar(snackbarMessage);
         });
       },
       toggleModal(lesson) {
diff --git a/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue b/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
index 564dac244ef..696fd3baeb6 100644
--- a/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/QuizStatus.vue
@@ -290,6 +290,7 @@
   import { QUIZ_REPORT_VISIBILITY_MODAL_DISMISSED } from 'kolibri.coreVue.vuex.constants';
   import { mapActions } from 'vuex';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import { coachStringsMixin } from './commonCoachStrings';
   import Score from './Score';
   import Recipients from './Recipients';
@@ -302,7 +303,8 @@
     mixins: [coachStringsMixin, commonCoreStrings],
     setup() {
       const { sectionOrderLabel$ } = enhancedQuizManagementStrings;
-      return { sectionOrderLabel$ };
+      const { createSnackbar } = useSnackbar();
+      return { sectionOrderLabel$, createSnackbar };
     },
     props: {
       className: {
@@ -389,7 +391,7 @@
         return promise
           .then(data => {
             this.showConfirmationModal = false;
-            this.$store.dispatch('createSnackbar', this.coachString('quizOpenedMessage'));
+            this.createSnackbar(this.coachString('quizOpenedMessage'));
             if (data.id !== this.$route.params.quizId) {
               this.$router.replace({
                 name: this.$route.name,
@@ -403,7 +405,7 @@
             }
           })
           .catch(() => {
-            this.$store.dispatch('createSnackbar', this.coachString('quizFailedToOpenMessage'));
+            this.createSnackbar(this.coachString('quizFailedToOpenMessage'));
           });
       },
       handleCloseQuiz() {
@@ -419,10 +421,10 @@
           .then(() => {
             this.$store.dispatch('classSummary/refreshClassSummary');
             this.showCancellationModal = false;
-            this.$store.dispatch('createSnackbar', this.coachString('quizClosedMessage'));
+            this.createSnackbar(this.coachString('quizClosedMessage'));
           })
           .catch(() => {
-            this.$store.dispatch('createSnackbar', this.coachString('quizFailedToCloseMessage'));
+            this.createSnackbar(this.coachString('quizFailedToCloseMessage'));
           });
       },
       // modal about quiz report size should only exist of LODs exist in the class
@@ -473,7 +475,7 @@
           this.showConfirmationModal = false;
           this.showRemoveReportVisibilityModal = false;
           this.showMakeReportVisibleModal = false;
-          this.$store.dispatch('createSnackbar', snackbarMessage);
+          this.createSnackbar(snackbarMessage);
         });
       },
     },
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CoachExamsPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/CoachExamsPage/index.vue
index 7660bb47b3c..9a0c7c76b56 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CoachExamsPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CoachExamsPage/index.vue
@@ -175,6 +175,7 @@
   import plugin_data from 'plugin_data';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import { mapGetters } from 'kolibri.lib.vuex';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import { PageNames } from '../../../constants';
   import { PLAN_TABS_ID, PlanTabs } from '../../../constants/tabsConstants';
   import { coachStrings } from '../../common/commonCoachStrings';
@@ -194,6 +195,7 @@
     },
     mixins: [commonCoreStrings],
     setup() {
+      const { createSnackbar } = useSnackbar();
       const { classId, initClassInfo, refreshClassSummary } = useCoreCoach();
       const { quizzes, fetchQuizSizes } = useQuizzes();
       const store = getCurrentInstance().proxy.$store;
@@ -280,6 +282,7 @@
         newQuizAction$,
         filterQuizStatus$,
         quizClosedLabel$,
+        createSnackbar,
       };
     },
     computed: {
@@ -356,7 +359,7 @@
     },
     mounted() {
       if (this.$route.query.snackbar) {
-        this.$store.dispatch('createSnackbar', this.$route.query.snackbar);
+        this.createSnackbar(this.$route.query.snackbar);
       }
     },
     methods: {
@@ -374,10 +377,10 @@
           .then(() => {
             this.refreshClassSummary();
             this.showOpenConfirmationModal = false;
-            this.$store.dispatch('createSnackbar', this.quizOpenedMessage$());
+            this.createSnackbar(this.quizOpenedMessage$());
           })
           .catch(() => {
-            this.$store.dispatch('createSnackbar', this.quizFailedToOpenMessage$());
+            this.createSnackbar(this.quizFailedToOpenMessage$());
           });
       },
       handleCloseQuiz(quizId) {
@@ -393,10 +396,10 @@
           .then(() => {
             this.refreshClassSummary();
             this.showCloseConfirmationModal = false;
-            this.$store.dispatch('createSnackbar', this.quizClosedMessage$());
+            this.createSnackbar(this.quizClosedMessage$());
           })
           .catch(() => {
-            this.$store.dispatch('createSnackbar', this.quizFailedToCloseMessage$());
+            this.createSnackbar(this.quizFailedToCloseMessage$());
           });
       },
       handleSelect({ value }) {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
index 8d2e5a31c42..d11055f6be7 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreateQuizSection.vue
@@ -340,6 +340,7 @@
   import AccordionContainer from 'kolibri-common/components/AccordionContainer';
   import useAccordion from 'kolibri-common/components/useAccordion';
   import FocusTrap from 'kolibri.coreVue.components.FocusTrap';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
   import commonCoach from '../../common';
   import { PageNames } from '../../../constants';
@@ -420,6 +421,8 @@
       const { moveUpOne, moveDownOne } = useDrag();
       const dragActive = ref(false);
 
+      const { createSnackbar } = useSnackbar();
+
       return {
         canCollapseAll,
         canExpandAll,
@@ -475,6 +478,8 @@
         replacementQuestionPool,
         activeQuestions,
         selectedActiveQuestions,
+
+        createSnackbar,
       };
     },
     data() {
@@ -581,10 +586,7 @@
         this.setActiveSection(newIndex);
         this.removeSection(this.activeSectionIndex);
         this.$nextTick(() => {
-          this.$store.dispatch(
-            'createSnackbar',
-            this.sectionDeletedNotification$({ section_title }),
-          );
+          this.createSnackbar(this.sectionDeletedNotification$({ section_title }));
           this.focusActiveSectionTab();
         });
         this.showDeleteConfirmation = false;
@@ -686,12 +688,7 @@
       deleteQuestions() {
         const count = this.selectedActiveQuestions.length;
         this.deleteActiveSelectedQuestions();
-        this.$store.dispatch(
-          'createSnackbar',
-          this.questionsDeletedNotification$({
-            count,
-          }),
-        );
+        this.createSnackbar(this.questionsDeletedNotification$({ count }));
       },
     },
   };
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue
index 90e11d69cdd..572533788bb 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue
@@ -156,6 +156,7 @@
   import AccordionItem from 'kolibri-common/components/AccordionItem';
   import AccordionContainer from 'kolibri-common/components/AccordionContainer';
   import useAccordion from 'kolibri-common/components/useAccordion';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
   import { PageNames } from '../../../constants/index';
 
@@ -167,6 +168,8 @@
     },
     mixins: [commonCoreStrings],
     setup(_, context) {
+      const { createSnackbar } = useSnackbar();
+
       const router = getCurrentInstance().proxy.$router;
 
       const {
@@ -229,7 +232,7 @@
             sectionIndex: this.$route.params.sectionIndex,
           },
         });
-        this.$store.dispatch('createSnackbar', numberOfQuestionsReplaced$({ count }));
+        createSnackbar(numberOfQuestionsReplaced$({ count }));
       }
 
       function confirmReplacement() {
@@ -270,6 +273,8 @@
         useAccordion(replacementQuestionPool);
 
       return {
+        createSnackbar,
+
         toggle,
         isExpanded,
         collapseAll,
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
index 615451a28ad..0fac7600366 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
@@ -133,6 +133,7 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { MAX_QUESTIONS_PER_QUIZ_SECTION } from 'kolibri.coreVue.vuex.constants';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import { PageNames } from '../../../constants/index';
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
   import useDrag from './useDrag.js';
@@ -144,6 +145,7 @@
       const router = getCurrentInstance().proxy.$router;
       const store = getCurrentInstance().proxy.$store;
       const route = computed(() => store.state.route);
+      const { createSnackbar } = useSnackbar();
 
       const {
         sectionSettings$,
@@ -210,7 +212,7 @@
             sectionIndex: newIndex,
           },
         });
-        store.dispatch('createSnackbar', sectionDeletedNotification$({ section_title }));
+        createSnackbar(sectionDeletedNotification$({ section_title }));
       }
 
       function handleDeleteSection() {
@@ -340,6 +342,8 @@
         randomizedOptionDescription$,
         fixedLabel$,
         fixedOptionDescription$,
+
+        createSnackbar,
       };
     },
     computed: {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
index ded48d5dbdd..6a295164ca1 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -118,6 +118,7 @@
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import { PageNames } from '../../../constants';
   import CoachImmersivePage from '../../CoachImmersivePage';
   import useQuizCreation from '../../../composables/useQuizCreation';
@@ -138,6 +139,7 @@
     mixins: [commonCoreStrings],
     setup() {
       const closeConfirmationToRoute = ref(null);
+      const { createSnackbar } = useSnackbar();
       const { classId, groups } = useCoreCoach();
       const {
         quizHasChanged,
@@ -187,6 +189,7 @@
         fixedLabel$,
         randomizedSectionOptionDescription$,
         fixedSectionOptionDescription$,
+        createSnackbar,
       };
     },
     provide() {
@@ -332,7 +335,7 @@
         this.saveQuiz()
           .then(exam => {
             this.$refs.detailsModal.handleSubmitSuccess();
-            this.$store.dispatch('createSnackbar', this.changesSavedSuccessfully$());
+            this.createSnackbar(this.changesSavedSuccessfully$());
             if (close) {
               this.$router.replace({
                 name: PageNames.EXAMS,
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonEditDetailsPage/EditDetailsResourceListTable.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonEditDetailsPage/EditDetailsResourceListTable.vue
index 8d244126e8f..dbfd506e130 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonEditDetailsPage/EditDetailsResourceListTable.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonEditDetailsPage/EditDetailsResourceListTable.vue
@@ -101,7 +101,7 @@
 
 <script>
 
-  import { mapActions, mapState } from 'vuex';
+  import { mapState } from 'vuex';
   import DragSortWidget from 'kolibri.coreVue.components.DragSortWidget';
   import DragContainer from 'kolibri.coreVue.components.DragContainer';
   import DragHandle from 'kolibri.coreVue.components.DragHandle';
@@ -109,6 +109,7 @@
   import ContentIcon from 'kolibri.coreVue.components.ContentIcon';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import CoachContentLabel from 'kolibri.coreVue.components.CoachContentLabel';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import { coachStrings } from '../../common/commonCoachStrings';
 
   // This is a simplified version of ResourceListTable that is supposed to work
@@ -125,9 +126,12 @@
     },
     mixins: [commonCoreStrings],
     setup() {
+      const { createSnackbar, clearSnackbar } = useSnackbar();
       const { noResourcesInLessonLabel$ } = coachStrings;
       return {
         noResourcesInLessonLabel$,
+        createSnackbar,
+        clearSnackbar,
       };
     },
     props: {
@@ -184,7 +188,6 @@
       },
     },
     methods: {
-      ...mapActions(['clearSnackbar']),
       emitUpdatedResources(resources) {
         this.$emit('update:resources', resources);
       },
@@ -203,7 +206,7 @@
         // Need to wait for the parent to update the resources prop
         this.$nextTick(() => {
           this.firstRemovalTitle = title;
-          this.$store.commit('CORE_CREATE_SNACKBAR', {
+          this.createSnackbar({
             text: this.removalMessage,
             autoDismiss: true,
             duration: 5000,
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonEditDetailsPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonEditDetailsPage/index.vue
index 47f98067995..8b71a6a5640 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonEditDetailsPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonEditDetailsPage/index.vue
@@ -37,6 +37,7 @@
   import { LessonResource } from 'kolibri.resources';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import useUser from 'kolibri.coreVue.composables.useUser';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import { coachStringsMixin } from '../../common/commonCoachStrings';
   import CoachImmersivePage from '../../CoachImmersivePage';
   import AssignmentDetailsModal from '../assignments/AssignmentDetailsModal';
@@ -51,8 +52,13 @@
     },
     mixins: [coachStringsMixin, commonCoreStrings],
     setup() {
+      const { createSnackbar } = useSnackbar();
       const { isSuperuser } = useUser();
-      return { isSuperuser };
+
+      return {
+        createSnackbar,
+        isSuperuser,
+      };
     },
     props: {
       showResourcesTable: {
@@ -155,7 +161,7 @@
           })
           .catch(() => {
             this.disabled = false;
-            this.$store.dispatch('createSnackbar', this.$tr('submitErrorMessage'));
+            this.createSnackbar(this.$tr('submitErrorMessage'));
           });
       },
     },
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue
index adfc0c86ce5..26aed6f1373 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue
@@ -118,6 +118,7 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import useUser from 'kolibri.coreVue.composables.useUser';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import commonCoach from '../../common';
   import CoachAppBarPage from '../../CoachAppBarPage';
   import CoachImmersivePage from '../../CoachImmersivePage';
@@ -151,9 +152,12 @@
     setup() {
       const { windowIsSmall } = useKResponsiveWindow();
       const { getUserPermissions } = useUser();
+      const { createSnackbar, clearSnackbar } = useSnackbar();
       return {
         windowIsSmall,
         getUserPermissions,
+        createSnackbar,
+        clearSnackbar,
       };
     },
     data() {
@@ -371,7 +375,6 @@
       });
     },
     methods: {
-      ...mapActions(['createSnackbar', 'clearSnackbar']),
       ...mapActions('lessonSummary', ['saveLessonResources', 'addToResourceCache']),
       ...mapActions('lessonSummary/resources', ['fetchAdditionalSearchResults']),
       ...mapMutations('lessonSummary', {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonSummaryPage/ManageLessonModals.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonSummaryPage/ManageLessonModals.vue
index e232380a453..36773bf3ae6 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonSummaryPage/ManageLessonModals.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonSummaryPage/ManageLessonModals.vue
@@ -32,6 +32,7 @@
   import { mapState } from 'vuex';
   import { LessonResource } from 'kolibri.resources';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import AssignmentCopyModal from '../../plan/assignments/AssignmentCopyModal';
   import AssignmentDeleteModal from '../../plan/assignments/AssignmentDeleteModal';
   import { AssignmentActions } from '../../../constants/assignmentsConstants';
@@ -44,6 +45,10 @@
       AssignmentDeleteModal,
     },
     mixins: [coachStringsMixin, commonCoreStrings],
+    setup() {
+      const { createSnackbar, clearSnackbar } = useSnackbar();
+      return { createSnackbar, clearSnackbar };
+    },
     props: {
       // Should be 'COPY' or 'DELETE'
       currentAction: {
@@ -96,14 +101,14 @@
           .catch(error => {
             const caughtErrors = CatchErrors(error, [ERROR_CONSTANTS.UNIQUE]);
             if (caughtErrors) {
-              this.$store.commit('CORE_CREATE_SNACKBAR', {
+              this.createSnackbar({
                 text: this.$tr('uniqueTitleError', {
                   title,
                   className: classroomName,
                 }),
                 autoDismiss: false,
                 actionText: this.coreString('closeAction'),
-                actionCallback: () => this.$store.commit('CORE_CLEAR_SNACKBAR'),
+                actionCallback: () => this.clearSnackbar(),
               });
             } else {
               this.$store.dispatch('handleApiError', { error });
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonSummaryPage/ResourceListTable.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonSummaryPage/ResourceListTable.vue
index 2334d228686..f54d527a464 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonSummaryPage/ResourceListTable.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonSummaryPage/ResourceListTable.vue
@@ -110,6 +110,7 @@
   import ContentIcon from 'kolibri.coreVue.components.ContentIcon';
   import CoachContentLabel from 'kolibri.coreVue.components.CoachContentLabel';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
 
   const removalSnackbarTime = 5000;
 
@@ -124,6 +125,10 @@
       ContentIcon,
     },
     mixins: [commonCoreStrings],
+    setup() {
+      const { clearSnackbar } = useSnackbar();
+      return { clearSnackbar };
+    },
     data() {
       return {
         workingResourcesBackup: [...this.$store.state.lessonSummary.workingResources],
@@ -150,7 +155,6 @@
       },
     },
     methods: {
-      ...mapActions(['clearSnackbar']),
       ...mapActions('lessonSummary', [
         'saveLessonResources',
         'updateCurrentLesson',
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue
index e23259b6d21..02b7d555eda 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue
@@ -176,6 +176,7 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import useKShow from 'kolibri-design-system/lib/composables/useKShow';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import CoachAppBarPage from '../../CoachAppBarPage';
   import { LessonsPageNames } from '../../../constants/lessonsConstants';
   import { PLAN_TABS_ID, PlanTabs } from '../../../constants/tabsConstants';
@@ -197,7 +198,8 @@
     setup() {
       const { show } = useKShow();
       const { lessonsAreLoading } = useLessons();
-      return { show, lessonsAreLoading };
+      const { createSnackbar } = useSnackbar();
+      return { show, lessonsAreLoading, createSnackbar };
     },
     data() {
       return {
@@ -342,7 +344,7 @@
             Vue.delete(this.updatingVisibilityLessons, lesson.id);
             // slightly delay to sync a bit better with the toggle loader
             setTimeout(() => {
-              this.$store.dispatch('createSnackbar', snackbarMessage);
+              this.createSnackbar(snackbarMessage);
             }, 1000);
           })
           .catch(() => {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/PlanLessonSelectionContentPreview.vue b/kolibri/plugins/coach/assets/src/views/plan/PlanLessonSelectionContentPreview.vue
index 200a983d8e8..3ca1c96ce36 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/PlanLessonSelectionContentPreview.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/PlanLessonSelectionContentPreview.vue
@@ -27,6 +27,7 @@
   import { mapState, mapActions } from 'vuex';
   import get from 'lodash/get';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import commonCoach from '../common';
   import LessonContentPreviewPage from '../plan/LessonContentPreviewPage';
   import CoachImmersivePage from '../../views/CoachImmersivePage';
@@ -39,6 +40,10 @@
       LessonContentPreviewPage,
     },
     mixins: [commonCoreStrings, commonCoach],
+    setup() {
+      const { clearSnackbar } = useSnackbar();
+      return { clearSnackbar };
+    },
     props: {
       // If set to true, will show the add/remove buttons.
       showSelectOptions: {
@@ -109,7 +114,6 @@
       this.clearSnackbar();
     },
     methods: {
-      ...mapActions(['clearSnackbar']),
       ...mapActions('lessonSummary', ['addToResourceCache']),
       handleAddResource(content) {
         this.$router.push(this.returnBackRoute).then(() => {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
index f1518abe244..ee1db0ddf9c 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
@@ -75,6 +75,7 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { ExamResource } from 'kolibri.resources';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import { PageNames } from '../../../constants';
   import commonCoach from '../../common';
   import CoachAppBarPage from '../../CoachAppBarPage';
@@ -101,9 +102,12 @@
     setup() {
       const { randomizedSectionOptionDescription$, fixedSectionOptionDescription$ } =
         enhancedQuizManagementStrings;
+      const { createSnackbar, clearSnackbar } = useSnackbar();
       return {
         randomizedSectionOptionDescription$,
         fixedSectionOptionDescription$,
+        createSnackbar,
+        clearSnackbar,
       };
     },
     data() {
@@ -223,14 +227,14 @@
             const caughtErrors = CatchErrors(error, [ERROR_CONSTANTS.UNIQUE]);
             if (caughtErrors) {
               const className = find(this.classList, { id: classroomId }).name;
-              this.$store.commit('CORE_CREATE_SNACKBAR', {
+              this.createSnackbar({
                 text: this.$tr('uniqueTitleError', {
                   title,
                   className,
                 }),
                 autoDismiss: false,
                 actionText: this.coreString('closeAction'),
-                actionCallback: () => this.$store.commit('CORE_CLEAR_SNACKBAR'),
+                actionCallback: () => this.clearSnackbar(),
               });
             } else {
               this.$store.dispatch('handleApiError', { error });
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonListPage.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonListPage.vue
index 9adb46e6395..f86932d2a25 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonListPage.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsLessonListPage.vue
@@ -132,6 +132,7 @@
   import { LESSON_VISIBILITY_MODAL_DISMISSED } from 'kolibri.coreVue.vuex.constants';
   import Lockr from 'lockr';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import commonCoach from '../common';
   import { REPORTS_TABS_ID, ReportsTabs } from '../../constants/tabsConstants';
   import CoachAppBarPage from '../CoachAppBarPage';
@@ -148,6 +149,10 @@
       ReportsHeader,
     },
     mixins: [commonCoach, commonCoreStrings],
+    setup() {
+      const { createSnackbar } = useSnackbar();
+      return { createSnackbar };
+    },
     data() {
       return {
         REPORTS_TABS_ID,
@@ -254,7 +259,7 @@
         this.manageModalVisibilityAndPreferences();
         return promise.then(() => {
           this.$store.dispatch('classSummary/refreshClassSummary');
-          this.$store.dispatch('createSnackbar', snackbarMessage);
+          this.createSnackbar(snackbarMessage);
         });
       },
       exportCSV() {
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsQuizListPage.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsQuizListPage.vue
index 79a35227679..24c37dc5ad6 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsQuizListPage.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsQuizListPage.vue
@@ -153,6 +153,7 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { ExamResource } from 'kolibri.resources';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import { REPORTS_TABS_ID, ReportsTabs } from '../../constants/tabsConstants';
   import commonCoach from '../common';
   import CoachAppBarPage from '../CoachAppBarPage';
@@ -169,6 +170,10 @@
       ReportsHeader,
     },
     mixins: [commonCoach, commonCoreStrings],
+    setup() {
+      const { createSnackbar } = useSnackbar();
+      return { createSnackbar };
+    },
     data() {
       return {
         REPORTS_TABS_ID,
@@ -277,10 +282,10 @@
           .then(() => {
             this.$store.dispatch('classSummary/refreshClassSummary');
             this.showOpenConfirmationModal = false;
-            this.$store.dispatch('createSnackbar', this.coachString('quizOpenedMessage'));
+            this.createSnackbar(this.coachString('quizOpenedMessage'));
           })
           .catch(() => {
-            this.$store.dispatch('createSnackbar', this.coachString('quizFailedToOpenMessage'));
+            this.createSnackbar(this.coachString('quizFailedToOpenMessage'));
           });
       },
       handleCloseQuiz(quizId) {
@@ -296,10 +301,10 @@
           .then(() => {
             this.$store.dispatch('classSummary/refreshClassSummary');
             this.showCloseConfirmationModal = false;
-            this.$store.dispatch('createSnackbar', this.coachString('quizClosedMessage'));
+            this.createSnackbar(this.coachString('quizClosedMessage'));
           })
           .catch(() => {
-            this.$store.dispatch('createSnackbar', this.coachString('quizFailedToCloseMessage'));
+            this.createSnackbar(this.coachString('quizFailedToCloseMessage'));
           });
       },
       exportCSV() {
diff --git a/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue b/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue
index b6c79b310a6..e14777d5223 100644
--- a/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue
+++ b/kolibri/plugins/device/assets/src/views/DeviceInfoPage.vue
@@ -84,6 +84,7 @@
   import TechnicalTextBlock from 'kolibri-common/components/AppError/TechnicalTextBlock';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import DeviceAppBarPage from './DeviceAppBarPage';
   import { deviceString } from './commonDeviceStrings';
   import DeviceNameModal from './DeviceNameModal';
@@ -103,8 +104,10 @@
     mixins: [commonCoreStrings],
     setup() {
       const { windowIsSmall } = useKResponsiveWindow();
+      const { createSnackbar } = useSnackbar();
       return {
         windowIsSmall,
+        createSnackbar,
       };
     },
     data() {
@@ -149,10 +152,10 @@
         this.$store
           .dispatch('deviceInfo/updateDeviceName', newName)
           .then(() => {
-            this.$store.dispatch('createSnackbar', this.coreString('changesSavedNotification'));
+            this.createSnackbar(this.coreString('changesSavedNotification'));
           })
           .catch(() => {
-            this.$store.dispatch('createSnackbar', this.coreString('changesNotSavedNotification'));
+            this.createSnackbar(this.coreString('changesNotSavedNotification'));
           });
       },
     },
diff --git a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
index 56a8a57c2db..82b4450ebc9 100644
--- a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
@@ -370,7 +370,7 @@
   import find from 'lodash/find';
   import urls from 'kolibri.urls';
   import logger from 'kolibri.lib.logging';
-  import { ref } from 'kolibri.lib.vueCompositionApi';
+  import { ref, watch } from 'kolibri.lib.vueCompositionApi';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
   import { availableLanguages, currentLanguage, sortLanguages } from 'kolibri.utils.i18n';
@@ -378,6 +378,7 @@
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { checkCapability } from 'kolibri.utils.appCapabilities';
   import useUser from 'kolibri.coreVue.composables.useUser';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import commonDeviceStrings from '../commonDeviceStrings';
   import DeviceAppBarPage from '../DeviceAppBarPage';
   import { LandingPageChoices, MeteredConnectionDownloadOptions } from '../../constants';
@@ -421,6 +422,7 @@
       const { plugins, fetchPlugins, togglePlugin } = usePlugins();
       const { windowIsSmall } = useKResponsiveWindow();
       const dataPlugins = ref(null);
+      const { snackbarIsVisible, createSnackbar } = useSnackbar();
 
       fetchPlugins.then(() => {
         dataPlugins.value = plugins.value.map(plugin => ({ ...plugin }));
@@ -457,6 +459,8 @@
         checkPluginChanges,
         checkAndTogglePlugins,
         windowIsSmall,
+        snackbarIsVisible,
+        createSnackbar,
       };
     },
     data() {
@@ -496,7 +500,7 @@
       };
     },
     computed: {
-      ...mapGetters(['isPageLoading', 'snackbarIsVisible']),
+      ...mapGetters(['isPageLoading']),
       ...mapGetters('deviceInfo', ['isRemoteContent']),
       InfoDescriptionColor() {
         return {
@@ -840,7 +844,7 @@
           .then(didSave => {
             didSave = didSave || pluginsChanged;
             if (didSave) {
-              this.$store.commit('CORE_CREATE_SNACKBAR', {
+              this.createSnackbar({
                 text: this.$tr('saveSuccessNotification'),
                 autoDismiss: true,
                 duration: 2000,
@@ -856,7 +860,7 @@
           .then(shouldReload => {
             if (shouldReload) {
               if (this.snackbarIsVisible) {
-                const unwatch = this.$watch('snackbarIsVisible', () => {
+                const unwatch = watch(this.snackbarIsVisible, () => {
                   unwatch && unwatch();
                   window.location.reload();
                 });
@@ -867,7 +871,7 @@
           })
           .catch(err => {
             logging.error(err);
-            this.$store.dispatch('createSnackbar', this.$tr('saveFailureNotification'));
+            this.createSnackbar(this.$tr('saveFailureNotification'));
           });
       },
       getDeviceSettings,
diff --git a/kolibri/plugins/device/assets/src/views/FacilitiesPage/index.vue b/kolibri/plugins/device/assets/src/views/FacilitiesPage/index.vue
index 6e75b299c9f..102e48a9d75 100644
--- a/kolibri/plugins/device/assets/src/views/FacilitiesPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/FacilitiesPage/index.vue
@@ -204,6 +204,7 @@
   } from 'kolibri.coreVue.componentSets.sync';
   import { TaskStatuses, TaskTypes } from 'kolibri.utils.syncTaskUtils';
   import some from 'lodash/some';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import DeviceAppBarPage from '../DeviceAppBarPage';
   import { PageNames, ImportFacility, CreateNewFacility } from '../../constants';
   import { deviceString } from '../commonDeviceStrings';
@@ -245,8 +246,10 @@
     mixins: [commonCoreStrings, commonSyncElements, facilityTaskQueue],
     setup() {
       const { windowIsSmall } = useKResponsiveWindow();
+      const { createSnackbar } = useSnackbar();
       return {
         windowIsSmall,
+        createSnackbar,
       };
     },
     data() {
@@ -402,8 +405,7 @@
         };
       },
       showFacilityRemovedSnackbar(facilityName) {
-        this.$store.dispatch(
-          'createSnackbar',
+        this.createSnackbar(
           this.$tr('facilityRemovedSnackbar', {
             facilityName,
           }),
diff --git a/kolibri/plugins/device/assets/src/views/PostSetupModalGroup.vue b/kolibri/plugins/device/assets/src/views/PostSetupModalGroup.vue
index bb1bbb3ff4d..fce4fbd2a50 100644
--- a/kolibri/plugins/device/assets/src/views/PostSetupModalGroup.vue
+++ b/kolibri/plugins/device/assets/src/views/PostSetupModalGroup.vue
@@ -42,6 +42,7 @@
   import commonSyncElements from 'kolibri.coreVue.mixins.commonSyncElements';
   import { SelectDeviceForm, AddDeviceForm } from 'kolibri.coreVue.componentSets.sync';
   import useUser from 'kolibri.coreVue.composables.useUser';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import { availableChannelsPageLink } from './ManageContentPage/manageContentLinks';
   import WelcomeModal from './WelcomeModal';
   import PermissionsChangeModal from './PermissionsChangeModal';
@@ -66,7 +67,12 @@
     mixins: [commonSyncElements],
     setup() {
       const { isUserLoggedIn } = useUser();
-      return { isUserLoggedIn };
+      const { createSnackbar } = useSnackbar();
+
+      return {
+        isUserLoggedIn,
+        createSnackbar,
+      };
     },
     props: {
       isOnMyOwnUser: {
@@ -92,9 +98,6 @@
       },
     },
     methods: {
-      createSnackbar(args) {
-        this.$store.dispatch('createSnackbar', args);
-      },
       startNormalImportWorkflow() {
         this.$emit('cancel');
         this.$store.dispatch('manageContent/startImportWorkflow');
diff --git a/kolibri/plugins/device/assets/src/views/RearrangeChannelsPage.vue b/kolibri/plugins/device/assets/src/views/RearrangeChannelsPage.vue
index 5f336f38a80..1ddbefbd97c 100644
--- a/kolibri/plugins/device/assets/src/views/RearrangeChannelsPage.vue
+++ b/kolibri/plugins/device/assets/src/views/RearrangeChannelsPage.vue
@@ -68,6 +68,7 @@
   import urls from 'kolibri.urls';
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import useUser from 'kolibri.coreVue.composables.useUser';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import DeviceChannelResource from '../apiResources/deviceChannel';
   import useContentTasks from '../composables/useContentTasks';
   import { PageNames } from '../constants';
@@ -89,7 +90,12 @@
     setup() {
       useContentTasks();
       const { canManageContent } = useUser();
-      return { canManageContent };
+      const { createSnackbar } = useSnackbar();
+
+      return {
+        canManageContent,
+        createSnackbar,
+      };
     },
     data() {
       return {
@@ -153,7 +159,7 @@
         this.channels = [...event.newArray];
         this.postNewOrder(event.newArray.map(x => x.id))
           .then(() => {
-            this.$store.dispatch('createSnackbar', this.$tr('successNotification'));
+            this.createSnackbar(this.$tr('successNotification'));
           })
           .catch(() => {
             // HACK completely reset the array to undo the move on the drag list
@@ -161,7 +167,7 @@
             this.$nextTick().then(() => {
               this.channels = oldArray;
             });
-            this.$store.dispatch('createSnackbar', this.$tr('failureNotification'));
+            this.createSnackbar(this.$tr('failureNotification'));
           });
       },
     },
diff --git a/kolibri/plugins/device/assets/src/views/__test__/RearrangeChannelsPage.spec.js b/kolibri/plugins/device/assets/src/views/__test__/RearrangeChannelsPage.spec.js
index 11a75165f97..ba70a6296d3 100644
--- a/kolibri/plugins/device/assets/src/views/__test__/RearrangeChannelsPage.spec.js
+++ b/kolibri/plugins/device/assets/src/views/__test__/RearrangeChannelsPage.spec.js
@@ -1,10 +1,12 @@
 import { shallowMount } from '@vue/test-utils';
 import useUser, { useUserMock } from 'kolibri.coreVue.composables.useUser';
+import useSnackbar, { useSnackbarMock } from 'kolibri.coreVue.composables.useSnackbar';
 import makeStore from '../../../test/utils/makeStore';
 import RearrangeChannelsPage from '../RearrangeChannelsPage';
 
 jest.mock('../../composables/useContentTasks');
 jest.mock('kolibri.coreVue.composables.useUser');
+jest.mock('kolibri.coreVue.composables.useSnackbar');
 
 RearrangeChannelsPage.methods.postNewOrder = () => Promise.resolve();
 RearrangeChannelsPage.methods.fetchChannels = () => {
@@ -25,6 +27,11 @@ async function makeWrapper() {
 }
 
 describe('RearrangeChannelsPage', () => {
+  const createSnackbar = jest.fn();
+  beforeAll(() => {
+    useSnackbar.mockImplementation(() => useSnackbarMock({ createSnackbar }));
+  });
+
   async function simulateSort(wrapper) {
     const dragContainer = wrapper.findComponent({ name: 'DragContainer' });
     dragContainer.vm.$emit('sort', {
@@ -45,10 +52,7 @@ describe('RearrangeChannelsPage', () => {
     wrapper.vm.postNewOrder = jest.fn().mockResolvedValue();
     wrapper.vm.$store.dispatch = jest.fn();
     await simulateSort(wrapper);
-    expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith(
-      'createSnackbar',
-      'Channel order saved',
-    );
+    expect(createSnackbar).toHaveBeenCalledWith('Channel order saved');
     expect(wrapper.vm.channels[0].id).toEqual('2');
     expect(wrapper.vm.channels[1].id).toEqual('1');
   });
@@ -58,10 +62,7 @@ describe('RearrangeChannelsPage', () => {
     wrapper.vm.postNewOrder = jest.fn().mockRejectedValue();
     wrapper.vm.$store.dispatch = jest.fn();
     await simulateSort(wrapper);
-    expect(wrapper.vm.$store.dispatch).toHaveBeenCalledWith(
-      'createSnackbar',
-      'There was a problem reordering the channels',
-    );
+    expect(createSnackbar).toHaveBeenCalledWith('There was a problem reordering the channels');
     // Channels array is reset after an error
     expect(wrapper.vm.channels[0].id).toEqual('1');
     expect(wrapper.vm.channels[1].id).toEqual('2');
diff --git a/kolibri/plugins/device/assets/src/views/taskNotificationMixin.js b/kolibri/plugins/device/assets/src/views/taskNotificationMixin.js
index f513a1b1dbc..b4064642bad 100644
--- a/kolibri/plugins/device/assets/src/views/taskNotificationMixin.js
+++ b/kolibri/plugins/device/assets/src/views/taskNotificationMixin.js
@@ -1,4 +1,5 @@
 import { createTranslator } from 'kolibri.utils.i18n';
+import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
 import { PageNames } from '../constants';
 
 const TaskSnackbarStrings = createTranslator('TaskSnackbarStrings', {
@@ -30,6 +31,10 @@ export default {
       showSnackbarWhenTaskHasFinished: true,
     };
   },
+  setup() {
+    const { createSnackbar } = useSnackbar();
+    return { createSnackbar };
+  },
   computed: {
     watchedTaskId() {
       return this.$store.state.manageContent.watchedTaskId;
@@ -60,16 +65,16 @@ export default {
       this.$router.push({ name: PageNames.MANAGE_TASKS });
     },
     createTaskFailedSnackbar() {
-      this.$store.dispatch('createSnackbar', TaskSnackbarStrings.$tr('taskFailed'));
+      this.createSnackbar(TaskSnackbarStrings.$tr('taskFailed'));
     },
     createTaskFinishedSnackbar() {
-      this.$store.commit('CORE_CREATE_SNACKBAR', {
+      this.createSnackbar({
         text: TaskSnackbarStrings.$tr('taskFinished'),
         autoDismiss: true,
       });
     },
     createTaskStartedSnackbar() {
-      this.$store.commit('CORE_CREATE_SNACKBAR', {
+      this.createSnackbar({
         text: TaskSnackbarStrings.$tr('taskStarted'),
         autoDismiss: true,
       });
diff --git a/kolibri/plugins/facility/assets/src/views/CoachClassAssignmentPage.vue b/kolibri/plugins/facility/assets/src/views/CoachClassAssignmentPage.vue
index 7fb42d9757a..f1ab42d3d9b 100644
--- a/kolibri/plugins/facility/assets/src/views/CoachClassAssignmentPage.vue
+++ b/kolibri/plugins/facility/assets/src/views/CoachClassAssignmentPage.vue
@@ -27,6 +27,7 @@
   import { mapState, mapActions, mapGetters } from 'vuex';
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import ClassEnrollForm from './ClassEnrollForm';
 
   export default {
@@ -41,6 +42,10 @@
       ImmersivePage,
     },
     mixins: [commonCoreStrings],
+    setup() {
+      const { createSnackbar } = useSnackbar();
+      return { createSnackbar };
+    },
     data() {
       return {
         formIsDisabled: false,
@@ -73,7 +78,7 @@
           })
           .catch(() => {
             this.formIsDisabled = false;
-            this.$store.dispatch('createSnackbar', this.coreString('changesNotSavedNotification'));
+            this.createSnackbar(this.coreString('changesNotSavedNotification'));
           });
       },
     },
diff --git a/kolibri/plugins/facility/assets/src/views/FacilityConfigPage/index.vue b/kolibri/plugins/facility/assets/src/views/FacilityConfigPage/index.vue
index 23d81764f7a..a9e34ef11ba 100644
--- a/kolibri/plugins/facility/assets/src/views/FacilityConfigPage/index.vue
+++ b/kolibri/plugins/facility/assets/src/views/FacilityConfigPage/index.vue
@@ -237,6 +237,7 @@
   import urls from 'kolibri.urls';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import useUser from 'kolibri.coreVue.composables.useUser';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import FacilityAppBarPage from '../FacilityAppBarPage';
   import ConfirmResetModal from './ConfirmResetModal';
   import EditFacilityNameModal from './EditFacilityNameModal';
@@ -291,9 +292,11 @@
     },
     mixins: [commonCoreStrings],
     setup() {
+      const { createSnackbar } = useSnackbar();
       const { windowIsSmall } = useKResponsiveWindow();
       const { isAppContext, isSuperuser, userIsMultiFacilityAdmin } = useUser();
       return {
+        createSnackbar,
         windowIsSmall,
         isAppContext,
         isSuperuser,
@@ -390,7 +393,6 @@
     methods: {
       camelCase,
       ...mapActions('facilityConfig', ['saveFacilityName']),
-      ...mapActions(['createSnackbar']),
       updateSettingValue(settingName, newValue) {
         this.$store.commit('facilityConfig/CONFIG_PAGE_MODIFY_SETTING', {
           name: settingName,
diff --git a/kolibri/plugins/facility/assets/src/views/LearnerClassEnrollmentPage.vue b/kolibri/plugins/facility/assets/src/views/LearnerClassEnrollmentPage.vue
index de225673a2c..d7c1472d1fc 100644
--- a/kolibri/plugins/facility/assets/src/views/LearnerClassEnrollmentPage.vue
+++ b/kolibri/plugins/facility/assets/src/views/LearnerClassEnrollmentPage.vue
@@ -27,6 +27,7 @@
   import { mapState, mapActions, mapGetters } from 'vuex';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import ClassEnrollForm from './ClassEnrollForm';
 
   export default {
@@ -41,6 +42,10 @@
       ImmersivePage,
     },
     mixins: [commonCoreStrings],
+    setup() {
+      const { createSnackbar } = useSnackbar();
+      return { createSnackbar };
+    },
     data() {
       return {
         formIsDisabled: false,
@@ -74,7 +79,7 @@
           })
           .catch(() => {
             this.formIsDisabled = false;
-            this.$store.dispatch('createSnackbar', this.coreString('changesNotSavedNotification'));
+            this.createSnackbar(this.coreString('changesNotSavedNotification'));
           });
       },
     },
diff --git a/kolibri/plugins/facility/assets/src/views/UserEditPage.vue b/kolibri/plugins/facility/assets/src/views/UserEditPage.vue
index 2e335e6931e..95b529c5ff6 100644
--- a/kolibri/plugins/facility/assets/src/views/UserEditPage.vue
+++ b/kolibri/plugins/facility/assets/src/views/UserEditPage.vue
@@ -150,6 +150,7 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import ExtraDemographics from 'kolibri-common/components/ExtraDemographics';
   import useUser from 'kolibri.coreVue.composables.useUser';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import IdentifierTextbox from './IdentifierTextbox';
 
   export default {
@@ -171,8 +172,13 @@
     },
     mixins: [commonCoreStrings],
     setup() {
+      const { createSnackbar } = useSnackbar();
       const { currentUserId } = useUser();
-      return { currentUserId };
+
+      return {
+        createSnackbar,
+        currentUserId,
+      };
     },
     data() {
       return {
@@ -369,7 +375,7 @@
           // Log out of Facility Page if and Admin demotes themselves to non-Admin
           this.$store.dispatch('kolibriLogout');
         } else {
-          this.$store.dispatch('createSnackbar', this.coreString('changesSavedNotification'));
+          this.createSnackbar(this.coreString('changesSavedNotification'));
           this.goToUserManagementPage();
         }
       },
diff --git a/kolibri/plugins/facility/assets/test/views/facility-config-page.spec.js b/kolibri/plugins/facility/assets/test/views/facility-config-page.spec.js
index 82655b8ef55..d5d899e765d 100644
--- a/kolibri/plugins/facility/assets/test/views/facility-config-page.spec.js
+++ b/kolibri/plugins/facility/assets/test/views/facility-config-page.spec.js
@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils';
 import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
 import useUser, { useUserMock } from 'kolibri.coreVue.composables.useUser';
+import useSnackbar, { useSnackbarMock } from 'kolibri.coreVue.composables.useSnackbar';
 import ConfigPage from '../../src/views/FacilityConfigPage';
 import makeStore from '../makeStore';
 
@@ -9,6 +10,7 @@ jest.mock('kolibri.coreVue.composables.useUser');
 jest.mock('../../../../device/assets/src/views/DeviceSettingsPage/api.js', () => ({
   getDeviceSettings: jest.fn(),
 }));
+jest.mock('kolibri.coreVue.composables.useSnackbar');
 
 function makeWrapper(propsData = {}) {
   const store = makeStore();
@@ -35,10 +37,12 @@ function getElements(wrapper) {
 }
 
 describe('facility config page view', () => {
+  const createSnackbar = jest.fn();
   beforeAll(() => {
     useKResponsiveWindow.mockImplementation(() => ({
       windowIsSmall: false,
     }));
+    useSnackbar.mockImplementation(() => useSnackbarMock({ createSnackbar }));
   });
 
   function assertModalIsUp(wrapper) {
@@ -114,9 +118,9 @@ describe('facility config page view', () => {
     assertModalIsUp(wrapper);
     confirmResetModal().vm.$emit('submit');
     await wrapper.vm.$nextTick();
-    expect(mock).toHaveBeenCalledTimes(2);
+    expect(mock).toHaveBeenCalledTimes(1);
     expect(mock).toHaveBeenCalledWith('facilityConfig/resetFacilityConfig');
-    expect(mock).toHaveBeenCalledWith('createSnackbar', 'Facility settings updated');
+    expect(createSnackbar).toHaveBeenCalledWith('Facility settings updated');
     assertModalIsDown(wrapper);
   });
 
diff --git a/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js b/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
index 9c2d97418b3..be2d07bce27 100644
--- a/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
+++ b/kolibri/plugins/learn/assets/src/composables/useDownloadRequests.js
@@ -11,6 +11,7 @@ import urls from 'kolibri.urls';
 import client from 'kolibri.client';
 import Vue from 'kolibri.lib.vue';
 import useUser from 'kolibri.coreVue.composables.useUser';
+import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
 import { currentDeviceData } from '../composables/useDevices';
 
 const downloadRequestsTranslator = createTranslator('DownloadRequests', {
@@ -119,6 +120,8 @@ export default function useDownloadRequests(store) {
     redirectBrowser(urls['kolibri:kolibri.plugins.learn:my_downloads']());
   }
 
+  const { createSnackbar } = useSnackbar();
+
   function addDownloadRequest(contentNode) {
     const metadata = {
       title: contentNode.title,
@@ -141,7 +144,7 @@ export default function useDownloadRequests(store) {
       restartPolling();
     });
 
-    store.commit('CORE_CREATE_SNACKBAR', {
+    createSnackbar({
       text: downloadRequestsTranslator.$tr('downloadStartedLabel'),
       actionText: downloadRequestsTranslator.$tr('goToDownloadsPage'),
       actionCallback: navigateToDownloads,
@@ -153,7 +156,7 @@ export default function useDownloadRequests(store) {
   }
 
   function showCompletedDownloadSnackbar() {
-    store.commit('CORE_CREATE_SNACKBAR', {
+    createSnackbar({
       text: downloadRequestsTranslator.$tr('downloadComplete'),
       actionText: downloadRequestsTranslator.$tr('goToDownloadsPage'),
       actionCallback: navigateToDownloads,
@@ -172,7 +175,7 @@ export default function useDownloadRequests(store) {
       id: contentRequest.id,
     });
     Vue.delete(downloadRequestMap, contentRequest.contentnode_id);
-    store.commit('CORE_CREATE_SNACKBAR', {
+    createSnackbar({
       text: downloadRequestsTranslator.$tr('resourceRemoved'),
       backdrop: false,
       forceReuse: true,
diff --git a/kolibri/plugins/learn/assets/src/composables/usePinnedDevices.js b/kolibri/plugins/learn/assets/src/composables/usePinnedDevices.js
index c7e5b926f82..c5ebc035525 100644
--- a/kolibri/plugins/learn/assets/src/composables/usePinnedDevices.js
+++ b/kolibri/plugins/learn/assets/src/composables/usePinnedDevices.js
@@ -3,17 +3,18 @@
  */
 
 import { get, set } from '@vueuse/core';
-import { computed, getCurrentInstance, ref } from 'kolibri.lib.vueCompositionApi';
+import { computed, ref } from 'kolibri.lib.vueCompositionApi';
 import { PinnedDeviceResource } from 'kolibri.resources';
 import { crossComponentTranslator } from 'kolibri.utils.i18n';
+import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
 import { KolibriStudioId } from '../constants';
 import LibraryItem from '../views/ExploreLibrariesPage/LibraryItem';
 
 const PinStrings = crossComponentTranslator(LibraryItem);
 
-export default function usePinnedDevices(networkDevicesWithChannels, store) {
-  store = store || getCurrentInstance().proxy.$store;
+export default function usePinnedDevices(networkDevicesWithChannels) {
   const userPinsMap = ref({});
+  const { createSnackbar } = useSnackbar();
 
   const devicesWithChannels = computed(() => {
     return networkDevicesWithChannels ? get(networkDevicesWithChannels) || [] : [];
@@ -34,7 +35,7 @@ export default function usePinnedDevices(networkDevicesWithChannels, store) {
       ...get(userPinsMap),
       [instance_id]: { instance_id },
     });
-    store.dispatch('createSnackbar', PinStrings.$tr('pinnedTo'));
+    createSnackbar(PinStrings.$tr('pinnedTo'));
     return PinnedDeviceResource.create({ instance_id }).then(pin => {
       set(userPinsMap, {
         ...get(userPinsMap),
@@ -49,7 +50,7 @@ export default function usePinnedDevices(networkDevicesWithChannels, store) {
     const newMap = { ...map };
     delete newMap[instance_id];
     set(userPinsMap, newMap);
-    store.dispatch('createSnackbar', PinStrings.$tr('pinRemoved'));
+    createSnackbar(PinStrings.$tr('pinRemoved'));
     return PinnedDeviceResource.deleteModel({ id });
   }
 
diff --git a/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue b/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue
index 02490c0da70..8f31001b9c4 100644
--- a/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue
@@ -88,13 +88,13 @@
 
 <script>
 
-  import { mapActions } from 'vuex';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import { ContentNodeResource } from 'kolibri.resources';
   import client from 'kolibri.client';
   import urls from 'kolibri.urls';
   import LearningActivityChip from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import useContentNodeProgress from '../composables/useContentNodeProgress';
   import useContentLink from '../composables/useContentLink';
   import useCoreLearn from '../composables/useCoreLearn';
@@ -127,11 +127,13 @@
       const { fetchContentNodeProgress } = useContentNodeProgress();
       const { genContentLinkBackLinkCurrentPage } = useContentLink();
       const { windowIsSmall } = useKResponsiveWindow();
+      const { createSnackbar } = useSnackbar();
       return {
         canDownloadExternally,
         fetchContentNodeProgress,
         genContentLinkBackLinkCurrentPage,
         windowIsSmall,
+        createSnackbar,
       };
     },
     data() {
@@ -151,7 +153,6 @@
       });
     },
     methods: {
-      ...mapActions(['createSnackbar']),
       loadMore() {
         if (!this.loading) {
           this.loading = true;
diff --git a/kolibri/plugins/learn/assets/src/views/ContentPage.vue b/kolibri/plugins/learn/assets/src/views/ContentPage.vue
index 83f3d2ef937..109ab40f400 100644
--- a/kolibri/plugins/learn/assets/src/views/ContentPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/ContentPage.vue
@@ -110,6 +110,7 @@
   import router from 'kolibri.coreVue.router';
   import Modalities from 'kolibri-constants/Modalities';
   import useUser from 'kolibri.coreVue.composables.useUser';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import { setContentNodeProgress } from '../composables/useContentNodeProgress';
   import useProgressTracking from '../composables/useProgressTracking';
   import useContentLink from '../composables/useContentLink';
@@ -160,6 +161,7 @@
       };
       const { windowIsSmall } = useKResponsiveWindow();
       const { isUserLoggedIn, currentUserId, full_name } = useUser();
+      const { createSnackbar } = useSnackbar();
       return {
         errored,
         progress,
@@ -178,6 +180,7 @@
         isUserLoggedIn,
         currentUserId,
         full_name,
+        createSnackbar,
       };
     },
     props: {
@@ -267,7 +270,7 @@
         this.displayCompletionModal();
         return this.updateProgress(1.0)
           .then(() => {
-            this.$store.dispatch('createSnackbar', this.learnString('resourceCompletedLabel'));
+            this.createSnackbar(this.learnString('resourceCompletedLabel'));
           })
           .catch(error => {
             this.$store.dispatch('handleApiError', { error });
diff --git a/kolibri/plugins/user_auth/assets/src/modules/signIn/handlers.js b/kolibri/plugins/user_auth/assets/src/modules/signIn/handlers.js
index a034ad6af0b..6c0a6a9108d 100644
--- a/kolibri/plugins/user_auth/assets/src/modules/signIn/handlers.js
+++ b/kolibri/plugins/user_auth/assets/src/modules/signIn/handlers.js
@@ -1,6 +1,7 @@
 import Lockr from 'lockr';
 import { SIGNED_OUT_DUE_TO_INACTIVITY } from 'kolibri.coreVue.vuex.constants';
 import { createTranslator } from 'kolibri.utils.i18n';
+import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
 
 const snackbarTranslator = createTranslator('UserPageSnackbars', {
   dismiss: {
@@ -17,11 +18,12 @@ const snackbarTranslator = createTranslator('UserPageSnackbars', {
 
 export function showSignInPage(store) {
   if (Lockr.get(SIGNED_OUT_DUE_TO_INACTIVITY)) {
-    store.commit('CORE_CREATE_SNACKBAR', {
+    const { createSnackbar, clearSnackbar } = useSnackbar();
+    createSnackbar({
       text: snackbarTranslator.$tr('signedOut'),
       autoDismiss: false,
       actionText: snackbarTranslator.$tr('dismiss'),
-      actionCallback: () => store.commit('CORE_CLEAR_SNACKBAR'),
+      actionCallback: () => clearSnackbar(),
     });
     Lockr.set(SIGNED_OUT_DUE_TO_INACTIVITY, null);
   }
diff --git a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/SelectFacility.vue b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/SelectFacility.vue
index a10bfa99365..2ab91df6d73 100644
--- a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/SelectFacility.vue
+++ b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/SelectFacility.vue
@@ -75,13 +75,14 @@
 <script>
 
   import { useLocalStorage, useMemoize, computedAsync, get } from '@vueuse/core';
-  import { computed, getCurrentInstance, ref, watch } from 'kolibri.lib.vueCompositionApi';
+  import { computed, ref, watch } from 'kolibri.lib.vueCompositionApi';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import commonSyncElements from 'kolibri.coreVue.mixins.commonSyncElements';
   import { NetworkLocationResource } from 'kolibri.resources';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import useMinimumKolibriVersion from 'kolibri.coreVue.composables.useMinimumKolibriVersion';
   import { AddDeviceForm, useDevices, useDeviceDeletion } from 'kolibri.coreVue.componentSets.sync';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import commonProfileStrings from '../commonProfileStrings';
 
   export default {
@@ -114,7 +115,6 @@
       const selectedFacilityId = ref('');
       const showAddAddressModal = ref(false);
       const isLoading = ref(false);
-      const $store = getCurrentInstance().proxy.$store;
 
       const fetchDeviceFacilities = useMemoize(
         async device => {
@@ -207,10 +207,7 @@
         }
       });
 
-      // methods:
-      function createSnackbar(args) {
-        $store.dispatch('createSnackbar', args);
-      }
+      const { createSnackbar } = useSnackbar();
 
       function handleAddedAddress() {
         forceFetch();
diff --git a/kolibri/plugins/user_profile/assets/src/views/ProfilePage/ChangeUserPasswordModal.vue b/kolibri/plugins/user_profile/assets/src/views/ProfilePage/ChangeUserPasswordModal.vue
index 6b73b29b51b..a5bf6bf92b5 100644
--- a/kolibri/plugins/user_profile/assets/src/views/ProfilePage/ChangeUserPasswordModal.vue
+++ b/kolibri/plugins/user_profile/assets/src/views/ProfilePage/ChangeUserPasswordModal.vue
@@ -27,6 +27,7 @@
 
   import PasswordTextbox from 'kolibri.coreVue.components.PasswordTextbox';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
 
   export default {
     name: 'ChangeUserPasswordModal',
@@ -34,6 +35,10 @@
       PasswordTextbox,
     },
     mixins: [commonCoreStrings],
+    setup() {
+      const { createSnackbar } = useSnackbar();
+      return { createSnackbar };
+    },
     data() {
       return {
         password: '',
@@ -56,7 +61,7 @@
           .then(() => {
             this.busy = false;
             this.$emit('cancel');
-            this.$store.dispatch('createSnackbar', this.$tr('passwordChangedNotification'));
+            this.createSnackbar(this.$tr('passwordChangedNotification'));
           })
           .catch(error => {
             this.$store.dispatch('handleApiError', { error });
diff --git a/packages/kolibri-common/components/AppError/TechnicalTextBlock.vue b/packages/kolibri-common/components/AppError/TechnicalTextBlock.vue
index c66e65991f4..531621c77a0 100644
--- a/packages/kolibri-common/components/AppError/TechnicalTextBlock.vue
+++ b/packages/kolibri-common/components/AppError/TechnicalTextBlock.vue
@@ -38,11 +38,15 @@
 
 <script>
 
-  import { mapActions } from 'vuex';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
   import ClipboardJS from 'clipboard';
 
   export default {
     name: 'TechnicalTextBlock',
+    setup() {
+      const { createSnackbar } = useSnackbar();
+      return { createSnackbar };
+    },
     props: {
       text: {
         type: String,
@@ -87,9 +91,6 @@
         this.clipboard.destroy();
       }
     },
-    methods: {
-      ...mapActions(['createSnackbar']),
-    },
     $trs: {
       copyToClipboardButtonPrompt: {
         message: 'Copy to clipboard',
diff --git a/packages/kolibri-common/components/GlobalSnackbar.vue b/packages/kolibri-common/components/GlobalSnackbar.vue
index e578f08a57b..ebb65b51646 100644
--- a/packages/kolibri-common/components/GlobalSnackbar.vue
+++ b/packages/kolibri-common/components/GlobalSnackbar.vue
@@ -19,15 +19,23 @@
 <script>
 
   import CoreSnackbar from 'kolibri.coreVue.components.CoreSnackbar';
-  import { mapGetters } from 'vuex';
+  import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
 
   export default {
     name: 'GlobalSnackbar',
     components: {
       CoreSnackbar,
     },
+    setup() {
+      const { snackbarIsVisible, snackbarOptions, clearSnackbar } = useSnackbar();
+
+      return {
+        snackbarIsVisible,
+        snackbarOptions,
+        clearSnackbar,
+      };
+    },
     computed: {
-      ...mapGetters(['snackbarIsVisible', 'snackbarOptions']),
       key() {
         const options = Object.assign({}, this.snackbarOptions);
         // The forceReuse option is used to force the reuse of the snackbar
@@ -41,17 +49,14 @@
       },
     },
     destroyed() {
-      this.clearSnackbarState();
+      this.clearSnackbar();
     },
     methods: {
-      clearSnackbarState() {
-        this.$store.commit('CORE_CLEAR_SNACKBAR');
-      },
       hideCallback() {
         if (this.snackbarOptions.hideCallback) {
           this.snackbarOptions.hideCallback();
         }
-        this.clearSnackbarState();
+        this.clearSnackbar();
       },
     },
   };