Omnislash Posts - Answer Overflow

Omnislash

Explore posts from servers

•Created by Omnislash on 4/17/2025 in #❓・help

UI3 UTable horizontal scroll

Hello Kapa My UTable won't scroll horizontally when it's bigger that it's container :/ Here is my code : https://github.com/ribbityfrog/steamfrog-front/blob/main/app/components/kit/table/index.vue And the component Flex if you need it : https://github.com/ribbityfrog/steamfrog-front/blob/main/app/components/structure/Flex.vue Thanks 🙂

23 replies

NNuxt

•Created by Omnislash on 4/15/2025 in #❓・help

UI3 on stackblitz

Yo Kapi I want to setup Nuxt UI 3 on stackblitz to have some issue reproduction, but I don't seem to be able to (important to note that I have no problem to do it with UI 2) Here is the current error :

ERROR  Cannot load native addon because loading addons is disabled: /home/projects/nuxt-starter-vno1qxvb/node_modules/@tailwindcss/oxide-linux-x64-musl/tailwindcss-oxide.linux-x64-musl.node

ERROR  Cannot load native addon because loading addons is disabled: /home/projects/nuxt-starter-vno1qxvb/node_modules/@tailwindcss/oxide-linux-x64-musl/tailwindcss-oxide.linux-x64-musl.node

18 replies

NNuxt

•Created by Omnislash on 4/15/2025 in #❓・help

Nuxt app/ folder structure error 500

Hello, Trying to move to app/ folder structure, but I keep having this error :

Cannot find module '~/app/utils/ui/button' imported from 'D:/Projects/nuxt-base/app/components/kit/button/index.vue'. - If you rely on tsconfig.json's "paths" to resolve modules, please install "vite-tsconfig-paths" plugin to handle module resolution. - Make sure you don't have relative aliases in your Vitest config. Use absolute paths instead. Read more: https://vitest.dev/guide/common-errors

Cannot find module '~/app/utils/ui/button' imported from 'D:/Projects/nuxt-base/app/components/kit/button/index.vue'. - If you rely on tsconfig.json's "paths" to resolve modules, please install "vite-tsconfig-paths" plugin to handle module resolution. - Make sure you don't have relative aliases in your Vitest config. Use absolute paths instead. Read more: https://vitest.dev/guide/common-errors

I didn't touch tsconfig, utils and components are both in app/ I have this in my nuxt.config.ts though :

    components: [
        '~/components',
        {
            path: '~/components/structure',
            global: true,
            pathPrefix: false
        },
    ],

    components: [
        '~/components',
        {
            path: '~/components/structure',
            global: true,
            pathPrefix: false
        },
    ],

6 replies

NNuxt

•Created by Omnislash on 4/10/2025 in #❓・help

Set layout in routes

Hello Kapa told me about a legendary appLayout in the nuxt.config.ts but it doesn't seem to exist

    routeRules: {
        '/admin/**': { ssr: false, appLayout: 'admin' },
    }

    routeRules: {
        '/admin/**': { ssr: false, appLayout: 'admin' },
    }

Is there a way without using a middleware to set up a layout for a specific routes ? Thanks 🙂

6 replies

NNuxt

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

Nuxt UI 3 Dynamic Theming

15 replies

NNuxt

•Created by Omnislash on 4/2/2025 in #❓・help

UNavigationMenu custom variants UI3

Hello Kapa 🙂 Show me how to create custom variants for UNavigationMenu in Nuxt UI3 I mostly want to change links colors (hover, activated or not) and size

8 replies

NNuxt

•Created by Omnislash on 4/2/2025 in #❓・help

UButton custom variants with UI3

Hello dear kapa I was creating custom variants in Nuxt UI2 to choose from when creating a button, I fail to see how to do it with Nuxt UI3 Ideally, I would like to create custom colors and custom variants and mix them at will Thanks 🙂

19 replies

NNuxt

•Created by Omnislash on 3/8/2025 in #❓・help

SameSite "does not have a proper SameSite attribute"

Hello, I try add a cookie this way :

