N
Nuxt•2y ago
baybreezy

Render function for VCalendar

Hey, can anyone help me with creating a render function for this VCalendar package? The issue I am having is with getting the slots to work. This is the code I have that is not working. Idk how to pass the slots so that when i use it in my template files, it will actually use the slot 
import { setupCalendar, Calendar, DatePicker } from "v-calendar";
import { ClientOnly } from "#components";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(setupCalendar, {});

  nuxtApp.vueApp.component("VCalendar", {
    setup(props, ctx) {
      const slots = ctx.slots.default ? ctx.slots.default() : ctx.slots;

      return () =>
        h(ClientOnly, () =>
          h(
            Calendar,
            {
              ...props,
              ...ctx.attrs,
              color: "gray",
              isDark: { selector: "html", darkClass: "dark" },
            }
            // slots area
          )
        );
    },
  });
});
import { setupCalendar, Calendar, DatePicker } from "v-calendar";
import { ClientOnly } from "#components";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(setupCalendar, {});

  nuxtApp.vueApp.component("VCalendar", {
    setup(props, ctx) {
      const slots = ctx.slots.default ? ctx.slots.default() : ctx.slots;

      return () =>
        h(ClientOnly, () =>
          h(
            Calendar,
            {
              ...props,
              ...ctx.attrs,
              color: "gray",
              isDark: { selector: "html", darkClass: "dark" },
            }
            // slots area
          )
        );
    },
  });
});
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?