Documentation for usage with Nuxt 3

[modbender]

Like mentioned in the title need documentation on how to use it with Nuxt.js

[pimboden]

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.

[craigrileyuk]

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.

[modbender]

@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!"

[craigrileyuk]

@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>

[modbender]

That's working!! Thanks a lot. I am kind of new to Vue and Nuxt and this helped a lot!