Skip to content

Can't use Nuxt UI components inside the datepicker slots #1092

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Onelvis opened this issue Mar 7, 2025 · 1 comment
Closed

Can't use Nuxt UI components inside the datepicker slots #1092

Onelvis opened this issue Mar 7, 2025 · 1 comment
Labels
bug Something isn't working

Comments

@Onelvis
Copy link

Onelvis commented Mar 7, 2025

Describe the bug
Hey there! first I want to thank you all for this awesome component, it's the perfect piece I was looking for my project.
The problem arises when placing Nuxt UI components inside of the content slots of the picker, and then clicking on the picker button to open the pop over, the page becomes unresponsive and the following errors are thrown in the console:

[Vue warn]: Unhandled error during execution of setup function 
  at <Button label="Hello" > 
  at <DatepickerMenu multiCalendars=undefined modelValue=null modelType=null  ... >

Uncaught TypeError: Cannot read properties of null (reading '$nuxt')
    at tryUseNuxtApp (nuxt.js?v=c89b1c8e:228:59)
    at useNuxtApp (nuxt.js?v=c89b1c8e:234:27)
    at useAppConfig (config.js?v=c89b1c8e:33:19)
    at useUI (useUI.mjs?v=c89b1c8e:7:21)
    at setup (Button.vue:124:27)
    at callWithErrorHandling (runtime-core.esm-bundler.js?v=c89b1c8e:197:19)
    at setupStatefulComponent (runtime-core.esm-bundler.js?v=c89b1c8e:7923:25)
    at setupComponent (runtime-core.esm-bundler.js?v=c89b1c8e:7884:36)
    at mountComponent (runtime-core.esm-bundler.js?v=c89b1c8e:5240:7)
    at processComponent (runtime-core.esm-bundler.js?v=c89b1c8e:5206:9)

[Vue warn]: Unhandled error during execution of component update 
  at <DatepickerMenu multiCalendars=undefined modelValue=null modelType=null  ... > (A lot of these)

Uncaught (in promise) Maximum recursive updates exceeded in component <DatepickerMenu>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

To Reproduce

  1. You can use this link: https://codesandbox.io/p/devbox/damp-dust-rv3kv6?workspaceId=ws_H2gZcDUAHMrHXBpTMiv8Aa
  2. Click on the datepicker
  3. Uncaught (in promise) Maximum recursive updates exceeded in component . This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

Expected behavior
The datepicker successfully renders NuxtUI components on it's slots

Desktop & mobile (please complete the following information):

  • Chrome (133.0.6943.142), Brave (133.0.6943.142)
  • Library version: 11.0.0
@Onelvis Onelvis added awaiting triage The issue is not reviewed by the maintainers bug Something isn't working labels Mar 7, 2025
@chocolateimage
Copy link
Contributor

I have a similar issue just with using PrimeVue components. Example code:

<script setup>
import { Select } from 'primevue'
import VueDatePicker from '@vuepic/vue-datepicker'
import '@vuepic/vue-datepicker/dist/main.css'

const date = ref()
</script>

<template>
    <VueDatePicker v-model="date">
        <template #left-sidebar>
            <Select />
        </template>
    </VueDatePicker>
</template>

The code gives this error in the browser console:

Uncaught TypeError: this.$primevue is undefined

@Jasenkoo Jasenkoo removed the awaiting triage The issue is not reviewed by the maintainers label Mar 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants