Omnislash Posts - Answer Overflow

Topics

Omnislash

Explore posts from servers

NNuxt CDCloudflare Developers

•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

•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

No description

2 replies

•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

•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

•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

•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

•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

•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

•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

•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

•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

•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

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

Nuxt Context error despite onNuxtReady

Hello I have the following error : Uncaught Error: [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables. Problem is, the error is from this code (in a composable) :

    constructor() {
        onNuxtReady(async () => {
            this._getAuth()
            if (this.isAuthenticated && this.isExpired)
                this.logout()
        })
    }

    constructor() {
        onNuxtReady(async () => {
            this._getAuth()
            if (this.isAuthenticated && this.isExpired)
                this.logout()
        })
    }

Isn't the goal of onNuxtReady to avoid this problem ? what am I doing wrong ? Thanks 🙂

6 replies

•Created by Omnislash on 11/27/2024 in #❓・help

eslint end-tag-with-attributes

Hello 🙂 Pretty simple (I hope ^^") I installed eslint automatically this way, with stylistic without prettier : https://eslint.nuxt.com/packages/module So far so good 🙂 But then, this is considered an error : <MyComponent end>

Parsing error: end-tag-with-attributes. eslintvue/no-parsing-error

Parsing error: end-tag-with-attributes. eslintvue/no-parsing-error

How can I authorize specific attributes, or even better specific attributes for specific components ? I feel like it should be possible since those work fine :

<UModal prevent-close>

<div v-if="true"></div>
<div v-else></div>

<UModal prevent-close>

<div v-if="true"></div>
<div v-else></div>

Thanks 🙂

6 replies

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

useServerSeoMeta ref/reactive vs await and one time rendering

Hello :), I read here and there (sorry, not very helpful ^^") that I should give directly the ref or computed to useHead/useSeoMeta/useServerSeoMeta so I'm assured the value will be updated to the right one. That being said, especially with useServerSeoMeta, not only it's server side but for SEO but even more og/twitter the first render matter AND it awaits on the useFetch to have the right value. What is the point in making it reactive since it HAS to have the right value right away anyway ?

10 replies

•Created by Omnislash on 11/24/2024 in #❓・help

Separate SEO and user rendering

Hello :), If I'm not mistaken, it is required to use await with useFetch (or useAsyncData) to ensure to have the best SEO possible or even just for the Social Media sharing to work properly. So, dumb question.... to have a snappy result, is it possible to render a different page for Google/Social Network and for the users ? The goal would be to have something fully server-side for SEO and something snappier for the users 🙂 Thanks ^^

6 replies

•Created by Omnislash on 11/24/2024 in #❓・help

useFetch, await, SEO and og

Hello all 🙂 I'm a bit concerned about some result I have using useFetch and useSeoMeta (or useServerSeoMeta), so I just want to confirm some stuff 🙂 Case 1 : useFetch without await and use(Server)SeoMeta In the Google search console, it looks like the description/ogdescription is correct 100% of the time. However, it's not working properly when sharing it over Discord, LinkedIn or else Case 2 : useFetch WITH await and use(Server)SeoMeta Now it works properly everywhere I don't really understand how it appears replaced for Google while not working on social networks. I guess Google render it twice or something but Social Network don't. Question Can I be confident that useFetch without await will be fully seo-optimized and the issue is just with Social Networks ? Or should I always use useFetch WITH await when I'm aiming for the best possible SEO ? Thanks ^^

8 replies

•Created by Omnislash on 10/17/2024 in #❓・help

Hydration loading

Hello 🙂 I understand that when the server is done loading, you can display somethign while the client is downloading the content using either <ClientOnly> or OnMounted() Is it possible to display something while the server is loading ? For exemple, to exaggerate it, if I put a 10 seconds waiting for an endpoint to answer, I will have to wait for 10s to display anything no matter what ? I would say yes since wherever I check, documentation including, you have to await the useFetch (or useAsyncData) but... who knows, I might have missed something big ^^" Thanks 🙂

3 replies

•Created by Omnislash on 8/21/2024 in #❓・help

Nuxt UI Theming : Nested primary color

Hello 🙂 If I crated this in my tailwind config :

    theme: {
        extend: {
            colors: {
                    main: {
                        '50': "#EFF1F5",
                        '100': "#E0E2EB",
                        '200': "#C0C6D8",
                        '300': "#A4ACC6",
                        '400': "#858FB2",
                        '500': "#66739F",
                        '600': "#515C80",
                        '700': "#3D4561",
                        '800': "#272D3F",
                        '900': "#14161F",
                        '950': "#0A0B10",
                        DEFAULT: '#66739F',
                    },
            },

    theme: {
        extend: {
            colors: {
                    main: {
                        '50': "#EFF1F5",
                        '100': "#E0E2EB",
                        '200': "#C0C6D8",
                        '300': "#A4ACC6",
                        '400': "#858FB2",
                        '500': "#66739F",
                        '600': "#515C80",
                        '700': "#3D4561",
                        '800': "#272D3F",
                        '900': "#14161F",
                        '950': "#0A0B10",
                        DEFAULT: '#66739F',
                    },
            },

And this in my nuxt config :

    ui: {
        primary: 'main',
    }

    ui: {
        primary: 'main',
    }

It works fine But if I write main this way :

brand: {
  main: {}
}

brand: {
  main: {}
}

It looks like this doesn't work in the nuxt conf :

primary: 'brand-main', // I tried 'braind.main' too

primary: 'brand-main', // I tried 'braind.main' too

Is there a way to nest my colors before making it the primary in nuxt ? Thanks 🙂

1 replies