const token = useCookie('token', {
            sameSite: 'lax',
            secure: true,
        })

const token = useCookie('token', {
            sameSite: 'lax',
            secure: true,
        })

not matter what I do for sameSite, firefox keeps telling me this : Cookie “token” does not have a proper “SameSite” attribute value. Soon, cookies without the “SameSite” attribute or with an invalid value will be treated as “Lax”. This means that the cookie will no longer be sent in third-party contexts. If your application depends on this cookie being available in such contexts, please add the “SameSite=None“ attribute to it. To know more about the “SameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite Google looks happy about this though

5 replies

NNuxt

•Created by Omnislash on 2/26/2025 in #❓・help

useSeoMeta with i18n

Hello, I use useSeoMeta with i18n I have two languages : fr and en. My meta works perfectly fine with https://domain.fr/fr and https://domain.fr/en, but fails with https://domain.fr. How to treat the case when the root domain doesn't have the prefix yet when shared ? Thanks 🙂

19 replies

CDCloudflare Developers

•Created by Omnislash on 2/25/2025 in #general-help

Blocked on a refresh page on Cloudflare Pages

2 replies

NNuxt

•Created by Omnislash on 2/24/2025 in #❓・help

layout slot issue

Hello, For some reason, my footer ends up above my layout slot everytime I change page.... then it goes back to normal if I refresh the page The template of my App.vue :

<template>
    <NuxtLayout>
        <NuxtPage />
    </NuxtLayout>

    <UModals />
    <UNotifications />
</template>

<template>
    <NuxtLayout>
        <NuxtPage />
    </NuxtLayout>

    <UModals />
    <UNotifications />
</template>

My layout :

    <Page>
        <Section full class="pt-4 pb-6">
            <!-- <HeaderDefault :menu="leAuth.isAuthenticated ? 'connected' : 'main'" /> -->
            <HeaderDefault />
        </Section>
        <slot />
        <footer class="w-full">
            <Section wide class="bg-neutral-light dark:bg-darkness-700 py-4">
                <FooterDefault />
            </Section>
        </footer>
    </Page>

    <Page>
        <Section full class="pt-4 pb-6">
            <!-- <HeaderDefault :menu="leAuth.isAuthenticated ? 'connected' : 'main'" /> -->
            <HeaderDefault />
        </Section>
        <slot />
        <footer class="w-full">
            <Section wide class="bg-neutral-light dark:bg-darkness-700 py-4">
                <FooterDefault />
            </Section>
        </footer>
    </Page>

Page and Section are divs with spacements, so nothing special really. Page for exemple in case of :

<template>
    <div :class="`flex flex-col items-center min-h-screen w-screen overflow-x-hidden text-darkness dark:text-neutral-light text-lg font-text font-normal leading-snug bg-neutral-light dark:bg-darkness ${debugP}`">
        <slot />
    </div>
</template>

<template>
    <div :class="`flex flex-col items-center min-h-screen w-screen overflow-x-hidden text-darkness dark:text-neutral-light text-lg font-text font-normal leading-snug bg-neutral-light dark:bg-darkness ${debugP}`">
        <slot />
    </div>
</template>

How can the div under <slot /> can end up before <slot /> ?

22 replies

NNuxt

•Created by Omnislash on 2/20/2025 in #❓・help

Is nuxt-security important ?

Hello Is nuxt-security mandatory to have a safe Nuxt 3 website, or is it mainly for an extra layer of protection ? Disclaimer : I use nuxt as a front only, hosted on cloudflare pages. thanks 🙂

5 replies

NNuxt

•Created by Omnislash on 2/20/2025 in #❓・help

Content-Security-Policy with nuxt scripts gtm

Hello, I use this : https://scripts.nuxt.com/scripts/tracking/google-tag-manager I now have this error on a Firefox based browser : Content-Security-Policy: The page’s settings blocked an inline script (script-src-elem) from being executed because it violates the following directive: “script-src http: https:” What to do ?

15 replies

NNuxt

•Created by Omnislash on 2/14/2025 in #❓・help

