Omnislash
Omnislash
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
No description
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
No description
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
No description
12 replies