o.m Posts - Answer Overflow

Topics

o.m

Explore posts from servers

NNuxt FFilament

•Created by o.m on 4/28/2025 in #❓┊help

Unable to Display Sub-Navigation for Resources

No description

2 replies

•Created by o.m on 4/28/2025 in #❓┊help

Added new Resource but it is not showing on the left navigation?

No description

22 replies

•Created by o.m on 4/25/2025 in #❓┊help

Implementing tabs that changes the whole page

How do I implement a tab that will change the whole page and set the url? The current setup of that is that you can click multiple tabs without affecting the url. In my case I have a lots of tabs and some tabs contains tables and I don't want the page to load all the contents of those tabs in one go as it will severely affect the resource and performance on the server. Please see the demo

37 replies

•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

•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

•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

•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

•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

•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"});

6 replies

•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

•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

•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

•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

•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

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

Why does my form submit for every keystroke?

41 replies

•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

•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

•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

•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

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

What is causing Failed to import assets

No description

1 replies