@felicienfrancois/vuetify-use-dialog

@felicienfrancois/vuetify-use-dialog

A highly simple and effective Vue 3 module that simplifies the creation of dynamically mounted dialogs, confirm dialogs, and snackbars in Vuetify 3.

It leverages promises, meaning the dialog will return whatever data your component emits through the close event! All methods are fully type-compliant and purely function-based without requiring explicit template definitions.

Installation

npm install @felicienfrancois/vuetify-use-dialog

Usage

You can use the functions directly as composables without needing a plugin installation!

1. Mounting custom components (useDialog)

<script setup>
import MyComponentDialog from "@/components/MyComponentDialog.vue";
import { useDialog } from "@felicienfrancois/vuetify-use-dialog";

// 1. Initialize the composable
const dialog = useDialog({
  // Global options (optional)
  dialogProps: {
    maxWidth: "800px",
  },
});

async function showDialog() {
  // 2. Call the dialog function and wait for the result
  const result = await dialog({
    component: MyComponentDialog,
    componentProps: {
      my_first_prop: "test",
    },
    dialogProps: {
      maxWidth: "700px", // overrides global option
      persistent: true,
    },
  });

  console.log("Dialog closed with result:", result);
}
</script>

<template>
  <v-btn @click="showDialog">Open Dialog</v-btn>
</template>

In Your Component (MyComponentDialog.vue)

Simply emit the close event with whatever data you want returned!

<script setup>
const props = defineProps(["my_first_prop"]);
const emit = defineEmits(["close"]);

function save() {
  // Doing something...
  const data = { success: true };

  // Emit 'close' to resolve the promise!
  emit("close", data);
}

function cancel() {
  emit("close", null);
}
</script>

<template>
  <v-card :title="'My Dialog: ' + my_first_prop">
    <v-card-text>
      <!-- content -->
    </v-card-text>
    <v-card-actions>
      <v-btn @click="cancel">Cancel</v-btn>
      <v-btn @click="save" color="primary">Save</v-btn>
    </v-card-actions>
  </v-card>
</template>

2. Built-in Confirm Dialog (useConfirm)

<script setup>
import { useConfirm, useSnackbar } from "@felicienfrancois/vuetify-use-dialog";

const createConfirm = useConfirm();
const createSnackbar = useSnackbar();

async function handleConfirm() {
  const isConfirmed = await createConfirm({ content: "This action is permanent!" });

  if (!isConfirmed) return;

  createSnackbar({ text: "Confirmed" });
}
</script>

<template>
  <v-btn @click="handleConfirm">Confirm</v-btn>
</template>

3. Built-in Snackbar (useSnackbar)

<script setup>
import { useSnackbar } from "@felicienfrancois/vuetify-use-dialog";

const createSnackbar = useSnackbar();

function showToast() {
  createSnackbar({ text: "Your file has been saved!" });
}
</script>

<template>
  <v-btn @click="showToast">Show Toast</v-btn>
</template>

Global Setup (Optional Plugin)

You can optionally install the plugin to provide global initial defaults or use the methods via the default Options API using this.$dialog, this.$confirm, and this.$toast.

import { createApp } from "vue";
import { createVuetify } from "vuetify";
import VuetifyUseDialog from "@felicienfrancois/vuetify-use-dialog";

import App from "./App.vue";

const app = createApp(App);
const vuetify = createVuetify();

app.use(vuetify);
app.use(VuetifyUseDialog, {
  dialog: {
    // global useDialog options
  },
  confirmDialog: {
    // global useConfirm options
    title: "Are you sure?",
  },
  snackbar: {
    // global useSnackbar options
    snackbarProps: {
      timeout: 2000,
    },
  },
});

app.mount("#app");

Options

useDialog

useConfirm

useSnackbar

License

MIT