\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nimport { DatePicker as VCalendarDatePicker } from 'v-calendar'\r\nimport type { DatePickerDate } from 'v-calendar/dist/types/src/use/datePicker'\r\nimport 'v-calendar/dist/style.css'\r\n\r\nconst props = defineProps({\r\n modelValue: {\r\n type: Date as PropType\u003CDatePickerDate>,\r\n default: null\r\n }\r\n})\r\n\r\nconst emit = defineEmits(['update:model-value', 'close'])\r\n\r\nconst date = computed({\r\n get: () => props.modelValue,\r\n set: (value) => {\r\n emit('update:model-value', value)\r\n emit('close')\r\n }\r\n})\r\n\r\nconst attrs = {\r\n transparent: true,\r\n borderless: true,\r\n color: 'primary',\r\n 'is-dark': { selector: 'html', darkClass: 'dark' },\r\n 'first-day-of-week': 1\r\n}\r\n\u003C/script>\r\n```\r\n\r\nAnd I use this component like this:\r\n```vue\r\n\u003Ctemplate>\r\n \u003CPagesForm\r\n :title=\"title\"\r\n :action=\"action\"\r\n @submit=\"formRef.submit()\"\r\n :submit-button-label=\"submitButtonLabel\"\r\n >\r\n \u003CUForm\r\n :validate=\"validate\"\r\n :state=\"state\"\r\n class=\"flex w-full flex-col gap-8\"\r\n @error=\"onError\"\r\n @submit=\"onSubmit\"\r\n ref=\"formRef\"\r\n >\r\n \u003CUFormGroup label=\"Name\" name=\"name\" required>\r\n \u003CUInput placeholder=\"Enter member name...\" size=\"xl\" v-model=\"state.name\" />\r\n \u003C/UFormGroup>\r\n\r\n \u003CUFormGroup label=\"Email\" name=\"email\" required>\r\n \u003CUInput placeholder=\"Enter member email...\" size=\"xl\" v-model=\"state.email\" />\r\n \u003C/UFormGroup>\r\n\r\n \u003CUFormGroup label=\"School\" name=\"school\" required>\r\n \u003CUInput placeholder=\"Enter member school...\" size=\"xl\" v-model=\"state.school\" />\r\n \u003C/UFormGroup>\r\n\r\n \u003CUFormGroup label=\"Position\" name=\"position\" required>\r\n \u003CUSelect\r\n placeholder=\"Select\"\r\n size=\"xl\"\r\n v-model=\"state.position\"\r\n :options=\"positionOptions\"\r\n />\r\n \u003C/UFormGroup>\r\n\r\n \u003CUFormGroup label=\"Joined At\" name=\"joinedAt\" required>\r\n \u003CUPopover :popper=\"{ placement: 'bottom-start' }\" class=\"w-full\">\r\n \u003CUButton\r\n icon=\"i-heroicons-calendar-days\"\r\n :label=\"format(state.joinedAt || new Date(), 'd MMM, yyy')\"\r\n color=\"white\"\r\n class=\"w-full\"\r\n size=\"xl\"\r\n />\r\n\r\n \u003Ctemplate #panel=\"{ close }\">\r\n \u003CCommonDatePicker v-model=\"state.joinedAt\" @close=\"close\" />\r\n \u003C/template>\r\n \u003C/UPopover>\r\n \u003C/UFormGroup>\r\n \u003C/UForm>\r\n \u003C/PagesForm>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nimport { format } from 'date-fns'\r\nimport type { FormSubmitEvent, FormError, FormErrorEvent } from '#ui/types'\r\nimport { positionOptions } from '~/constants/select-options/positions'\r\nimport type { MemberForm, MemberFormState } from '~/types/members'\r\n\r\nconst props = defineProps\u003CMemberForm>()\r\n\r\nconst formRef = ref()\r\n\r\nconst state = reactive\u003CMemberFormState>({\r\n name: props.form?.name || '',\r\n email: props.form?.email || '',\r\n school: props.form?.school || '',\r\n position: props.form?.position || '',\r\n joinedAt: props.form?.joinedAt || new Date(),\r\n gen: props.form?.gen || undefined,\r\n aboutThisMember: props.form?.aboutThisMember || '',\r\n facebook: props.form?.facebook || '',\r\n github: props.form?.github || '',\r\n linkedin: props.form?.linkedin || ''\r\n})\r\n\r\nconst validate = (state: MemberFormState): FormError[] => {\r\n const errors = []\r\n if (!state.name) errors.push({ path: 'name', message: 'Required' })\r\n if (!state.email) errors.push({ path: 'email', message: 'Required' })\r\n if (!state.school) errors.push({ path: 'school', message: 'Required' })\r\n if (!state.position) errors.push({ path: 'position', message: 'Required' })\r\n if (!state.joinedAt) errors.push({ path: 'joinedAt', message: 'Required' })\r\n if (!state.gen) errors.push({ path: 'gen', message: 'Required' })\r\n if (!state.aboutThisMember) errors.push({ path: 'aboutThisMember', message: 'Required' })\r\n if (!state.facebook) errors.push({ path: 'facebook', message: 'Required' })\r\n if (!state.github) errors.push({ path: 'joinedAt', message: 'Required' })\r\n if (!state.linkedin) errors.push({ path: 'linkedin', message: 'Required' })\r\n return errors\r\n}\r\n\r\nconst onError = async (event: FormErrorEvent) => {\r\n const element = document.getElementById(event.errors[0].id)\r\n element?.focus()\r\n element?.scrollIntoView({ behavior: 'smooth', block: 'center' })\r\n}\r\n\r\nconst emit = defineEmits\u003C{\r\n (e: 'form-submit', data: object): void\r\n}>()\r\n\r\nconst onSubmit = async (event: FormSubmitEvent\u003CMemberFormState>) => {\r\n emit('form-submit', event.data)\r\n}\r\n\u003C/script>\r\n```\r\n\r\n\r\nWhen I click the button, the DatePicker is shown but the label of the Button is not change. I still don't know that caused by the date is not changed or I set the label of the button wrongly. But when I put a `console.log` inside the `set()`, it does not run.\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3171,3172,3173,3176],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3174,"color":3175},"closed-by-bot","ededed",{"name":3177,"color":3175},"stale",2106,"Need help: `DatePicker` set value not work","2025-06-18T09:06:10Z","https://github.com/nuxt/ui/issues/2106",0.6756337,{"description":3184,"labels":3185,"number":3190,"owner":3146,"repository":3147,"state":3163,"title":3191,"updated_at":3192,"url":3193,"score":3194},"### Environment\n\n- Operating System: Darwin\n- Node Version: v23.4.0\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.7\n- Package Manager: bun@1.2.5\n- Builder: -\n- User Config: devtools, modules, imports, components, css, compatibilityDate, experimental, future\n- Runtime Modules: @nuxt/ui@3.0.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/recursing-browser-klwx46\n\n### Description\n\nWhen a `SelectMenu` is wrapped in a custom component which is then consumed by `FormField` validation is triggered for an instant before the component goes back to its valid state.\n\nI've tried to debug a bit and I think it's related to the fact that the `SelectMenu` uses `Input` and that input is firing a `change` event because it uses `useFormField`, even though that particular input should not be considered the \"form field\" in this instance.\n\n### Additional context\n\nhttps://github.com/user-attachments/assets/75e8c84f-612e-48f0-bf9e-dcc1fe95ffcd\n\nI'd like to open a PR and fix this myself but I'm not sure what the best approach it. Maybe `Input` could take a prop that allows it to not fire form events? i.e. `ignore-form-events=\"true\"` so the SelectMenu would use it. This could also apply for other components that use primitive form inputs inside them (Command, InputMenu) etc.\n\n### Logs\n\n```shell-script\n\n```",[3186,3187],{"name":3140,"color":3141},{"name":3188,"color":3189},"v3","49DCB8",3736,"[USelectMenu] Validation events are triggered before change when wrapped in a custom component","2025-05-14T17:24:48Z","https://github.com/nuxt/ui/issues/3736",0.681395,{"labels":3196,"number":3197,"owner":3146,"repository":3146,"state":3163,"title":3198,"updated_at":3199,"url":3200,"score":3201},[],14392,"V-calendar ","2023-01-19T17:35:07Z","https://github.com/nuxt/nuxt/issues/14392",0.68775594,{"description":3203,"labels":3204,"number":3214,"owner":3146,"repository":3147,"state":3163,"title":3215,"updated_at":3216,"url":3217,"score":3218},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nAfter implementing https://github.com/nuxt/ui/issues/2524, it is necessary to add the ability to manage the `Date` object in the `ComponentCode.vue` component.\n\nExample of the display: \n\n\n### Additional context\n\n_No response_",[3205,3208,3211,3212,3213],{"name":3206,"color":3207},"documentation","0075ca",{"name":3209,"color":3210},"enhancement","a2eeef",{"name":3188,"color":3189},{"name":3174,"color":3175},{"name":3177,"color":3175},2651,"Datepicker on docs component preview","2025-06-18T09:05:49Z","https://github.com/nuxt/ui/issues/2651",0.69431907,{"labels":3220,"number":3225,"owner":3146,"repository":3146,"state":3163,"title":3198,"updated_at":3226,"url":3227,"score":3228},[3221,3224],{"name":3222,"color":3223},"3.x","29bc7f",{"name":3157,"color":3158},14199,"2023-01-19T17:42:49Z","https://github.com/nuxt/nuxt/issues/14199",0.7017998,{"description":3230,"labels":3231,"number":3235,"owner":3146,"repository":3146,"state":3163,"title":3236,"updated_at":3237,"url":3238,"score":3239},"So a bit of an odd-ball one here, and not sure the title is perfectly correct. I've set up a bare-bones sample repo that is showing this issue as well as put it up on Netlify.\r\n\r\nElement-UI is a UI toolkit for Vue 2, and I'm seeing some very odd behaviour when using within a Nuxtjs project. I think it's Nuxtjs specific issue (used components within other apps fine) but if you think otherwise I'll also open a ticket over in their repo too!\r\n\r\nThe GIF show's it best, but as you can see when I open the date picker, the `head` goes through a number of weird changes (`title` changes, `meta` tags disappear) and never resets itself. Are they doing something weird or is Nuxtjs not handling the DOM changes they do?\r\n\r\n[GIF recording](https://cl.ly/kJau)\r\n[Sample repo](https://github.com/mikhailbot/elementui-test)\r\n[Sample website](https://janitor-rose-25820.netlify.com)\r\n\r\nNuxtjs: 0.10.6 (latest from `vue init nuxt/starter`)\r\nNode: 6.10.2/7.10.0\r\nElementUI: 1.2.9\r\nBrowser/OS: MacOS 10.11+ on Chrome 56+ and Safari 10, Windows 10 on Chrome 56+, Mobile Safari on iOS 10.3\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c573\">#c573\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3232],{"name":3233,"color":3234},"2.x","d4c5f9",664,"ElementUI Vue Components Rendering Issues","2023-01-18T15:39:39Z","https://github.com/nuxt/nuxt/issues/664",0.7025202,{"description":3241,"labels":3242,"number":3244,"owner":3146,"repository":3146,"state":3163,"title":3245,"updated_at":3246,"url":3247,"score":3248},"While refreshing the page it throws error\r\n\r\n[vue-router] Failed to resolve async component default: SyntaxError: Unexpected token \u003C\r\n[vue-router] uncaught error during route navigation:\r\n/data/nuxt/node_modules/vue-date-picker/src/datepicker.vue:1\r\n(function (exports, require, module, __filename, __dirname) { \u003Cstyle scoped>\r\n^\r\n\r\nSyntaxError: Unexpected token \u003C\r\nat createScript (vm.js:74:10)\r\nat Object.runInThisContext (vm.js:116:10)\r\nat Module._compile (module.js:533:28)\r\nat Object.Module._extensions..js (module.js:580:10)\r\nat Module.load (module.js:503:32)\r\nat tryModuleLoad (module.js:466:12)\r\nat Function.Module._load (module.js:458:3)\r\nat Module.require (module.js:513:17)\r\nat require (internal/module.js:11:18)\r\nat r (/data/nuxt/node_modules/vue-server-renderer/build.js:7739:16)\r\nat Object. (server-bundle.js:4211:18)\r\nat webpack_require (server-bundle.js:27:30)\r\nat Object.129 (pages/modules/_module/add.515b290012e443c855fd.js:773:74)\r\nat webpack_require (server-bundle.js:27:30)\r\nat Object.128 (pages/modules/_module/add.515b290012e443c855fd.js:738:279)\r\nat webpack_require (server-bundle.js:27:30)\r\n\r\nMy code snippet is:\r\n_\r\n\r\n\u003Cscript> import Vue from 'vue' import datepicker from 'vue-date-picker' Vue.use(datepicker) export default { name: 'TextInput', props: ['data', 'modelData', 'readOnly'], data () { return { date: '' } }, components: { datepicker } \u003C/script> \n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1476\">#c1476\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3243],{"name":3233,"color":3234},1645,"Nuxt Js while refreshing date picker is not working([vue-router] Failed to resolve async component default: SyntaxError: Unexpected token \u003C)","2023-01-18T15:42:07Z","https://github.com/nuxt/nuxt/issues/1645",0.70415354,{"description":3250,"labels":3251,"number":3255,"owner":3146,"repository":3146,"state":3163,"title":3256,"updated_at":3257,"url":3258,"score":3259},"In Nuxt, if I try to add third party plugin for example vue-date-picker like this\r\n\r\n\r\n```\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cdatepicker :readonly=\"true\" format=\"YYYY-MM-DD\">\u003C/datepicker>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\r\n\r\n\r\n\u003Cscript>\r\nlet datepicker = null\r\n// The server-side needs a full url to works\r\nif (process.browser) {\r\n datepicker = require('vue-date-picker').default\r\n}\r\n\r\n\r\nexport default {\r\n components: {datepicker}\r\n}\r\n\u003C/script>\r\n\r\n```\r\n\r\nDatePicker works perfectly. But the following warning occurs\r\n\r\n**[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside \u003Cp>,or missing \u003Ctbody>. Bailing hydration and performing full client-side render**.\r\n\r\n\r\nHow to get rid of it?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1522\">#c1522\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3252,3254],{"name":3206,"color":3253},"5319e7",{"name":3233,"color":3234},1700,"[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside \u003Cp>, or missing \u003Ctbody>. Bailing hydration and performing full client-side render.","2023-01-18T15:42:10Z","https://github.com/nuxt/nuxt/issues/1700",0.7228801,["Reactive",3261],{},["Set"],["ShallowReactive",3264],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$ffzC89uFEMlA-1yhDbx8LQJNFXucCDlcPstlmxp__RZU":-1},"/nuxt/ui/4803"]