o.m Posts - Answer Overflow

o.m

•Created by o.m on 12/20/2024 in #❓・help

When I click outside the modal it doesnt close. Why doesnt onClickOutside not work ?

<template>
    <div
        v-if="isOpen"
        class="fixed inset-0 z-50 flex items-center justify-center bg-coffee-900 bg-opacity-50"
    >
        <div ref="modal" :class="computedModalClass" :style="styleModal">
            <button
                @click="closeModal"
                class="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
                v-if="enableCloseBtn"
            >
                <img
                    src="/images/Close-Circle-Streamline-Solar.svg"
                    class="text-red-500"
                    alt="Close"
                    width="30"
                    height="30"
                />
            </button>
            <slot></slot>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useDraggable, onClickOutside } from "@vueuse/core";

const props = defineProps({
    isOpen: {
        type: Boolean,
        required: true,
    },
    modalclass: {
        type: String,
        required: false,
    },
    enableCloseBtn: {
        type: Boolean,
        default: true,
        required: false,
    },
});

const modalTarget = useTemplateRef("modal");
const modal = ref<HTMLElement | null>(null);
const styleModal = ref();
const defaultImageClass = "bg-white dark:bg-gray-800 p-4 shadow-lg";

const emits = defineEmits(["close"]);

if (modal.value) {
    const { style } = useDraggable(modal, {
        initialValue: {
            x: (window.innerWidth - modal.value.offsetWidth) / 2,
            y: (window.innerHeight - modal.value.offsetHeight) / 2,
        },
    });
    styleModal.value = style.value;
}

const computedModalClass = computed(() => {
    return props.modalclass ? props.modalclass : defaultImageClass;
});

const closeModal = () => {
    emits("close");
};

onClickOutside(modalTarget.value, () => {
    console.log(modalTarget.value);
    closeModal();
});
</script>

<template>
    <div
        v-if="isOpen"
        class="fixed inset-0 z-50 flex items-center justify-center bg-coffee-900 bg-opacity-50"
    >
        <div ref="modal" :class="computedModalClass" :style="styleModal">
            <button
                @click="closeModal"
                class="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
                v-if="enableCloseBtn"
            >
                <img
                    src="/images/Close-Circle-Streamline-Solar.svg"
                    class="text-red-500"
                    alt="Close"
                    width="30"
                    height="30"
                />
            </button>
            <slot></slot>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useDraggable, onClickOutside } from "@vueuse/core";

const props = defineProps({
    isOpen: {
        type: Boolean,
        required: true,
    },
    modalclass: {
        type: String,
        required: false,
    },
    enableCloseBtn: {
        type: Boolean,
        default: true,
        required: false,
    },
});

const modalTarget = useTemplateRef("modal");
const modal = ref<HTMLElement | null>(null);
const styleModal = ref();
const defaultImageClass = "bg-white dark:bg-gray-800 p-4 shadow-lg";

const emits = defineEmits(["close"]);

if (modal.value) {
    const { style } = useDraggable(modal, {
        initialValue: {
            x: (window.innerWidth - modal.value.offsetWidth) / 2,
            y: (window.innerHeight - modal.value.offsetHeight) / 2,
        },
    });
    styleModal.value = style.value;
}

const computedModalClass = computed(() => {
    return props.modalclass ? props.modalclass : defaultImageClass;
});

const closeModal = () => {
    emits("close");
};

onClickOutside(modalTarget.value, () => {
    console.log(modalTarget.value);
    closeModal();
});
</script>

Why doesnt the closeModal(); get called when I click outside the ref="modal" ?

4 replies

NNuxt

•Created by o.m on 12/20/2024 in #❓・help

How do I get the current DOM value of useTemplateRef() ?

I have this code and the watchEffect doesn't log everytime I dran an element. Is it possible to get the value of the current DOM after dragging the arrangement of the element?

<script setup lang="ts">
import { ref } from "vue";
import Sortable from "sortablejs";

// Reference to the list element
const itemsRef = useTemplateRef<HTMLElement | null>("items");

