Vuetify + Composition API Snackbar component that can be used globally

page.vue

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api';
import { useSnackbar } from '~/composables';
export default defineComponent({
  setup() {
    const createSnackbar = useSnackbar();
    const showSnackbar = () => {
      createSnackbar('Your snackbar message');
    };
    return {
      showSnackbar
    };
  },
});
</script>

SnackbarProvider.vue

<template>
  <div v-frag>
    <slot />
    <v-snackbar v-model="show" :timeout="options.timeout" bottom right>
      {{ text }}
      <template v-if="options.showCloseButton" #action="{ attrs }">
        <v-btn
          :color="options.closeButtonColor"
          text
          v-bind="attrs"
          @click="show = false"
        >
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script lang="ts">
import frag from 'vue-frag';
import {
  defineComponent,
  provide,
  reactive,
  toRefs,
} from '@nuxtjs/composition-api';
import { CreateSnackbarKey, CreateSnackbarOptions } from '~/composables';

export default defineComponent({
  directives: {
    frag,
  },
  setup() {
    const state = reactive({
      show: false,
      text: '',
      options: {
        showCloseButton: true,
        closeButtonColor: '',
        timeout: 3000,
      } as CreateSnackbarOptions,
    });

    const createSnackbar = (
      text: string,
      options: CreateSnackbarOptions = {}
    ) => {
      state.show = true;
      state.text = text;
      state.options = Object.assign(state.options, options);
    };

    provide(CreateSnackbarKey, createSnackbar);

    return {
      ...toRefs(state),
    };
  },
});
</script>

template.vue

<template>
  <v-app>
    <v-main>
      <v-container>
        <SnackbarProvider>
          <Nuxt />
        </SnackbarProvider>
      </v-container>
    </v-main>
  </v-app>
</template>

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api';
import SnackbarProvider from '~/components/SnackbarProvider.vue';
export default defineComponent({
  components: {
    SnackbarProvider,
  }
});
</script>

useSnackbar.ts

import { inject, InjectionKey } from '@nuxtjs/composition-api';

export interface CreateSnackbarOptions {
  showCloseButton?: boolean;
  closeButtonColor?: string;
  timeout?: number;
}

export type CreateSnackbar = (
  text: string,
  options?: CreateSnackbarOptions
) => void;

export const CreateSnackbarKey: InjectionKey<CreateSnackbar> =
  Symbol('CreateSnackbar');

export function useSnackbar() {
  const createSnackbar = inject(CreateSnackbarKey);

  if (!createSnackbar) {
    throw new Error('Could not resolve snackbar provider');
  }

  return createSnackbar;
}