\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```",[3207,3210,3213],{"name":3208,"color":3209},"bug","d73a4a",{"name":3211,"color":3212},"v3","49DCB8",{"name":3214,"color":3215},"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":3223,"labels":3224,"number":3227,"owner":3159,"repository":3228,"state":3179,"title":3229,"updated_at":3230,"url":3231,"score":3232},"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",[3225],{"name":3208,"color":3226},"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":3234,"labels":3235,"number":3227,"owner":3159,"repository":3237,"state":3179,"title":3238,"updated_at":3239,"url":3240,"score":3232},"### 🐛 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_",[3236],{"name":3208,"color":3209},"scripts","Responsive issue with ScriptYouTubePlayer component","2025-02-07T06:03:08Z","https://github.com/nuxt/scripts/issues/327",{"description":3242,"labels":3243,"number":3246,"owner":3159,"repository":3159,"state":3179,"title":3247,"updated_at":3248,"url":3249,"score":3250},"### 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_",[3244,3245],{"name":3173,"color":3174},{"name":3176,"color":3177},15677,"[DOCS]: Curly bracket get lost in code-rendering","2023-01-19T18:34:57Z","https://github.com/nuxt/nuxt/issues/15677",0.7157102,{"description":3252,"labels":3253,"number":3259,"owner":3159,"repository":3217,"state":3179,"title":3260,"updated_at":3261,"url":3262,"score":3263},"### 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_",[3254,3257,3258],{"name":3255,"color":3256},"enhancement","a2eeef",{"name":3211,"color":3212},{"name":3214,"color":3215},3631,"Support for `onClick` event on Breadcrumb items","2025-03-24T18:08:16Z","https://github.com/nuxt/ui/issues/3631",0.71737003,{"description":3265,"labels":3266,"number":3268,"owner":3159,"repository":3217,"state":3179,"title":3269,"updated_at":3270,"url":3271,"score":3272},"### 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_",[3267],{"name":3255,"color":3256},2168,"Make an inplace editable table","2024-09-11T14:14:15Z","https://github.com/nuxt/ui/issues/2168",0.7215342,["Reactive",3274],{},["Set"],["ShallowReactive",3277],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$ft9E2GdGIooVV32ZOjdLYYB74Xu2zfn-5ruyN1l0dMQU":-1},"/nuxt/nuxt.com/1011"]