PoTTii Posts - Answer Overflow

PoTTii

•Created by PoTTii on 6/27/2024 in #❓・help

Extend NuxtUI Form Component

I'm using Nuxt UI and I want to extend the UForm component, to always scrol lthe first error into view. I would normally create a new Component where I do something like this:

<script setup lang="ts">
interface Props {
  schema: Object,
  state: Object,
}

async function onError (event: FormErrorEvent) {
  const element = document.getElementById(event.errors[0].id)
  element?.focus()
  element?.scrollIntoView({ behavior: 'smooth', block: 'center' })
}
</script>

<template>
  <UForm
    :schema="schema"
    :state="state"
    :validate-on="['submit']"
    @submit="$emit('submit')"
    @error="onError"
  >
    <slot></slot>
  </UForm>
</template>

<script setup lang="ts">
interface Props {
  schema: Object,
  state: Object,
}

async function onError (event: FormErrorEvent) {
  const element = document.getElementById(event.errors[0].id)
  element?.focus()
  element?.scrollIntoView({ behavior: 'smooth', block: 'center' })
}
</script>

<template>
  <UForm
    :schema="schema"
    :state="state"
    :validate-on="['submit']"
    @submit="$emit('submit')"
    @error="onError"
  >
    <slot></slot>
  </UForm>
</template>

The problem is, the types used for schema & state don't seem to be exported. How would you usually extend one of Nuxt UIs components? What's the best approach?

1 replies

NNuxt

•Created by PoTTii on 5/22/2024 in #❓・help

Nuxt 3 Repository Pattern - Best Practice?

What is the way to go nowadays to manage API Calls in a repository pattern? I followed a Medium Post (https://medium.com/@luizzappa/nuxt-3-repository-pattern-organising-and-managing-your-calls-to-apis-with-typescript-acd563a4e046), but since Nuxt 3.10 you run into warnings because every method uses useAsyncData and sometimes I'm gonna call a method to be used after a user intreaction, so on client side only. Can anony recommand another way / resource to do it?

4 replies

NNuxt

•Created by PoTTii on 5/3/2024 in #❓・help

Could not compile template ui.colors after installing Nuxt UI

2 replies

NNuxt

•Created by PoTTii on 3/4/2024 in #❓・help

Complex Layout (Sidenav + Nested Page with transitions, different on Mobile)

Has anyone ever been able to achieve this? So I want to have a Layout, that displays a sidenav in 1/3 of the page and the <NuxtPage> in 2/3 of it. Now here comes the trick part: On Mobile, the Sidenav should be displayed in Full width and the content should not be displayed at all. If you click on one link inside of the sidenav, the content should be displayed in full screen height and width and a Back Button at the top should appear. This back button should not do $router.back() but instead, route to the "Parent" page of that nested page. If you click on a Page inside of the first page, it should display this page aswell and the Back Button should route to the previous page. I have it kind of working but I did it in a very very ugly way, and I'm relying solely on $router.back().

2 replies

Gaming

Programming