useScriptGoogleTagManager no dataLayer push function

Hello, I'm following this : https://scripts.nuxt.com/scripts/tracking/google-tag-manager When I try this :

const { proxy } = useScriptGoogleTagManager({
  id: 'YOUR_ID' // id is only needed if you haven't configured globally
})
// example
proxy.dataLayer.push({ event: 'conversion', value: 1 })

const { proxy } = useScriptGoogleTagManager({
  id: 'YOUR_ID' // id is only needed if you haven't configured globally
})
// example
proxy.dataLayer.push({ event: 'conversion', value: 1 })

dataLayer doesn't exist, it's in proxy.google_tag_manager.dataLayer instead, and it's different. If I try to call push from it : Property 'push' does not exist on type 'AsAsyncFunctionValues<{ gtmDom: boolean; gtmLoad: boolean; subscribers: number; }>' How to get the dataLayer ? Thanks 🙂

11 replies

NNuxt

•Created by Omnislash on 2/12/2025 in #❓・help

useScriptGoogleTagManager returns void

Hello, I'm trying to use useScriptGoogleTagManager

const { proxy } = useScriptGoogleTagManager({
            id: this._gtm
        })

const { proxy } = useScriptGoogleTagManager({
            id: this._gtm
        })

It says : Property 'proxy' does not exist on type 'void'.ts(2339) I'm a bit lost, it looks like it should work from this link ? https://scripts.nuxt.com/scripts/tracking/google-tag-manager

27 replies

NNuxt

•Created by Omnislash on 2/5/2025 in #❓・help

i18n multiple files for each language

Hello, I would like to split my translations into several translations files to have them by page. I found this, the second answer (rated 1) looks good enough for me : https://stackoverflow.com/questions/48861001/multiple-translations-files-per-language-with-vue-i18n-and-nuxtjs Any thoughts ? Is that the way to go ? Thanks 🙂

9 replies

NNuxt

•Created by Omnislash on 12/29/2024 in #❓・help

Redirect all routes to /

Hello, I would like to redirect all potential routes to my index page ('/') I tried this in nuxt.config.ts :

    routeRules: {
        '/**': { redirect: '/' },
    },

    routeRules: {
        '/**': { redirect: '/' },
    },

But it looks like it's giving me an infinite loop I didn't try with a middleware but... it seems more proper and elegant to do it in the routeRules ? Thanks 🙂

5 replies

NNuxt

•Created by Omnislash on 12/25/2024 in #❓・help

NuxtImg, custom query parameter on source

Hello, I allow my user to customize their logo on their page. However, since I always register it under the name "logo", the NuxtImg cache doesn't refresh and doesn't show the new logo The solution should be simple, adding the update timestamp as a query parameter of the source.... but the source is already customized with info like width, fit, aspect ratio.... So... how can I add a custom query parameter to my source ? Maybe there is actually a simpler solution ? Thanks ^^

5 replies

NNuxt

•Created by Omnislash on 12/16/2024 in #❓・help

NuxtUI Input placeholder/italic

Hello 🙂 I use NuxtUI, I would like my inputs to have their placeholder in italic but not the entered text. Here is my app.config.ts :

        input: {
            placeholder: 'italic',
            base: 'not-italic',
            white: {
                outline: 'bg-transparent dark:bg-transparent',
            }
        },

        input: {
            placeholder: 'italic',
            base: 'not-italic',
            white: {
                outline: 'bg-transparent dark:bg-transparent',
            }
        },

Right now, it says in italic the whole time. I tried : - base: '!not-italic' -> The placeholder is not in italic either anymore - Adding not-italic in the white.outline -> No change, using important or not An idea ^^" ? Thanks

6 replies

NNuxt

•Created by Omnislash on 12/15/2024 in #❓・help

Wrapping useToast

I'm looking for wrapping useToast, I need some types like ToastInterface and NotificationColor but I can't seem to be able to find them How do I import useToast types in my plugin or composable ? Thanks 🙂

7 replies

Gaming

Programming