mdthansil Posts - Answer Overflow

mdthansil

Explore posts from servers

•Created by mdthansil on 4/9/2025 in #❓・help

Nuxt UI 3 useOverlay() not showing modals

Header.vue

<script setup lang="ts">
import { LoginModal, RegisterModal, SubmitProductModal } from '#components';

const query = ref('');
const overlay = useOverlay();

const loginModal = overlay.create(LoginModal);
const registerModal = overlay.create(RegisterModal);
const submitProductModal = overlay.create(SubmitProductModal);

const showLoginModal = () => {
  loginModal.open();
};

const showRegisterModal = () => {
  registerModal.open();
};

const showSubmitProductModal = () => {
  submitProductModal.open();
};
</script>

<template>
<header class="h-[60px] flex items-center justify-between gap-5">
  <h1 class="text-2xl font-semibold">
    <NuxtLink to="/">MySite</NuxtLink>
  </h1>
  
  <UInput
    v-model="query"
    icon="lucide:search"
    placeholder="Search products or categories..."
    class="w-full"
    size="lg"
    :ui="{ trailing: '-mr-1.5' }">
    <template v-if="query?.length" #trailing>
      <UButton
        color="neutral"
        variant="ghost"
        size="sm"
        :ui="{ leadingIcon: '!size-4' }"
        class="rounded-full"
        icon="lucide:x"
        aria-label="Clear input"
        @click="query = ''" />
    </template>
  </UInput>
  
  <div class="flex items-center gap-2">
    <UButton
      size="lg"
      color="neutral"
      variant="soft"
      icon="lucide:upload"
      label="Submit Product"
      @click="showSubmitProductModal" />
    <UButton
      size="lg"
      color="neutral"
      variant="outline"
      icon="lucide:log-in"
      label="Login"
      @click="showLoginModal" />
    <UButton
      icon="lucide:user-plus"
      label="Sign Up"
      size="lg"
      @click="showRegisterModal" />
  </div>
</header>
</template>

<script setup lang="ts">
import { LoginModal, RegisterModal, SubmitProductModal } from '#components';

const query = ref('');
const overlay = useOverlay();

const loginModal = overlay.create(LoginModal);
const registerModal = overlay.create(RegisterModal);
const submitProductModal = overlay.create(SubmitProductModal);

const showLoginModal = () => {
  loginModal.open();
};

const showRegisterModal = () => {
  registerModal.open();
};

const showSubmitProductModal = () => {
  submitProductModal.open();
};
</script>

<template>
<header class="h-[60px] flex items-center justify-between gap-5">
  <h1 class="text-2xl font-semibold">
    <NuxtLink to="/">MySite</NuxtLink>
  </h1>
  
  <UInput
    v-model="query"
    icon="lucide:search"
    placeholder="Search products or categories..."
    class="w-full"
    size="lg"
    :ui="{ trailing: '-mr-1.5' }">
    <template v-if="query?.length" #trailing>
      <UButton
        color="neutral"
        variant="ghost"
        size="sm"
        :ui="{ leadingIcon: '!size-4' }"
        class="rounded-full"
        icon="lucide:x"
        aria-label="Clear input"
        @click="query = ''" />
    </template>
  </UInput>
  
  <div class="flex items-center gap-2">
    <UButton
      size="lg"
      color="neutral"
      variant="soft"
      icon="lucide:upload"
      label="Submit Product"
      @click="showSubmitProductModal" />
    <UButton
      size="lg"
      color="neutral"
      variant="outline"
      icon="lucide:log-in"
      label="Login"
      @click="showLoginModal" />
    <UButton
      icon="lucide:user-plus"
      label="Sign Up"
      size="lg"
      @click="showRegisterModal" />
  </div>
</header>
</template>

When I press any of the buttons, the modals are not showing. However, the modal works when I place the button inside the modal.

30 replies

NNuxt

•Created by mdthansil on 8/30/2024 in #❓・help

Is there any easy way to generate PDF from html in Nuxt.js?

Please help.

8 replies

KKysely

•Created by mdthansil on 6/8/2023 in #help

How can I use Kysely migration inside NextJS 13 project?

I created a folder called kysely in root directory of next js then created a migrator.ts which contains migration code (Migrator) and created a folder inside kysely folder called migrations then I placed all migrations in it. I tried to run the migrator.ts file with ts-node but it's throwing some module import issues (cannot use import module outside a module) how can I run migration in nextjs

3 replies

KKysely

•Created by mdthansil on 6/7/2023 in #help

How can i enable postgres Extensions (eg: uuid) with in Kysely Migration File

const query = sqlcreate extension "uuid-ossp";; how to execute this raw query inside migration file up method

4 replies

Gaming

Programming