\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```",[2055,2058,2061],{"name":2056,"color":2057},"bug","d73a4a",{"name":2059,"color":2060},"v3","49DCB8",{"name":2062,"color":2063},"triage","ffffff",3644,"ui","\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.699908,{"description":2071,"labels":2072,"number":2075,"owner":1985,"repository":2076,"state":2017,"title":2077,"updated_at":2078,"url":2079,"score":2080},"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",[2073],{"name":2056,"color":2074},"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.7063398,{"description":2082,"labels":2083,"number":2075,"owner":1985,"repository":2085,"state":2017,"title":2086,"updated_at":2087,"url":2088,"score":2080},"### 🐛 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_",[2084],{"name":2056,"color":2057},"scripts","Responsive issue with ScriptYouTubePlayer component","2025-02-07T06:03:08Z","https://github.com/nuxt/scripts/issues/327",{"description":2090,"labels":2091,"number":2094,"owner":1985,"repository":1985,"state":2017,"title":2095,"updated_at":2096,"url":2097,"score":2098},"### 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_",[2092,2093],{"name":2011,"color":2012},{"name":2014,"color":2015},15677,"[DOCS]: Curly bracket get lost in code-rendering","2023-01-19T18:34:57Z","https://github.com/nuxt/nuxt/issues/15677",0.7128018,["Reactive",2100],{},["Set"],["ShallowReactive",2103],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"t9E2GdGIooVV32ZOjdLYYB74Xu2zfn-5ruyN1l0dMQU":-1},"/nuxt/nuxt.com/1011"]