JonathanDoerfler Comments - Answer Overflow

Topics

JonathanDoerfler

•Created by 8l8 on 6/24/2024 in #❓・help

how can i close all accordion's label with 1 click?

Oh, didn't read carefully... You're right, the video shows a working example.. I did a little digging and found this issue: https://github.com/tailwindlabs/headlessui/issues/2876 Seems like the issue is fixed in the latest @headlessui/react version, but at the bottom people are asking for vue support... So perhaps Benjamin @benjamincanac showed the upcoming v3 of NuxtUI?

27 replies

•Created by 8l8 on 6/24/2024 in #❓・help

how can i close all accordion's label with 1 click?

@8l8 As you can see in the discussion, this problem soon will be resolved!

27 replies

•Created by 8l8 on 6/24/2024 in #❓・help

how can i close all accordion's label with 1 click?

Can you provide a code snippet or repo (e. g. stackblitz.com) of what you're trying to achieve?

27 replies

•Created by 8l8 on 6/24/2024 in #❓・help

how can i close all accordion's label with 1 click?

I looked into https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Accordion.vue There you can see 1. how elements can be closed (line 155) and 2. that buttonRefs is exposed (line 194)

27 replies

•Created by Maxi on 6/19/2024 in #❓・help

NuxtUI modal content not showing

Can you provide a more complete reproduction?

9 replies

•Created by l8x4l on 6/24/2024 in #❓・help

Pinia Store init function

Have you tried $fetch instead of useFetch?

2 replies

•Created by 8l8 on 6/24/2024 in #❓・help

how can i close all accordion's label with 1 click?

Hi @8l8 You can ref the UAccordion and then iterate over the Buttons. see https://stackblitz.com/edit/nuxt-ui-22j1bp Don't know if it's the intended way of doing so, but it works for me...

27 replies

•Created by bnason on 6/21/2024 in #❓・help

Create new v4 app

short answer: yes long answer: @manniL / TheAlexLichter released a video for you with a detailed explanation on how to granularly enable/disable the new features: https://www.youtube.com/watch?v=r4wFKlcJK6c

8 replies

•Created by Hro on 6/21/2024 in #❓・help

How to close programmatically opened nuxt ui modal from within the modal

For only closing, you can use useModal().close() also from within the modal. Like this:

<template #header>
  <div class="flex">
    <h1 class="flex-1 text-xl">
      This is some modal
    </h1>
    <UButton icon="i-heroicons-x-mark" @click="useModal().close" />
  </div>
</template>

<template #header>
  <div class="flex">
    <h1 class="flex-1 text-xl">
      This is some modal
    </h1>
    <UButton icon="i-heroicons-x-mark" @click="useModal().close" />
  </div>
</template>

