Omnislash Posts - Answer Overflow

Omnislash

•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

NNuxt

•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

NNuxt

•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

NNuxt

•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

NNuxt

•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

NNuxt

•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

NNuxt

•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

NNuxt

•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

NNuxt

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

UForm schema array

Hello, I need to create an extensible form for my project I'm using zod, which looks like this (no problem on that side)

const entryForm = z.object({
    id: z.number(),
    title: z.string().min(1, 'Title too short'),
    description: z.string()
})

const attachForm = z.array(entryForm);

type EntryForm = z.infer<typeof entryForm>;
type AttachForm = z.infer<typeof attachForm>;

const extState: AttachForm = reactive([]);

const entryForm = z.object({
    id: z.number(),
    title: z.string().min(1, 'Title too short'),
    description: z.string()
})

const attachForm = z.array(entryForm);

type EntryForm = z.infer<typeof entryForm>;
type AttachForm = z.infer<typeof attachForm>;

const extState: AttachForm = reactive([]);

I then go over the array to display the form :

<UForm :schema="attachForm" :state="extState" class="space-y-4" @submit="trySubmit">

  <div v-for="item in extState">
    Group {{ item.id }}
    <UFormGroup label="Title" name="title">
      <UInput v-model="item.title" placeholder="Title"></UInput>
    </UFormGroup>
    <UFormGroup label="Description" name="description">
      <UInput v-model="item.description" placeholder="Description"></UInput>
    </UFormGroup>
  </div>

  <UButton type="submit"> Submit </UButton>
</UForm>

<UForm :schema="attachForm" :state="extState" class="space-y-4" @submit="trySubmit">

  <div v-for="item in extState">
    Group {{ item.id }}
    <UFormGroup label="Title" name="title">
      <UInput v-model="item.title" placeholder="Title"></UInput>
    </UFormGroup>
    <UFormGroup label="Description" name="description">
      <UInput v-model="item.description" placeholder="Description"></UInput>
    </UFormGroup>
  </div>

  <UButton type="submit"> Submit </UButton>
</UForm>

The validation itself works but.... I can't seem to find how to name the UFormGroup for the errors to be printed within the form. Any idea ^^" ? Thanks

1 replies

NNuxt

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

Nuxt UI VerticalNavigation selected too wide

1 replies

NNuxt

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

Deploy without Nitro

Hello, I'm using Nuxt only as a front, coding the back on Adonis. I disabled the SSR, since you need to be connected to see any part of my service there is no SEO involved (and I'm actually here to minimize the workload on the server ends) I don't seem to find in the documentation or from a trusted source how to disable Nitro and deploy without it. Is there any link about it please ^^ ? Thanks

9 replies

NNuxt

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

Can't run after cloning repo

4 replies

NNuxt

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

useFetch vs $fetch

Hello, First of all, I understand that : - useFetch = useAsyncData + $fetch - $fetch is pre-hydration (if awaited, even resolved pre-hydration) That being said, with SSR fully disabled, is there any perk using useFetch instead of $fetch ? SSR is disabled for me because : - Nothing will be publicly accessible anyway, no SEO needed - For the type of project, it's more important to reduce the server workload and the client will be ok to "wait the extra time" Thanks 🙂

3 replies

NNuxt

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

Manually cancel useFetch

Hello all 🙂 Is it possible to cancel a useFetch, if for exemple the user leaves the page before the call is finished ? I saw how to send a signal with $fetch but nothing with useFetch. Thanks ^^

3 replies

NNuxt

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

$fetch without await

12 replies

Gaming

Programming