Closed modbender closed 1 year ago
This worked for me:
Added a new vue3Snackbar.ts file in the plugins folder with this code:
import { SnackbarService, Vue3Snackbar } from "vue3-snackbar";
import '../node_modules/vue3-snackbar/dist/style.css';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(SnackbarService);
//this is optional becasue I want to add <v-snackbar> in the template instead of <vue3-snackbar>
nuxtApp.vueApp.component("vSnackbar", Vue3Snackbar);
});
You can just use it as doumented hten in the vue files. Hope this helps.
It feels like installing this as a Nuxt plugin is more of a Nuxt documentation thing than the responsibility of individual projects.
It might get added in one day, but it might not. We'll see.
@craigrileyuk actually I'm trying to develop a plugin for Next 3, https://github.com/modbender/nuxt-snackbar/tree/master
I've done the necessities, like adding composable, component, css and service. But yet, whenever I use the useSnackbar it ends up in error saying "No Snackbar provided!"
@modbender Try this:
index.js
import { defineNuxtModule, isNuxt2, addImports, addPlugin, addComponent, createResolver } from "@nuxt/kit";
export default defineNuxtModule({ meta: { name: "nuxt-snackbar", configKey: "snackbar", compatibility: { nuxt: "^3.0.0", }, }, defaults: { top: false, bottom: true, left: false, right: false, groups: true, success: "#4caf50", error: "#ff5252", warning: "#fb8c00", info: "#2196f3", duration: 4000, messageClass: "", zIndex: 9999, dense: false, shadow: true, reverse: false, border: "", backgroundOpacity: 0.12, backgroundColor: "currentColor", baseBackgroundColor: "#ffffff", }, hooks: {}, setup(options, nuxt) { const resolver = createResolver(import.meta.url); nuxt.options.css.push("vue3-snackbar/styles"); nuxt.options.snackbar = options;
addImports({
name: "useSnackbar",
as: "useSnackbar",
from: resolver.resolve("./runtime/composables"),
});
nuxt.hook("modules:done", () => {
if (isNuxt2()) {
throw new Error("Vue3 Snackbar is not compatible with Nuxt2");
} else {
addPlugin(resolver.resolve("./runtime/plugin"));
addComponent({
name: "NuxtSnackbar",
filePath: resolver.resolve("./runtime/component"),
});
nuxt.options.runtimeConfig.public = nuxt.options.runtimeConfig.public || {};
nuxt.options.runtimeConfig.public.snackbar = options;
}
});
},
});
> runtime/plugin.js
```js
import { defineNuxtPlugin, useRuntimeConfig } from "#app";
import { SnackbarService } from "vue3-snackbar";
export default defineNuxtPlugin((nuxtApp) => {
const config = useRuntimeConfig();
nuxtApp.vueApp.use(SnackbarService);
nuxtApp.vueApp.provide("snackbarOptions", config.public.snackbar);
});
runtime/composables.js
export { useSnackbar } from "vue3-snackbar";
runtime/component.js
import { Vue3Snackbar } from "vue3-snackbar"; import { h } from "vue";
export default { inject: ["snackbarOptions"], render() { return h(Vue3Snackbar, this.snackbarOptions); }, };
Then you can direct the user to set up their config like so:
> nuxt.config.ts
```js
export default defineNuxtConfig({
// Prop details at https://github.com/craigrileyuk/vue3-snackbar#props
snackbar: {
bottom: true,
right: true,
duration: 5000
},
// Change this to whatever the node_modules path ends up being
modules: ["./modules/nuxt-snackbar"],
});
And then, somewhere in their layout, they simply need to include something like:
<template>
<header>The header</header>
<main>
Main content
</main>
<footer>The footer</footer>
<NuxtSnackbar />
</template>
<script setup>
const snackbar = useSnackbar();
const test = () => {
snackbar.add({
type: "success",
text: "Testing",
});
};
</script>
That's working!! Thanks a lot. I am kind of new to Vue and Nuxt and this helped a lot!
Like mentioned in the title need documentation on how to use it with Nuxt.js