If you want your parent component to do something you have to emit a custom event (see the example at https://ui.nuxt.com/components/modal#control-programmatically)

3 replies

•Created by CALIFORNIVS on 6/14/2024 in #❓・help

v-if child attribute and child merging

Is useBreakpoints() reactive? At least your variables aren't?

24 replies

•Created by Gregor on 6/10/2024 in #❓・help

nuxtpage: child page inside parent page

What @Josh Donnell says + you don't need <Nuxt Page /> within a page or a layout.

// app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

// app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

// layouts/categories.vue
<template>
  <div class="flex">
    <div class="w-full">
      Assortment
      <uLink to="/categories/cat1">Cat1</uLink>
      <uLink to="/categories/cat2">Cat2</uLink>
      <uLink to="/categories/cat3">Cat3</uLink>
    </div>
    <div>
      <slot />
    </div>
  </div>
</template>

// layouts/categories.vue
<template>
  <div class="flex">
    <div class="w-full">
      Assortment
      <uLink to="/categories/cat1">Cat1</uLink>
      <uLink to="/categories/cat2">Cat2</uLink>
      <uLink to="/categories/cat3">Cat3</uLink>
    </div>
    <div>
      <slot />
    </div>
  </div>
</template>

// pages/categories.vue
<template>
  <div>Have a look at all our categories</div>
</template>

// pages/categories.vue
<template>
  <div>Have a look at all our categories</div>
</template>

// pages/categories/[categoryid].vue
<script setup>
  definePageMeta({ layout: 'categories' });
  const { categoryid } = useRoute().params;
  /* checking the validity of the ID, getting data from a store and so on */
  const allCategories = new Map();
  allCategories.set('cat1', { name: 'Category 1' });
  allCategories.set('cat2', { name: 'Category 2' });
  allCategories.set('cat3', { name: 'Category 3' });
</script>
<template>
  <div class="w-full">Sub Assortment {{ allCategories.get(categoryid).name }}</div>
</template>

// pages/categories/[categoryid].vue
<script setup>
  definePageMeta({ layout: 'categories' });
  const { categoryid } = useRoute().params;
  /* checking the validity of the ID, getting data from a store and so on */
  const allCategories = new Map();
  allCategories.set('cat1', { name: 'Category 1' });
  allCategories.set('cat2', { name: 'Category 2' });
  allCategories.set('cat3', { name: 'Category 3' });
</script>
<template>
  <div class="w-full">Sub Assortment {{ allCategories.get(categoryid).name }}</div>
</template>

10 replies

•Created by Gregor on 6/10/2024 in #❓・help

nuxtpage: child page inside parent page

What you're trying to achieve is a "wrapper layout" around the [category].vue page, am I right?

10 replies

•Created by Just Simeon on 6/5/2024 in #❓・help

Min Values for Number Inputs, labels for Inputs

If you are using Nuxt UI, you can use <UFormGroup label="How cold is it in °C?"><UInput type="number" min="-40" /></UFormGroup>

2 replies

•Created by JonathanDoerfler on 5/23/2024 in #❓・help

How to typescript UInput?

I tried to read the code of NuxtUI but could only find types of InputSize, InputColor and InputVariant - so yeah, I think there is no full export of the UInput-type... (As I mentioned, the code from github issue #1019 didn't work for me, either I'm dumb or the code changed since 11/2023...)

16 replies

•Created by JonathanDoerfler on 5/23/2024 in #❓・help

How to typescript UInput?

Thanks @dwol! Is it right, that VSCode now just interprets it as "any"? (but at least typecheck and linter aren't complaining anymore 😉 Anyhow, I'm using inputRef.value?.input!.focus() now 🤓

16 replies

•Created by Gumaa on 5/27/2024 in #❓・help

What is a standard way of handling typescript in Nuxt3

Just create your types folder and declare your types like this:

// ~/types/whatever.ts

export { };

declare global {
  type SomeType = [boolean, string, number]; 

  interface MyFancyInterface {
    ...
  }

  const enum GlobalConstEnum {
    ...
  }

  ....
}

// ~/types/whatever.ts

export { };

declare global {
  type SomeType = [boolean, string, number]; 

  interface MyFancyInterface {
    ...
  }

  const enum GlobalConstEnum {
    ...
  }

  ....
}

You don't need to import anything thanks tou auto-imports 🙂

4 replies

•Created by JonathanDoerfler on 5/23/2024 in #❓・help

How to typescript UInput?

Yeah, same error as with HTMLInputElement: Property 'input' does not exist on type 'HTMLDivElement'. Did you mean 'oninput'?ts(2551) 😦 I couldn't find anything useful that's exported in https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Input.vue myself...

16 replies

•Created by JonathanDoerfler on 5/23/2024 in #❓・help

How to typescript UInput?

Thanks @Sam K! I'm trying to switch between several Input-Fields. Roughly like this::

const refInOne = ref<?? | null>(null>
const refInTwo = ref<?? | null>(null>
[...]
<UInput ref="refInOne" @keyup.enter="refInTwo.input.focus()" />
<UInput ref="refInTwo" @keyup.enter="refInOne.input.focus()" />

const refInOne = ref<?? | null>(null>
const refInTwo = ref<?? | null>(null>
[...]
<UInput ref="refInOne" @keyup.enter="refInTwo.input.focus()" />
<UInput ref="refInTwo" @keyup.enter="refInOne.input.focus()" />

When working with any as ?? and refInTwo.input.focus() instead of refInTwo.focus(), it works as planned - but then there is eslint/typecheck 😅

16 replies

•Created by JonathanDoerfler on 5/23/2024 in #❓・help

How to typescript UInput?

Sorry I forgot to mention I'm using NuxtUI, so the root element inside <UInput /> is a div.. I was following https://github.com/nuxt/ui/issues/1019 but the import type ... part did not work...?

16 replies

•Created by JonathanDoerfler on 5/23/2024 in #❓・help

How to typescript UInput?

When running nuxt typecheck I get the error

error TS2551: Property 'input' does not exist on type 'HTMLInputElement'. Did you mean 'oninput'?

120   el.value.input.focus()
                              ~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:9147:5
    9147     oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
             ~~~~~~~
    'oninput' is declared here.

error TS2551: Property 'input' does not exist on type 'HTMLInputElement'. Did you mean 'oninput'?

120   el.value.input.focus()
                              ~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:9147:5
    9147     oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
             ~~~~~~~
    'oninput' is declared here.

16 replies