\n\u003C/template>\n\n\u003Cscript setup>\nconst translationField = ref(null)\n\nfunction nextCard() {\n translationField.value.focus() // throws: 'focus is not a function'\n \n nextTick(() => {\n translationField.value.focus() // same error\n })\n\n // below works ok\n nextTick(() => {\n const input = translationField.value?.$el?.querySelector('input')\n if (input) {\n input.focus()\n }\n })\n}\n\u003C/script>\n```\n\n\n### Description\nStandard Vue method of using template ref (for setting a focus, here) throws: 'focus() is not a function'\nIn the above code snippet I included workaround (credits to Sonnet 3.5)\nTried it dozen of times and checked this place to see if it has not been solved earlier.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3186,3189,3192],{"name":3187,"color":3188},"bug","d73a4a",{"name":3190,"color":3191},"v3","49DCB8",{"name":3193,"color":3194},"triage","ffffff",3644,"ui","\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.70795643,{"description":3202,"labels":3203,"number":3206,"owner":3138,"repository":3207,"state":3158,"title":3208,"updated_at":3209,"url":3210,"score":3211},"A branch has been made to showcase the difference of output when opening a file in the editor: https://github.com/nuxtlabs/nuxt.com/commit/97cc718c717e5defb92d633851f31d750af4b2d3",[3204],{"name":3187,"color":3205},"ff281a",327,"nuxt.com","Parser/Serializer of `@docus/editor` is not 1:1","2023-06-06T12:14:50Z","https://github.com/nuxt/nuxt.com/issues/327",0.711283,{"description":3213,"labels":3214,"number":3206,"owner":3138,"repository":3216,"state":3158,"title":3217,"updated_at":3218,"url":3219,"score":3211},"### 🐛 The bug\n\nHi team!\n\nThe `ScriptYouTubePlayer` component accepts `width` and `height` (or defaults to `640` and `480`). From that it calculates `aspect-ratio` and then sets these styles on it\n```\nmaxWidth: '100%',\nwidth: `${props.width}px`,\nheight: 'auto',\naspectRatio: `${props.width}/${props.height}`,\n```\n\nThis could potentially cause some responsive troubles when it is inside a container that has `min-width:auto` like a grid column.\nI am providing a reproduction showing it. \nThe issue on the reproduction can be solved by adding `min-w-0` to the grid cols, as the grid cols by default want to follow the width of their content, their default is `min-width: auto`.\n\n\n### 🛠️ To reproduce\n\nhttps://stackblitz.com/edit/nuxt-starter-s1pw6n?file=app.vue\n\n### 🌈 Expected behavior\n\nAs a possible solution, I am wondering if the following could be a friendlier?\n```\nminWidth: 100px, // to have minimum width\nwidth: `100%`;\nheight: `auto`;\naspectRatio: `${props.width}/${props.height}`,\n```\n\nAlso we could let the user handle the width and height and just get the aspect ratio in the props?\n\n### ℹ️ Additional context\n\n_No response_",[3215],{"name":3187,"color":3188},"scripts","Responsive issue with ScriptYouTubePlayer component","2025-02-07T06:03:08Z","https://github.com/nuxt/scripts/issues/327",{"description":3221,"labels":3222,"number":3225,"owner":3138,"repository":3138,"state":3158,"title":3226,"updated_at":3227,"url":3228,"score":3229},"### Environment\n\nn/a\n\n### Reproduction\n\nn/a\n\n### Describe the bug\n\nIn the docs some curly brackets are getting lost while they do exist in github.\r\nAlready cleared the cache and tried with a new browser that newer visited nuxt-docs to make sure there's no cache or SW proplem.\r\n\r\nExample: https://nuxt.com/docs/guide/directory-structure/plugins#vue-plugins\r\n \r\n\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3223,3224],{"name":3152,"color":3153},{"name":3155,"color":3156},15677,"[DOCS]: Curly bracket get lost in code-rendering","2023-01-19T18:34:57Z","https://github.com/nuxt/nuxt/issues/15677",0.7157102,{"description":3231,"labels":3232,"number":3238,"owner":3138,"repository":3196,"state":3158,"title":3239,"updated_at":3240,"url":3241,"score":3242},"### Description\n\nBreadcrumb uses Link (and LinkBase) to implement the item rendering and navigation. Link (through LinkBase) in itself supports `onClick` event/prop. Now, passing `onClick` to the breadcrumb item does not go all the way through to the LinkBase, and thus prevents the fine-grained control of the Breadcrumb component.\n\nThe usage would look something like this:\n```\n\u003Ctemplate>\n \u003CUBreadcrumb :items=\"items\" />\n\u003C/template>\n\u003Cscript setup>\nconst items = [\n { label: \"click for one\", onClick: () => alert(\"1\"), to: \"/one\" },\n { label: \"click for two\", onClick: () => alert(\"2\"), to: \"/two\" },\n]\n\u003C/script>\n```\n\nMy need is to have some secondary effects happening besides the navigation when the user clicks on a breadcrumb item.\n\n### Additional context\n\n_No response_",[3233,3236,3237],{"name":3234,"color":3235},"enhancement","a2eeef",{"name":3190,"color":3191},{"name":3193,"color":3194},3631,"Support for `onClick` event on Breadcrumb items","2025-03-24T18:08:16Z","https://github.com/nuxt/ui/issues/3631",0.71737003,{"description":3244,"labels":3245,"number":3247,"owner":3138,"repository":3196,"state":3158,"title":3248,"updated_at":3249,"url":3250,"score":3251},"### Description\n\nWhen using a Table component, it would be a cool feature to allow the items to be modified in place and an event emitted. There arent really many good solutions for this in Vue ecosystem, that I know of. \n\n### Additional context\n\n_No response_",[3246],{"name":3234,"color":3235},2168,"Make an inplace editable table","2024-09-11T14:14:15Z","https://github.com/nuxt/ui/issues/2168",0.7215342,["Reactive",3253],{},["Set"],["ShallowReactive",3256],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$ft9E2GdGIooVV32ZOjdLYYB74Xu2zfn-5ruyN1l0dMQU":-1},"/nuxt/nuxt.com/1011"]