const list = ref(["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]);

onMounted(() => {
    if (itemsRef.value) {
        // Initialize Sortable on the list element
        Sortable.create(itemsRef.value, {
            animation: 150,
            ghostClass: "sortable-ghost",
            group: "shared",
        });
    }
    watchEffect(() => {
        console.log(itemsRef.value);
    });
});
</script>

<template>
    <ul id="items" ref="items">
        <li v-for="item in list">
            {{ item }}
        </li>
    </ul>
</template>

<style scoped></style>

<script setup lang="ts">
import { ref } from "vue";
import Sortable from "sortablejs";

// Reference to the list element
const itemsRef = useTemplateRef<HTMLElement | null>("items");

const list = ref(["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]);

onMounted(() => {
    if (itemsRef.value) {
        // Initialize Sortable on the list element
        Sortable.create(itemsRef.value, {
            animation: 150,
            ghostClass: "sortable-ghost",
            group: "shared",
        });
    }
    watchEffect(() => {
        console.log(itemsRef.value);
    });
});
</script>

<template>
    <ul id="items" ref="items">
        <li v-for="item in list">
            {{ item }}
        </li>
    </ul>
</template>

<style scoped></style>

10 replies

NNuxt

•Created by o.m on 12/19/2024 in #❓・help

Dynamic routes examples

Can I get a sample when using a dynamic route?

4 replies

NNuxt

•Created by o.m on 12/18/2024 in #❓・help

How do I get the updated data and display correctly?

In my frontend I have a v-for loop that loops how many cards are there

Curriculumvit.vue
<Cards
  v-for="(template, index) in templates"
  :key="index"
  :name="template.name"
  @delete="handleDeleteTemplate(template.id)"
  @edit="handleEditTemplate(template.id)"
  @preview="handlePreviewTemplate(template.id)"
  @statistics="handleStatisticsTemplate(template.id)"
/>

const handleUserTemplates = async () => {
    templates.value = await getUserTemplate();
};
-----------------------------------
// composable template.ts
const getUserTemplate = async (): Promise<any> => {
    try {
        const { data } = await useAsyncData(() =>
            requestFetch("/api/template/user", { method: "GET" })
        );
        return data.value?.body?.templates;
    } catch (err) {
        console.log(err);
    }
};

Curriculumvit.vue
<Cards
  v-for="(template, index) in templates"
  :key="index"
  :name="template.name"
  @delete="handleDeleteTemplate(template.id)"
  @edit="handleEditTemplate(template.id)"
  @preview="handlePreviewTemplate(template.id)"
  @statistics="handleStatisticsTemplate(template.id)"
/>

const handleUserTemplates = async () => {
    templates.value = await getUserTemplate();
};
-----------------------------------
// composable template.ts
const getUserTemplate = async (): Promise<any> => {
    try {
        const { data } = await useAsyncData(() =>
            requestFetch("/api/template/user", { method: "GET" })
        );
        return data.value?.body?.templates;
    } catch (err) {
        console.log(err);
    }
};

Upon first loading the page I have 2 cards but right after creating a new template I still get 2 cards even though I was able to retrieve 3 templates after the api call when i look at the network

// this is the function that calls createTemplate
const handleCreateTemplateUser = async () => {
    const { user } = useAuth();
    await createUserTemplate({
        name: name.value,
        email: user.value?.email,
    });
    closeModal();
    await refreshNuxtData();
};

// this is the function that calls createTemplate
const handleCreateTemplateUser = async () => {
    const { user } = useAuth();
    await createUserTemplate({
        name: name.value,
        email: user.value?.email,
    });
    closeModal();
    await refreshNuxtData();
};

29 replies

NNuxt

•Created by o.m on 12/17/2024 in #❓・help

Why is it when I refresh the page I get api calls error?

This is the code on me dashboard.vue

<template>
    <div class="flex flex-col min-h-screen">
        <DashboardHeader :user="user" />
        <main class="flex-grow w-full mx-auto">
            <slot />
        </main>
        <Footer />
    </div>
</template>
<script setup lang="ts">
const { user, getCurrentUser } = useAuth();
getCurrentUser();
</script>

<template>
    <div class="flex flex-col min-h-screen">
        <DashboardHeader :user="user" />
        <main class="flex-grow w-full mx-auto">
            <slot />
        </main>
        <Footer />
    </div>
</template>
<script setup lang="ts">
const { user, getCurrentUser } = useAuth();
getCurrentUser();
</script>

/composables/auth.ts

    /**
     * Fetches the current authenticated user's information.
     *
     * @returns {Promise<void>} The response from the user API.
     */
    const getCurrentUser = async (): Promise<void> => {
        try {
            const data = await $fetch("/api/auth/user", {
                method: "GET",
                headers: sessionHeader,
            });

            if (data.body && "user" in data.body) {
                user.value = data.body.user;
            }
        } catch (err) {
            console.log(err);
        }
    };

    /**
     * Fetches the current authenticated user's information.
     *
     * @returns {Promise<void>} The response from the user API.
     */
    const getCurrentUser = async (): Promise<void> => {
        try {
            const data = await $fetch("/api/auth/user", {
                method: "GET",
                headers: sessionHeader,
            });

            if (data.body && "user" in data.body) {
                user.value = data.body.user;
            }
        } catch (err) {
            console.log(err);
        }
    };

75 replies

NNuxt

•Created by o.m on 12/17/2024 in #❓・help

Why doesnt nuxt support http delete method for $fetch ?

I have this code but it causes syntax error

await $fetch("/api/template/user/1", {method: "DELETE"});

await $fetch("/api/template/user/1", {method: "DELETE"});

5 replies

NNuxt

•Created by o.m on 12/17/2024 in #❓・help

Hydration mismatch help.

I am trying to learn nuxt 3 so apologies if these are pretty much basic questions for you. I am trying to get all templates and put it on a prop of the component and looping the component but I get this mismatch error. I am not sure what is the cause of this issue.

<Cards
    v-for="(template, index) in templates"
    :key="index"
    :name="template.name"
    v-if="templates"
/>

<Cards
    v-for="(template, index) in templates"
    :key="index"
    :name="template.name"
    v-if="templates"
/>

<script lang="ts" setup>
import { ref } from "vue";
import Cards from "./Cards.vue";
import Modal from "./Modal.vue";

defineProps({
    title: String,
});

interface Template {
    name: string;
}

const { createUserTemplate, getUserTemplate } = useTemplate();

const isModalOpen = ref(false);
const templates = ref<Template[]>([]);
const name = ref();

const openModal = () => {
    isModalOpen.value = true;
};
const closeModal = () => {
    isModalOpen.value = false;
};

const handleUserTemplates = async () => {
    templates.value = await getUserTemplate();
};

const handleCreateTemplateUser = async () => {
    const { user } = useAuth();
    await createUserTemplate({
        name: name.value,
        email: user.value?.email,
    });
    closeModal();
    await refreshNuxtData();
};

await handleUserTemplates();
</script>

<script lang="ts" setup>
import { ref } from "vue";
import Cards from "./Cards.vue";
import Modal from "./Modal.vue";

defineProps({
    title: String,
});

interface Template {
    name: string;
}

const { createUserTemplate, getUserTemplate } = useTemplate();

const isModalOpen = ref(false);
const templates = ref<Template[]>([]);
const name = ref();

const openModal = () => {
    isModalOpen.value = true;
};
const closeModal = () => {
    isModalOpen.value = false;
};

const handleUserTemplates = async () => {
    templates.value = await getUserTemplate();
};

const handleCreateTemplateUser = async () => {
    const { user } = useAuth();
    await createUserTemplate({
        name: name.value,
        email: user.value?.email,
    });
    closeModal();
    await refreshNuxtData();
};

await handleUserTemplates();
</script>

10 replies

NNuxt

•Created by o.m on 12/16/2024 in #❓・help

Value in composable is empty

I have this line of code that stores the user info

/composables/auth.ts
const user = ref<Form | null>(null);

const getCurrentUser = async (): Promise<void> => {
        try {
            const data = await $fetch("/api/auth/user", {
                method: "GET",
                headers: sessionHeader,
            });
            
            if (data.body && "user" in data.body) {
                user.value = data.body.user;
            }
        } catch (err) {
            console.log(err);
        }
    };

/composables/auth.ts
const user = ref<Form | null>(null);

const getCurrentUser = async (): Promise<void> => {
        try {
            const data = await $fetch("/api/auth/user", {
                method: "GET",
                headers: sessionHeader,
            });
            
            if (data.body && "user" in data.body) {
                user.value = data.body.user;
            }
        } catch (err) {
            console.log(err);
        }
    };

The code above is being called on /layouts/dashboard.vue That display's the name of the user

<template>
<DashboardHeader :user="user" />
(....)
const { user, getCurrentUser } = useAuth();
getCurrentUser();

<template>
<DashboardHeader :user="user" />
(....)
const { user, getCurrentUser } = useAuth();
getCurrentUser();

I have this component located at /components/dashboard/CurriculumVit.vue but on the page it displays nothing.

<template>
{{ useAuth().user }}
</template>

<template>
{{ useAuth().user }}
</template>

What is the cause of {{ useAuth().user }} having no value when it was able to display the name of the user ? Does useState solve this issue?

5 replies

NNuxt

•Created by o.m on 12/16/2024 in #❓・help

What causses the error `[GET] "/api/auth/user": 405 HTTP method is not allowed.`

const sessionHeader = useRequestHeaders(["session"]);
const getCurrentUser = async (): Promise<any> => {
    try {
        const data = await $fetch("/api/auth/user", {
            method: "GET",
            headers: sessionHeader,
        });

        return data;
    } catch (err) {
        console.log(err);
    }
};

const sessionHeader = useRequestHeaders(["session"]);
const getCurrentUser = async (): Promise<any> => {
    try {
        const data = await $fetch("/api/auth/user", {
            method: "GET",
            headers: sessionHeader,
        });

        return data;
    } catch (err) {
        console.log(err);
    }
};

This is my api call for getting current user

export default defineEventHandler(async (event) => {
    const body = await readBody(event);

    // const { user, session } = await validateSessionToken(sessionToken);
    console.log(body);

    return {
        status: 404,
        body: { error: "Not Found" },
    };
});

export default defineEventHandler(async (event) => {
    const body = await readBody(event);

    // const { user, session } = await validateSessionToken(sessionToken);
    console.log(body);

    return {
        status: 404,
        body: { error: "Not Found" },
    };
});

This is my server api route.

22 replies

NNuxt

•Created by o.m on 12/13/2024 in #❓・help

What causes"#build/components" from "pages/index.vue". Does the file exist ?

I am trying to reference the file in nuxt however I get this error

<script setup lang="ts">
import {
    LandingCardsFeature,
    LandingHeadlineEmail,
    LandingReviews,
    LandingTrialNotice,
} from "#build/components";
import { headlineEmail, cardsFeature } from "~/seo/landingpage.json";
const sections = [
    {
        component: LandingHeadlineEmail,
        props: {
            title1: headlineEmail.title1,
            title2: headlineEmail.title2,
            subtitle: headlineEmail.subtitle,
            image: headlineEmail.image,
            button: headlineEmail.button,
            placeholder: headlineEmail.placeholder,
        },
    },
    {
        component: LandingTrialNotice,
        props: {},
    },
    {
        component: LandingCardsFeature,
        props: {
            title: cardsFeature.title,
            subtitle: cardsFeature.subtitle,
            cards: cardsFeature.cards,
        },
    },
    {
        component: LandingReviews,
        props: {},
    },
];
</script>

<script setup lang="ts">
import {
    LandingCardsFeature,
    LandingHeadlineEmail,
    LandingReviews,
    LandingTrialNotice,
} from "#build/components";
import { headlineEmail, cardsFeature } from "~/seo/landingpage.json";
const sections = [
    {
        component: LandingHeadlineEmail,
        props: {
            title1: headlineEmail.title1,
            title2: headlineEmail.title2,
            subtitle: headlineEmail.subtitle,
            image: headlineEmail.image,
            button: headlineEmail.button,
            placeholder: headlineEmail.placeholder,
        },
    },
    {
        component: LandingTrialNotice,
        props: {},
    },
    {
        component: LandingCardsFeature,
        props: {
            title: cardsFeature.title,
            subtitle: cardsFeature.subtitle,
            cards: cardsFeature.cards,
        },
    },
    {
        component: LandingReviews,
        props: {},
    },
];
</script>

10 replies

NNuxt

•Created by o.m on 12/12/2024 in #❓・help

How do I add font files in Nuxt?

I have a font called "Urbanist" which contains a bunch of .tff files where do I put this in order to use it?

18 replies

NNuxt

•Created by o.m on 12/10/2024 in #❓・help

Why does my form submit for every keystroke?

41 replies

NNuxt

•Created by o.m on 12/9/2024 in #❓・help

What's causing the api call error when using composables?

I have this code

    // Fetch users data
    const { data } = await authRegister(form.value);
    console.log(data);

    // Fetch users data
    const { data } = await authRegister(form.value);
    console.log(data);

Which doesn't work well when calling register api. I cant create a new user This is the composable code

import type { Form } from "~/types/auth";
export const authRegister = async (form: Form): Promise<any> => {
    console.log("Form: ", form);
    return await fetch("/api/auth/register", {
        method: "POST",
        body: JSON.stringify(form),
    });
};

import type { Form } from "~/types/auth";
export const authRegister = async (form: Form): Promise<any> => {
    console.log("Form: ", form);
    return await fetch("/api/auth/register", {
        method: "POST",
        body: JSON.stringify(form),
    });
};

This is my template. Notice that the commented code works but the authRegister does not

const handleSubmit = async () => {
    // Check if passwords match
    if (form.value.password !== form.value.confirm_password) {
        error.value = "Passwords do not match";
        return;
    }

    // Fetch users data
    const { data } = await authRegister(form.value);
    console.log(data);

    // Fetch users data
    // const { data } = await useFetch("/api/auth/register", {
    //     method: "POST",
    //     body: JSON.stringify(form.value),
    // });

    // Check if there is an error
    if (data.value && "error" in data.value.body) {
        error.value = data.value.body.error;
        return;
    }
};

const handleSubmit = async () => {
    // Check if passwords match
    if (form.value.password !== form.value.confirm_password) {
        error.value = "Passwords do not match";
        return;
    }

    // Fetch users data
    const { data } = await authRegister(form.value);
    console.log(data);

    // Fetch users data
    // const { data } = await useFetch("/api/auth/register", {
    //     method: "POST",
    //     body: JSON.stringify(form.value),
    // });

    // Check if there is an error
    if (data.value && "error" in data.value.body) {
        error.value = data.value.body.error;
        return;
    }
};

20 replies

NNuxt

•Created by o.m on 12/6/2024 in #❓・help

Prisma error using nuxt

I just recently installed primsa and followed a bit of tutorial however I get this error when running the web using npm run dev

ERROR: Could not resolve ".prisma/client/index-browser"

ERROR: Could not resolve ".prisma/client/index-browser"

How do I resolve this issue?

8 replies

NNuxt

•Created by o.m on 12/6/2024 in #❓・help

Using Nuxt with Sequelize? Implementation.

Hi I am planning to use Sequelize as it has the ability to use mysql/postgres and mongodb. I would like to ask how do you implement this approach? Some code examples would be great.

5 replies

NNuxt

•Created by o.m on 9/17/2024 in #❓・help

How to render image dynamically in Nuxt?

<span class="font-semibold">
  {{ item.title }}
<img :src="`@/assets/images/${activeIndex === index ? 'minus' : 'plus'}.webp`" class="w-4 h-4" />
</span>

<span class="font-semibold">
  {{ item.title }}
<img :src="`@/assets/images/${activeIndex === index ? 'minus' : 'plus'}.webp`" class="w-4 h-4" />
</span>

The page renders but the image does not display

4 replies

NNuxt

•Created by o.m on 9/17/2024 in #❓・help

What is causing Failed to import assets

1 replies

NNuxt

•Created by o.m on 5/3/2023 in #❓・help

NuxtImg not working any workaround?

6 replies

NNuxt

•Created by o.m on 4/19/2023 in #❓・help

How to assign ID on markdown files?

3 replies

NNuxt

•Created by o.m on 4/10/2023 in #❓・help

How to find out who supplied the slot/prop value?

I have this theme that contains a slot but I am having trouble finding what parent supplied the slot. How do I trace who supplied the slot ?

<ContentList v-slot="{ list }" path="/post">

<ContentList v-slot="{ list }" path="/post">

3 replies

Gaming

Programming