\r\n```\r\n\r\nIs there something that should be done, besides using \u003Cclient-only>?\r\n\r\n\r\nHere's what I'm being warned (Index.vue page)\r\n\r\n```\r\n[Vue warn]: The `compilerOptions` config option is only respected when using a build of Vue.js that includes the runtime compiler (aka \"full build\"). Since you are using the runtime-only build, `compilerOptions` must be passed to `@vue/compiler-dom` in the build setup instead.\r\n- For vue-loader: pass it via vue-loader's `compilerOptions` loader option.\r\n- For vue-cli: see https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader\r\n- For vite: pass it via @vitejs/plugin-vue options. See https://github.com/vitejs/vite/tree/main/packages/plugin-vue#example-for-passing-options-to-vuecompiler-dom \r\n at \u003CIcon name=\"mdi:qrcode-scan\" > \r\n at \u003CIndex class=\"relative h-screen content-border pt-14\" onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C Proxy {__v_skip: true} > > \r\n at \u003CAnonymous key=\"/\" routeProps= {Component: {…}, route: {…}} pageKey=\"/\" ... > \r\n at \u003CBaseTransition mode=\"out-in\" appear=false persisted=false ... > \r\n at \u003CTransition name=\"page\" mode=\"out-in\" > \r\n at \u003CRouterView name=undefined route=undefined class=\"relative h-screen content-border pt-14\" > \r\n at \u003CNuxtPage class=\"relative h-screen content-border pt-14\" > \r\n at \u003CDefault > \r\n at \u003CAsyncComponentWrapper > \r\n at \u003CBaseTransition mode=\"out-in\" appear=false persisted=false ... > \r\n at \u003CTransition name=\"layout\" mode=\"out-in\" > \r\n at \u003CAnonymous> \r\n at \u003CApp key=1 > \r\n at \u003CNuxtRoot>\r\n```",[],"icon","Warnings when in use with Nuxt rc-11","2022-09-29T12:33:30Z","https://github.com/nuxt/icon/issues/16",0.6947058,{"description":2933,"labels":2934,"number":2435,"owner":2904,"repository":2935,"state":2905,"title":2936,"updated_at":2937,"url":2938,"score":2931},"When using the `VimeoEmbed` component we should be providing the end user with the most performant / privacy solution out of the box. For Vimeo this seems to be the [lite-vimeo-embed](https://github.com/luwes/lite-vimeo-embed) package.\r\n\r\nWe should allow the use of the main Vimeo script API via `useScriptVimeo` but if we want to embed we should use lite-vimeo-embed. \r\n\r\nIdeally, we want the same functionality as https://lite-vimeo-embed.vercel.app/variants/pe.html. Notice on this site there are pre-connect tags in the head as well.\r\n\r\nFor end users who want more control, they can use something like https://github.com/dobromir-hristov/vue-vimeo-player.\r\n\r\n",[],"scripts","Prefer lite-embed-vimeo","2024-04-21T14:14:29Z","https://github.com/nuxt/scripts/issues/16",{"labels":2940,"number":2947,"owner":2904,"repository":2904,"state":2905,"title":2948,"updated_at":2949,"url":2950,"score":2951},[2941,2944],{"name":2942,"color":2943},"3.x","29bc7f",{"name":2945,"color":2946},"bug","d73a4a",12233,"Warning: To load an ES module, set \"type\": \"module\" in the package.json or use the .mjs extension.","2023-01-19T16:00:39Z","https://github.com/nuxt/nuxt/issues/12233",0.69554925,{"description":2953,"labels":2954,"number":2958,"owner":2904,"repository":2904,"state":2905,"title":2959,"updated_at":2960,"url":2961,"score":2962},"\r\n**(Need Help) Encountering Warnings When Using Nuxt3 + shadcnUI and Unsure How to Fix Them**\r\n\r\nHere’s the component code:\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { DialogRoot, VisuallyHidden } from \"radix-vue\";\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv id=\"index-side-bar\">\r\n \u003Cslot />\r\n \u003CSheet :default-open=\"true\">\r\n \u003CSheetContent :side=\"'left'\" class=\"outline-0 p-0 w-[240px] z-[99999]\">\r\n \u003CVisuallyHidden>\r\n \u003CSheetHeader>\r\n \u003CSheetTitle>dialog\u003C/SheetTitle>\r\n \u003CSheetDescription>description\u003C/SheetDescription>\r\n \u003C/SheetHeader>\r\n \u003C/VisuallyHidden>\r\n \u003Cdiv style=\"width: 100%; height: 100vh; display: flex; flex-direction: column;\">\r\n \u003C!-- Header -->\r\n \u003Cdiv class=\"w-full h-[56px] flex items-center sm:h-[48px]\">\r\n \u003Cdiv class=\"w-full h-[56px] flex items-center ml-[14px] sm:ml-[16px]\">\r\n \u003Cdiv class=\"w-10 h-10 flex items-center justify-center sm:hidden\">\r\n \u003C!-- SVG Icon Placeholder -->\r\n \u003C/div>\r\n \u003Cdiv class=\"w-[120px] h-[56px] sm:w-auto sm:h-[48px]\" style=\"display: flex; justify-content: center; align-items: center;\">\r\n \u003Cdiv class=\"w-[94px] h-[30px]\">\r\n \u003C!-- Logo Placeholder -->\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C!-- Footer -->\r\n \u003Cdiv class=\"sidebar_toolbar\">\r\n \u003CSheetClose class=\"outline-0\">\r\n \u003CNuxtLayout name=\"tab-toolbar-nav-menu\" />\r\n \u003C/SheetClose>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/SheetContent>\r\n \u003C/Sheet>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nShadcnUI Sheet.vue:\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue';\r\n\r\nconst props = defineProps\u003CDialogRootProps>();\r\nconst emits = defineEmits\u003CDialogRootEmits>();\r\nconst forwarded = useForwardPropsEmits(props, emits);\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CDialogRoot v-bind=\"forwarded\">\r\n \u003Cslot />\r\n \u003C/DialogRoot>\r\n\u003C/template>\r\n```\r\n\r\n**The warning message:**\r\n\r\n```text\r\n[Vue warn]: Extraneous non-props attributes (data-v-e01f9c95) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.\r\n at \u003CDialogRoot defaultOpen=true onUpdate:open=fn data-v-e01f9c95=\"\" >\r\n at \u003CSheet default-open=true >\r\n at \u003CSideBar ref=Ref\u003C undefined > >\r\n```\r\n\r\nThis warning has appeared multiple times and only occurs on the server side. No warnings appear on the client side.\r\n\r\nThrough testing, I found that switching to the `DialogRoot` component eliminates the warnings. The warnings reappear when using the `Sheet` component.\r\n\r\nHere’s the alternative component:\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { DialogRoot, VisuallyHidden } from \"radix-vue\";\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv id=\"index-side-bar\">\r\n \u003Cslot />\r\n \u003CDialogRoot :default-open=\"true\">\r\n \u003CSheetContent :side=\"'left'\" class=\"outline-0 p-0 w-[240px] z-[99999]\">\r\n \u003CVisuallyHidden>\r\n \u003CSheetHeader>\r\n \u003CSheetTitle>dialog\u003C/SheetTitle>\r\n \u003CSheetDescription>description\u003C/SheetDescription>\r\n \u003C/SheetHeader>\r\n \u003C/VisuallyHidden>\r\n \u003Cdiv style=\"width: 100%; height: 100vh; display: flex; flex-direction: column;\">\r\n \u003C!-- Header -->\r\n \u003Cdiv class=\"w-full h-[56px] flex items-center sm:h-[48px]\">\r\n \u003Cdiv class=\"w-full h-[56px] flex items-center ml-[14px] sm:ml-[16px]\">\r\n \u003Cdiv class=\"w-10 h-10 flex items-center justify-center sm:hidden\">\r\n \u003C!-- SVG Icon Placeholder -->\r\n \u003C/div>\r\n \u003Cdiv class=\"w-[120px] h-[56px] sm:w-auto sm:h-[48px]\" style=\"display: flex; justify-content: center; align-items: center;\">\r\n \u003Cdiv class=\"w-[94px] h-[30px]\">\r\n \u003C!-- Logo Placeholder -->\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C!-- Footer -->\r\n \u003Cdiv class=\"sidebar_toolbar\">\r\n \u003CSheetClose class=\"outline-0\">\r\n \u003CNuxtLayout name=\"tab-toolbar-nav-menu\" />\r\n \u003C/SheetClose>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/SheetContent>\r\n \u003C/DialogRoot>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n**When using DevTools**, the same warning occurs, similar to the server-side warning, but it doesn’t appear on the client side:\r\n\r\n```text\r\n[Vue warn]: Extraneous non-props attributes (data-v-inspector) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.\r\n at \u003CDialogRoot default-open=true data-v-inspector=\"layouts/index/SideBar.vue:16:7\" >\r\n at \u003CSideBar data-v-inspector=\"app.vue:4:7\" ref=Ref\u003C undefined > >\r\n at \u003CLayoutLoader key=\"index-side-bar\" layoutProps= { 'data-v-inspector': 'app.vue:4:7',\r\n```\r\n\r\nI have already disabled DevTools with `componentInspector: false`.\r\n\r\nGitHub link: [Nuxt DevTools Issue #722](https://github.com/nuxt/devtools/issues/722).\r\n",[2955],{"name":2956,"color":2957},"pending triage","E99695",29002,"(Need Help) Encountering Warnings When Using Nuxt3 + shadcnUI and Unsure How to Fix Them","2024-09-17T08:13:28Z","https://github.com/nuxt/nuxt/issues/29002",0.69557214,{"description":2964,"labels":2965,"number":2967,"owner":2904,"repository":2904,"state":2905,"title":2968,"updated_at":2969,"url":2970,"score":2971},"Hello!! \r\nhow to use directive in nuxt.js?\r\n\r\n`\r\nplugins: ['~plugins/filters.js','~plugins/directive.js'];\r\n`\r\n\r\n`\r\nVue.directive('nferror', {\r\n bind: function() {\r\n console.log(\"bind\")\r\n },\r\n update: function() {\r\n },\r\n unbind: function() {\r\n }\r\n});\r\n`\r\n\r\n\r\n`\u003Cp class=\"font-count\" nferror :class=\"isError\">\u003C/p>`\r\n \r\n\r\n\r\n\r\nIt's not working\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/c737\">#c737\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2966],{"name":2917,"color":2918},860,"Vue directive","2023-01-18T15:39:54Z","https://github.com/nuxt/nuxt/issues/860",0.69701946,{"description":2973,"labels":2974,"number":2976,"owner":2904,"repository":2904,"state":2905,"title":2977,"updated_at":2978,"url":2979,"score":2980},"I'm trying to include [vue2-dragula](https://github.com/kristianmandrup/vue2-dragula), I've setup in plugins `vue2-dragula.js` with:\r\n\r\n```\r\nimport Vue from 'vue'\r\nimport { Vue2Dragula } from 'vue2-dragula'\r\n\r\nif (process.BROWSER_BUILD) {\r\n Vue.use(Vue2Dragula, {\r\n logging: {\r\n service: true\r\n }\r\n })\r\n}\r\n```\r\n\r\nThen included in `nuxt.config` `plugins: ['~plugins/vue2-dragula']`\r\n\r\nIt seems that `process.BROWSER_BUILD` isn't being factored in? \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/c344\">#c344\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2975],{"name":2917,"color":2918},398,"document is not defined","2023-01-18T15:38:50Z","https://github.com/nuxt/nuxt/issues/398",0.6978373,{"labels":2982,"number":2985,"owner":2904,"repository":2904,"state":2905,"title":2906,"updated_at":2986,"url":2987,"score":2988},[2983,2984],{"name":2942,"color":2943},{"name":2956,"color":2957},14199,"2023-01-19T17:42:49Z","https://github.com/nuxt/nuxt/issues/14199",0.69895905,{"description":2990,"labels":2991,"number":3001,"owner":2904,"repository":3002,"state":2905,"title":3003,"updated_at":3004,"url":3005,"score":3006},"### Environment\r\n\r\n- Operating System: Windows_NT\r\n- Node Version: v20.11.0\r\n- Nuxt Version: 3.13.0\r\n- CLI Version: 3.13.1\r\n- Nitro Version: 2.9.7\r\n- Package Manager: yarn@1.22.22\r\n- Builder: -\r\n- User Config: modules, colorMode, devtools, srcDir,\r\n css, compatibilityDate\r\n- Runtime Modules: @nuxt/ui@2.18.4, @nuxtjs/google-fonts@3.2.0, @nuxt/eslint@0.4.0, @nuxt/image@1.8.0\r\n- Build Modules: -\r\n\r\n### Version\r\n\r\nv2.18.2\r\n\r\n### Reproduction\r\n\r\nJust a small question, no need to reproduce\r\n\r\n### Description\r\n\r\nThis is my DatePicker component\r\n```vue\r\n\u003Ctemplate>\r\n \u003CVCalendarDatePicker v-if=\"date\" v-bind=\"{ ...attrs, ...$attrs }\" />\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_",[2992,2993,2996,2999],{"name":2945,"color":2946},{"name":2994,"color":2995},"triage","ffffff",{"name":2997,"color":2998},"closed-by-bot","ededed",{"name":3000,"color":2998},"stale",2106,"ui","Need help: `DatePicker` set value not work","2025-06-18T09:06:10Z","https://github.com/nuxt/ui/issues/2106",0.70192796,["Reactive",3008],{},["Set"],["ShallowReactive",3011],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f6bgGErUQ1fSK6sE1egvCkvOscxRDB_24McNUX83AMFI":-1},"/nuxt/nuxt/1391"]