\n\u003C/template>\n\n\u003Cstyle scoped>\n.blue { background-color: blue; }\n\u003C/style>\n```\n\n```vue\n// PARENT\n\u003Ctemplate>\n \u003Cdiv>\n \u003CBlueSquare class=\"red\" />\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.red { background-color: red; }\n\u003C/style>\n```\n\nBoth plain Vue and Vue with SSR have the correct order:\n\n**Vue**\n\u003Cimg width=\"714\" height=\"163\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/fa26e7f4-3f89-4bae-b0b1-1fd19f383a02\" />\n\n**Vue SSR**\n\u003Cimg width=\"601\" height=\"190\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7e1dc7cc-4b32-4ccc-957c-dd207b7a836d\" />\n\n\nBut in Nuxt, the order is incorrect when built:\n\n**Nuxt**\n\u003Cimg width=\"596\" height=\"85\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/62458e07-886e-4c0b-b569-db6e08805f35\" />\n\n\n---\n\n\nIs this Nuxt related or not?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3150],{"name":3138,"color":3139},33041,"Incorrect component style order","2025-09-02T22:32:28Z","https://github.com/nuxt/nuxt/issues/33041",0.6738043,{"description":3157,"labels":3158,"number":3166,"owner":3141,"repository":3141,"state":3167,"title":3168,"updated_at":3169,"url":3170,"score":3171},"### Environment\n\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v18.13.0\r\n- Nuxt Version: 3.8.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@8.19.3\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\n\n### Reproduction\n\nI know this is a requirement for bug fixes, but I'm really stacked for time on an urgent project, and wanted to log this error in case anyone else is experiencing it and has a quick answer. or if its a known bug you can provide immediate answer to. When I get a chance I'll revert and try and set one up in the coming weeks.\n\n### Describe the bug\n\nSince installing a new package, and updating node to 18 from 16, I'm suddenly seeing loads of components that are not rendering. I also see the following errors in the console.\r\n\r\n```\r\nVue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. \r\n```\r\nand\r\n```\r\n[Vue warn]: Component is missing template or render function. \r\n```\r\n\r\nI have tried deleting nuxt and node-modules folders and re-installing. I have discovered that simply changing the component file names works, but I of course can't do this for all of them as it would require lots of code changes. But it shows this is a weird error in the way the components are compiling. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3159,3162,3163],{"name":3160,"color":3161},"3.x","29bc7f",{"name":3138,"color":3139},{"name":3164,"color":3165},"needs reproduction","FBCA04",24751,"closed","Since updating my package.json file, many of my unchanged components are suddenly failing to render","2023-12-30T11:46:37Z","https://github.com/nuxt/nuxt/issues/24751",0.64693654,{"description":3173,"labels":3174,"number":3177,"owner":3141,"repository":3141,"state":3167,"title":3178,"updated_at":3179,"url":3180,"score":3181},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.8.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: devtools, vue\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nYou can change the v-if from true to false to see the actual rendering failing:\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-gd1iaq?file=components%2FRichTextRenderer.vue\r\n\r\n### Describe the bug\r\n\r\nI am trying to render custom elements loaded from a CMS, example, I am trying to render responses like this:\r\n\r\n```\r\n\u003Cdiv>\r\n \u003Ccomponent :is=\"custom-element\">\u003C/component>\r\n \u003Ccomponent :is=\"custom-accordion\">\u003C/component>\r\n\u003C/div>\r\n```\r\n\r\nI was expecting to be able to do this by configuring the vue runtimeCompiler to true and using something like:\r\n\r\n```h({template: receivedHtml})```\r\n\r\n\r\n### Additional context\r\n\r\nOn the provided example, the three first options work, the fourth one fails:\r\n\r\n```\u003Cscript setup lang=\"ts\">\r\nconst CoolComponent = resolveComponent('CoolComponent')\r\n\r\nconst render1 = h({ template: '\u003Cspan>Hellow render 1\u003C/span>' })\r\nconst render2 = h({ template:`\u003Ccomponent :is=\"${CoolComponent}\">\u003C/component>` })\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cdiv>\u003Cb>Basic test:\u003C/b> \u003CCoolComponent>\u003C/CoolComponent>\u003C/div>\r\n\r\n \u003Cdiv>\u003Cb>Test without components:\u003C/b> \u003Crender1>\u003C/render1>\u003C/div>\r\n\r\n \u003Cdiv>\u003Cb>Test with component:\u003C/b> \u003Ccomponent :is=\"CoolComponent\">\u003C/component>\u003C/div>\r\n\r\n \u003Cdiv v-if=\"true\">\u003Cb>Broken test:\u003C/b> \u003Crender2>\u003C/render2>\u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n### Logs\r\n\r\n```shell-script\r\nmissing ] after element list\r\n\r\non esm-bundler.js\r\n```\r\n",[3175,3176],{"name":3160,"color":3161},{"name":3138,"color":3139},24758,"Unable to dynamically add components via string","2023-12-14T20:36:50Z","https://github.com/nuxt/nuxt/issues/24758",0.6534127,{"description":3183,"labels":3184,"number":3186,"owner":3141,"repository":3141,"state":3167,"title":3187,"updated_at":3188,"url":3189,"score":3190},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v20.9.0\r\n- Nuxt Version: 3.12.2\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.6\r\n- Package Manager: yarn@1.22.19\r\n- Builder: -\r\n- User Config: devtools, components\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nuxt-3-bug-vl98j5\n\n### Describe the bug\n\nThe problem only occurs with the production build.\r\nIf a component is imported dynamically and uses components common to its sub-components (e.g. a composable) and this sub-component is used elsewhere in the code, then SSR rendering of the component no longer occurs.\r\nIn my example in dev mode, the final rendering of the page is :\r\n```\r\nHello\r\nTest : foo\r\nTest Child : foo\r\nTest Child 2\r\nTest Child 2 Child : foo\r\nTest Child 2\r\nTest Child 2 Child : foo\r\n```\r\nUnfortunately, in prod mode, the ssr rendering is as follows : \r\n```\r\nHello\r\nTest : foo\r\nTest Child : foo\r\nTest Child 2\r\nTest Child 2 Child : foo\r\n```\r\nAs the client-side setup also executes for hydration, the rendering updates correctly and everything is displayed, but there is a problem with the SSR rendering.\r\nThere are no errors during the nuxt build or when generating the page on the SSR side.\r\nI think the problem must come from rollup because if you look in the file `.output/server/chunks/BaseTestChild2-WlFZNhyr.mjs` there is an export of several elements.\r\n```\r\nconst BaseTestChild2 = /* @__PURE__ */ Object.freeze({\r\n __proto__: null,\r\n default: _sfc_main\r\n});\r\n\r\nexport { BaseTestChild2 as B, _sfc_main as _, useFoo as u };\r\n```\r\nIf we compare it to a normal component (`.output/server/chunks/BaseTest-DrvCz1q7.mjs`), the export is different.\r\n```\r\nexport { _sfc_main as default };\r\n```\r\nFor me, the problem comes from the fact that it creates an object with `default: _sfc_main` before exporting it.\r\nWhen we look at the use of these files in `.output/server/server.mjs` there is a difference.\r\n```\r\nsetup(__props) {\r\n const BaseTest = defineAsyncComponent(\r\n () => import('./BaseTest-DrvCz1q7.mjs')\r\n );\r\n const BaseTestChild2 = defineAsyncComponent(\r\n () => import('./BaseTestChild2-WlFZNhyr.mjs').then(function(n) {\r\n return n.B;\r\n })\r\n );\r\n}\r\n```\r\nFor my part, when I remove the creation of this object to export in the same way as `.output/server/chunks/BaseTest-DrvCz1q7.mjs`, it works.\r\nOr if I add `n.B.default` to the `import('./BaseTestChild2-WlFZNhyr.mjs').then(function(n) {`, that works too.\n\n### Additional context\n\nTo reproduce, simply `yarn build` then `yarn preview` in my codesandbox example.\r\nYou can look directly at the existing `.output` that contains the problem.\r\nI don't know if this is the right place for this ticket or if I should make a ticket on the rollup side.\n\n### Logs\n\n_No response_",[3185],{"name":3138,"color":3139},27836,"Dynamic component SSR rendering problem","2024-08-12T21:15:06Z","https://github.com/nuxt/nuxt/issues/27836",0.6554167,{"description":3192,"labels":3193,"number":3196,"owner":3141,"repository":3141,"state":3167,"title":3197,"updated_at":3198,"url":3199,"score":3200},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.17.0`\r\n- Nuxt Version: `3.4.1`\r\n- Nitro Version: `2.3.3`\r\n- Package Manager: `npm@8.15.0`\r\n- Builder: `vite`\r\n- User Config: `runtimeConfig`, `app`, `css`, `components`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\npage/[...id].vue\r\n\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Ccomponent\r\n v-for=\"(item, key) in data\"\r\n :key=\"key\"\r\n :is=\"item.type\" \r\n \r\n v-bind=\"item\"\r\n\r\n @lgc-action=\"$emit($event.handler, $event)\"\r\n\r\n\r\n @update:payload=\"(value) => item.payload = value\"\r\n @update:form=\"(value) => item.form = value\"\r\n @update:restriction=\"(value) => item.restriction = value\"/>\r\n \r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n\r\n const route = useRoute()\r\n const runtimeConfig = useRuntimeConfig()\r\n const [path] = route.params.id.slice(-1)\r\n const { data } = reactive(await $fetch(`${runtimeConfig.public.BASE_URL}${runtimeConfig.public.SERVICE}/web/portal/${runtimeConfig.public.POI_NAME}/form/${path}`))\r\n \r\n\u003C/script>\r\n```\r\n\r\n\r\ncomponent/form.vue\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"lgc-form-input-group\">\r\n \u003Cp v-if=\"label\" class=\"lgc-form-input-group__label\">{{ label }}\u003C/p>\r\n \u003Cdiv class=\"lgc-form-input-group__form\">\r\n \u003C!-- v-bind=\"!item.type.toLowerCase().includes('form') ? { data: item } : item\" -->\r\n \u003Ccomponent :attr=\"index\" v-for=\"(item, index) in data\" :key=\"index\" :is=\"item.type\" v-bind=\"item\" \r\n @update:isValid=\"item.isValid = $event\"\r\n @emit-value=\"constructPayload(item, $event)\"\r\n @emit-input-and-value=\"constructPayload($event.input, $event.payload)\"\r\n @add-error=\"errorManagement('add', $event)\"\r\n @remove-error=\"errorManagement('remove', $event)\"\r\n @lgc-action=\"$emit($event.handler, $event)\"\r\n >\u003C/component>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nimport { v4 as uuidv4 } from 'uuid';\r\n\r\nconst emit = defineEmits(['emit-value','lgc-action'])\r\n\r\nconst props = defineProps({\r\n data: {\r\n type: Array,\r\n required: true\r\n },\r\n id: {\r\n type: String,\r\n required: false\r\n },\r\n label: {\r\n type: String,\r\n required: false\r\n },\r\n value: {\r\n type: Object,\r\n required: false,\r\n default() {\r\n return {}\r\n }\r\n },\r\n uuid: {\r\n type: String,\r\n required: false,\r\n default() {\r\n return uuidv4()\r\n }\r\n }\r\n })\r\n\r\n\r\n const inputValue= reactive(props.value ? props.value : {})\r\n\r\n function constructPayload(input, payload) {\r\n inputValue[input.id] = payload\r\n }\r\n\r\n function errorManagement(action, error) {\r\n let component = props.data.find(el => el.type === 'lgc-form-error');\r\n if (component) {\r\n let already = component.errors.find(el => el.key === error.key && el.byClient)\r\n let index = component.errors.indexOf(already)\r\n switch (action) {\r\n case 'add':\r\n if (component) {\r\n if (already) component.errors.splice(index, 1)\r\n if (error.value) component.errors.push(error)\r\n }\r\n break;\r\n case 'remove':\r\n if (component) {\r\n if (already) component.errors.splice(index, 1)\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n } else {\r\n emit(`${action}-error`, error)\r\n }\r\n }\r\n\r\n async function submit() {\r\n emit('emit-value', inputValue)\r\n }\r\n\r\n\u003C/script>\r\n\r\n```\r\n\r\n### Describe the bug\r\n\r\nThe problem occurred when switching from nuxt2 to nuxt3.\r\nthis is a problem with the display order of compose with the `\u003Ccomponent :is=\"\" v-for=\"\" :key=\"\">` tag, in all that I find as documentation, it tells me offers 2 solutions:\r\n- make a sort function but even then, it doesn't work\r\n- that it is an asynchronous problem and must be made synchronous. Off, nuxt3 with \u003Cscript setup> makes compose directly asynchronous. It would then possibly be a \"bug\" linked to the frame work.\r\n\r\nafterwards, I haven't seen any documentation on the problem caused here: depending on the index, the order changes.\r\nIn addition to the tests you had done, I tried to put a uuid in key, the whole display is reversed.\r\nwithout key, it's good\r\nthe index, gives the current problem\r\na fixed key or just the item gives an even different display.\r\nregarding the key, ideally, the uuid should be in the object since using the index seems to be a bad practice\r\n \r\n The problem occurs in the compose form\r\n \r\n result nuxt 2 & nuxt3 no :key\r\n\u003Cimg width=\"701\" alt=\"Capture d’écran 2023-04-26 à 10 51 51\" src=\"https://user-images.githubusercontent.com/98752049/234523209-431b7cfc-d0c0-4397-a82d-d6120635a12a.png\">\r\n\r\nresult nuxt 3 whit :key=\"index\"\r\n\u003Cimg width=\"675\" alt=\"Capture d’écran 2023-04-26 à 10 55 16\" src=\"https://user-images.githubusercontent.com/98752049/234524004-76a98dde-1312-4266-9455-d9f28c1c521d.png\">\r\n\r\nresult nuxt3 whit :key=\"uuidv4()\"\r\n\u003Cimg width=\"678\" alt=\"Capture d’écran 2023-04-26 à 10 57 25\" src=\"https://user-images.githubusercontent.com/98752049/234524648-d85ae34d-70b5-4f58-a23d-005e8afd829a.png\">\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_",[3194,3195],{"name":3160,"color":3161},{"name":3138,"color":3139},20522,"Nuxt2 to Nuxt3, not display component in a correct order ","2023-04-26T09:06:18Z","https://github.com/nuxt/nuxt/issues/20522",0.659035,{"description":3202,"labels":3203,"number":3205,"owner":3141,"repository":3141,"state":3167,"title":3206,"updated_at":3207,"url":3208,"score":3209},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v20.9.0`\r\n- Nuxt Version: `3.13.1`\r\n- CLI Version: `3.13.1`\r\n- Nitro Version: `2.9.7`\r\n- Package Manager: `pnpm@9.3.0`\r\n- Builder: `-`\r\n- User Config: `compatibilityDate`, `devtools`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-yd89uq?file=app.vue,components%2FFoo.vue,components%2FBar.vue\n\n### Describe the bug\n\nI've noticed a few issues with component props after updating from Nuxt 3.12.3 to the latest version. I suspect it might be caused by enabling reactive props destructuring by default in Vue 3.5.\r\n\r\n1. setting default values for `boolean` props doesn't work (though it does for `string` props, for example)\r\n```ts\r\nconst {\r\n foo = true, // will be `false` if not provided\r\n bar = 'something', // will be `'something'` if not provided\r\n} = defineProps\u003C{\r\n foo?: boolean\r\n bar?: string\r\n}>()\r\n```\r\n2. seemingly, all prop reactivity is lost when using reactive destructure (when changing the prop values, they do not update in the component)\r\n```ts\r\n// It works correctly if defined using the \"old\" way, though\r\nconst props = defineProps\u003C{\r\n foo?: boolean\r\n bar?: string\r\n}>()\r\n```\r\n\r\n---\r\n\r\nThe behaviour was the same whether or not I had `vite.vue.script.propsDestructure` set to `true` in `nuxt.config` (though it should not be relevant now that it should be enabled by default?)\n\n### Additional context\n\nI tested it in vue SFC playground and it worked correctly there, so that's why I assume this might be a Nuxt issue\r\n\r\nhttps://play.vuejs.org/#eNqNUlFLwzAQ/ishLyqMFpm+zG6iMkEfdKiPAanttWamuZCkdTD6372kdA5x4tvd9313/fJdt/zKmKRrgc945gorjWcOfGsWQsvGoPXsBhvDKosNO0rS0AT50YXQQmfpMEJiajw0RuUeqGMsK2UXCyrjhnSA0wHP0j01n3DvCtSVrJO1Q01etkEseEGTUoF9NF6idoLPWGQClyuFn/cR87aFyYgX71B8/IKv3SZggq8sOLAdCL7jfG5r8AO9fH6ADdU7ssGyVaT+g3wCh6oNHgfZdatLsr2ni27vYqJS1y9uufGg3fioYDQo+6gXnBIOoR16+rfdaXIW54TuKcXxOj+PyVSu6znN0Zp4Kwrb+WFfhcjmY1I9lSVUUsPKonHZqLicsTdEBTnN9ovjk/8f/xaRjG/jZ3qyefgXeO3AhkDI/DQ5T055/wUEUtzf\n\n### Logs\n\n_No response_",[3204],{"name":3138,"color":3139},28845,"Issues with prop reactivity & default values when using reactive props destructure","2024-09-05T10:11:34Z","https://github.com/nuxt/nuxt/issues/28845",0.66468257,{"labels":3211,"number":3219,"owner":3141,"repository":3141,"state":3167,"title":3220,"updated_at":3221,"url":3222,"score":3223},[3212,3215,3216],{"name":3213,"color":3214},"stale","ffffff",{"name":3138,"color":3139},{"name":3217,"color":3218},"2.x","d4c5f9",8904,"Hydration error with scoped slots and component discovery (async components)","2023-01-22T15:38:48Z","https://github.com/nuxt/nuxt/issues/8904",0.6655824,{"description":3225,"labels":3226,"number":3239,"owner":3141,"repository":3141,"state":3167,"title":3240,"updated_at":3241,"url":3242,"score":3243},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v18.16.0`\r\n- Nuxt Version: `3.8.0`\r\n- CLI Version: `3.9.1`\r\n- Nitro Version: `2.7.0`\r\n- Package Manager: `npm@9.5.1`\r\n- Builder: `-`\r\n- User Config: `devtools`, `modules`\r\n- Runtime Modules: `@nuxtjs/tailwindcss@6.8.0`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://github.com/TheFlyer1983/nuxt-issue\n\n### Describe the bug\n\nI am getting an issue with a component, that previously worked. But after upgrading my Nuxt to v3.8.0, I keep getting this error whenever I refresh:\r\n\r\n\r\n\r\nI am unable to get past this or debug this because there is no real information in which to use to identify the issue.\n\n### Additional context\n\nThis is causing a major block on upgrading from Nuxt 2 to Nuxt 3, for a business application that is currently live.\n\n### Logs\n\n```shell-script\nI get these logs from my terminal.\r\n\r\n\r\n[[vite-node] [plugin:vite:vue] [VITE_ERROR] /components/inputs/StyledSelect.vue \u003Cbr>\u003Cpre><script lang=\"ts\" setup>\r\nconst props = withDefaults(\r\n defineProps<{\r\n disabled?: boolean;\r\n modelValue: object | string | number | null;\r\n small?: boolean;\r\n xSmall?: boolean;\r\n }>(),\r\n {\r\n disabled: false,\r\n small: false,\r\n xSmall: false\r\n }\r\n);\r\n\r\nconst emit = defineEmits<{\r\n (e: 'update:modelValue', value: object | string | number | null): void;\r\n}>();\r\n\r\nconst v = computed({\r\n get: () => props.modelValue,\r\n set: (value) => {\r\n emit('update:modelValue', value);\r\n }\r\n});\r\n</script>\r\n\r\n<template>\r\n <select\r\n v-model=\"v\"\r\n :disabled=\"disabled\"\r\n :class=\"[\r\n 'styled-select text-p-gray-4 transition-all duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-p-pink',\r\n {\r\n 'form-select': !small,\r\n 'form-select-small': small,\r\n 'form-select-x-small': xSmall,\r\n 'opacity-50': disabled\r\n }\r\n ]\" data-v-inspector=\"components/inputs/StyledSelect.vue:29:3\"\r\n >\r\n <slot />\r\n </select>\r\n</template>\r\n\u003C/pre>\u003Cbr>\r\nat /components/inputs/StyledSelect.vue] {\r\n cause: {\r\n statusMessage: 'Vite Error',\r\n message: '[vite-node] [plugin:vite:vue] [VITE_ERROR] /components/inputs/StyledSelect.vue \u003Cbr>\u003Cpre><script lang=\"ts\" setup>\\n' +\r\n 'const props = withDefaults(\\n' +\r\n ' defineProps<{\\n' +\r\n ' disabled?: boolean;\\n' +\r\n ' modelValue: object | string | number | null;\\n' +\r\n ' small?: boolean;\\n' +\r\n ' xSmall?: boolean;\\n' +\r\n ' }>(),\\n' +\r\n ' {\\n' +\r\n ' disabled: false,\\n' +\r\n ' small: false,\\n' +\r\n ' xSmall: false\\n' +\r\n ' }\\n' +\r\n ');\\n' +\r\n '\\n' +\r\n 'const emit = defineEmits<{\\n' +\r\n \" (e: 'update:modelValue', value: object | string | number | null): void;\\n\" +\r\n '}>();\\n' +\r\n '\\n' +\r\n 'const v = computed({\\n' +\r\n ' get: () => props.modelValue,\\n' +\r\n ' set: (value) => {\\n' +\r\n \" emit('update:modelValue', value);\\n\" +\r\n ' }\\n' +\r\n '});\\n' +\r\n '</script>\\n' +\r\n '\\n' +\r\n '<template>\\n' +\r\n ' <select\\n' +\r\n ' v-model=\"v\"\\n' +\r\n ' :disabled=\"disabled\"\\n' +\r\n ' :class=\"[\\n' +\r\n \" 'styled-select text-p-gray-4 transition-all duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-p-pink',\\n\" +\r\n ' {\\n' +\r\n \" 'form-select': !small,\\n\" +\r\n \" 'form-select-small': small,\\n\" +\r\n \" 'form-select-x-small': xSmall,\\n\" +\r\n \" 'opacity-50': disabled\\n\" +\r\n ' }\\n' +\r\n ' ]\" data-v-inspector=\"components/inputs/StyledSelect.vue:29:3\"\\n' +\r\n ' >\\n' +\r\n ' <slot />\\n' +\r\n ' </select>\\n' +\r\n '</template>\\n' +\r\n '\u003C/pre>\u003Cbr>',\r\n stack: '[vite-node] [plugin:vite:vue] [VITE_ERROR] /components/inputs/StyledSelect.vue \u003Cbr>\u003Cpre><script lang=\"ts\" setup>\\n' +\r\n 'const props = withDefaults(\\n' +\r\n ' defineProps<{\\n' +\r\n ' disabled?: boolean;\\n' +\r\n ' modelValue: object | string | number | null;\\n' +\r\n ' small?: boolean;\\n' +\r\n ' xSmall?: boolean;\\n' +\r\n ' }>(),\\n' +\r\n ' {\\n' +\r\n ' disabled: false,\\n' +\r\n ' small: false,\\n' +\r\n ' xSmall: false\\n' +\r\n ' }\\n' +\r\n ');\\n' +\r\n '\\n' +\r\n 'const emit = defineEmits<{\\n' +\r\n \" (e: 'update:modelValue', value: object | string | number | null): void;\\n\" +\r\n '}>();\\n' +\r\n '\\n' +\r\n 'const v = computed({\\n' +\r\n ' get: () => props.modelValue,\\n' +\r\n ' set: (value) => {\\n' +\r\n \" emit('update:modelValue', value);\\n\" +\r\n ' }\\n' +\r\n '});\\n' +\r\n '</script>\\n' +\r\n '\\n' +\r\n '<template>\\n' +\r\n ' <select\\n' +\r\n ' v-model=\"v\"\\n' +\r\n ' :disabled=\"disabled\"\\n' +\r\n ' :class=\"[\\n' +\r\n \" 'styled-select text-p-gray-4 transition-all duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-p-pink',\\n\" +\r\n ' {\\n' +\r\n \" 'form-select': !small,\\n\" +\r\n \" 'form-select-small': small,\\n\" +\r\n \" 'form-select-x-small': xSmall,\\n\" +\r\n \" 'opacity-50': disabled\\n\" +\r\n ' }\\n' +\r\n ' ]\" data-v-inspector=\"components/inputs/StyledSelect.vue:29:3\"\\n' +\r\n ' >\\n' +\r\n ' <slot />\\n' +\r\n ' </select>\\n' +\r\n '</template>\\n' +\r\n '\u003C/pre>\u003Cbr>\\n' +\r\n 'at /components/inputs/StyledSelect.vue'\r\n },\r\n statusCode: 500,\r\n fatal: false,\r\n unhandled: false,\r\n statusMessage: 'Vite Error',\r\n data: undefined,\r\n __nuxt_error: true\r\n```\n```\n",[3227,3230,3231,3234,3237],{"name":3228,"color":3229},"good first issue","fbca04",{"name":3160,"color":3161},{"name":3232,"color":3233},"bug","d73a4a",{"name":3235,"color":3236},"vite","3574D1",{"name":3238,"color":3165},"🔨 p3-minor",23822,"Issue with component since upgrading","2023-10-22T04:39:40Z","https://github.com/nuxt/nuxt/issues/23822",0.66698784,{"labels":3245,"number":3250,"owner":3141,"repository":3141,"state":3167,"title":3251,"updated_at":3252,"url":3253,"score":3254},[3246,3249],{"name":3247,"color":3248},"question","cc317c",{"name":3217,"color":3218},7706,"Component isn't behaving like in vue","2023-01-18T15:34:02Z","https://github.com/nuxt/nuxt/issues/7706",0.6696306,["Reactive",3256],{},["Set"],["ShallowReactive",3259],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fno_QRgA--s_t6lvwgxGylYw-GZjdUkQQoBT8MDe5uos":-1},"/nuxt/test-utils/1312"]