\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```",[2028,2031,2032],{"name":2029,"color":2030},"bug","d73a4a",{"name":2017,"color":2018},{"name":2033,"color":2034},"triage","ffffff",3644,"\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.72546643,{"description":2041,"labels":2042,"number":2046,"owner":1985,"repository":2020,"state":1997,"title":2047,"updated_at":2048,"url":2049,"score":2050},"### Description\r\n\r\nWe use Directus for content. I want to execute a fetch when using the Pagination component but can't figure out how to.\r\n\r\nClicking on a button update the url but it's not reloading the page so `pageNum` is not updated. Is there emits from the component I can use?\r\n\r\nThanks.\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport type { Article } from '~/types'\r\n\r\nconst route = useRoute()\r\n\r\nconst pageNum = ref(Number(route.query.page ?? 1))\r\nconst maxPages = ref(0)\r\nconst ARTICLES_PER_PAGE = 2\r\n\r\nconst url = ref(/* url to Directus */)\r\n\r\nconst { data: rawArticles, error, execute } = await useFetch(() => url.value)\r\nif (error.value)\r\n console.error(error.value)\r\n\r\nmaxPages.value = Math.ceil(Number(rawArticles.value?.meta?.filter_count ?? 1) / ARTICLES_PER_PAGE)\r\nconst articles: Article[] = ref(rawArticles.value.data)\r\n\r\nwatch(route, () => {\r\n console.log(route.path)\r\n console.log(pageNum.value)\r\n execute()\r\n})\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CUContainer>\r\n \u003CUPageBody>\r\n \u003CUBlogList>\r\n \u003CUBlogPost [...] />\r\n \u003C/UBlogList>\r\n\r\n \u003CUPagination\r\n size=\"sm\"\r\n :model-value=\"pageNum\"\r\n :total=\"maxPages\"\r\n :page-count=\"1\"\r\n show-last\r\n show-first\r\n :to=\"(page: number) => ({\r\n query: { page },\r\n // Hash is specified here to prevent the page from scrolling to the top\r\n hash: '#links',\r\n })\"\r\n @on-click-page=\"(e) => { console.log('current page', e); execute() }\"\r\n />\r\n \u003C/UPageBody>\r\n \u003C/UContainer>\r\n\u003C/template>\r\n```",[2043],{"name":2044,"color":2045},"question","d876e3",2190,"[Pagination] emits on buttons?","2024-09-12T12:33:01Z","https://github.com/nuxt/ui/issues/2190",0.72677004,{"description":2052,"labels":2053,"number":2056,"owner":1985,"repository":2020,"state":1997,"title":2057,"updated_at":2058,"url":2059,"score":2060},"### Description\n\nJust tried to implement my first form that does some smaller frontend validation and sends the payload to an API that will escalate errors as well.\n\nGoing through all the use cases, some are rather hard and cumbersome to implement:\n\n- Field validation errors are fine\n- Form errors require a field to work, there is no way to define Form wide errors through `Form.setErrors()` nor do they bubble up to a general error display just where the `\u003CUForm />` is anchored if the key is unknown.\n- The missing error bubbeling makes it tricky to react to more common errors like rate limiting through 429 status code, where the server responds with additional headers and maybe a JSON with further information. This creates a hard coupling of the loose backend error message and a hard field within the current form to route the error to.\n\nAlso the submission event `FormSubmitEvent` could offer better developer experience by offering not only data, but the actual Form instance. Right now, to handle any errors by a backend, you need to go through the typical, type-messy approach of\n\n```ts\n\u003Ctemplate>\n \u003CUForm ref=\"form\" @submit=\"onSubmit\" />\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\ntype FormSchema = v.InferOutput\u003Ctypeof CreateSomethingForm>\n\nconst form = useTemplateRef\u003CForm\u003CFormSchema>>('form')\n\nasync function onSubmit(event: FormSubmitEvent\u003CFormSchema>) {\n\n form.value?.setErrors([\n {name: 'account', message: 'Not valid'}\n ])\n}\n\u003C/script>\n```\n\ninstead of a simpler boilerplate:\n\n```ts\n\u003Ctemplate>\n \u003CUForm @submit=\"onSubmit\" />\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\ntype FormSchema = v.InferOutput\u003Ctypeof CreateSomethingForm>\n\nasync function onSubmit(event: FormSubmitEvent\u003CformSchema>) {\n event.form.setErrors([\n {name: 'account', message: 'Not valid'}\n ])\n}\n\u003C/script>\n```\n\n\n\n\n### Additional context\n\n_No response_",[2054,2055],{"name":2006,"color":2007},{"name":2017,"color":2018},3471,"Form improvements","2025-03-12T08:31:46Z","https://github.com/nuxt/ui/issues/3471",0.7302414,{"description":2062,"labels":2063,"number":2067,"owner":1985,"repository":2020,"state":1997,"title":2068,"updated_at":2069,"url":2070,"score":2071},"### Description\n\nHello, \n\nI was looking for adding Català language to nuxt ui v3. However, i am not used to pull requests but also, the 'ca' code may be confusing with Canada one (and may be others?)\n\nCan someone help me on that way so I will be able to use the locale in the UApp componente :) ?\n\nThank you very much ! \n\n```\n\nimport { defineLocale } from '../composables/defineLocale'\n\nexport default defineLocale({\n name: 'Català',\n code: 'ca',\n messages: {\n inputMenu: {\n noMatch: 'No hi ha dades coincidents',\n noData: 'Sense dades',\n create: 'Crear \"{label}\"'\n },\n calendar: {\n prevYear: 'Any anterior',\n nextYear: 'Any següent',\n prevMonth: 'Mes anterior',\n nextMonth: 'Mes següent'\n },\n inputNumber: {\n increment: 'Incrementar',\n decrement: 'Decrementar'\n },\n commandPalette: {\n placeholder: 'Escriu una ordre o cerca...',\n noMatch: 'No hi ha dades coincidents',\n noData: 'Sense dades',\n close: 'Tancar'\n },\n selectMenu: {\n noMatch: 'No hi ha dades coincidents',\n noData: 'Sense dades',\n create: 'Crear \"{label}\"',\n search: 'Cerca...'\n },\n toast: {\n close: 'Tancar'\n },\n carousel: {\n prev: 'Anterior',\n next: 'Següent',\n goto: 'Anar a la diapositiva {slide}'\n },\n modal: {\n close: 'Tancar'\n },\n slideover: {\n close: 'Tancar'\n },\n alert: {\n close: 'Tancar'\n },\n table: {\n noData: 'Sense dades'\n }\n }\n})\n\n```\n\n### Additional context\n\n_No response_",[2064,2065,2066],{"name":2006,"color":2007},{"name":2017,"color":2018},{"name":2033,"color":2034},3477,"Adding Català language","2025-03-20T14:09:46Z","https://github.com/nuxt/ui/issues/3477",0.73150796,{"description":2073,"labels":2074,"number":2080,"owner":1985,"repository":2020,"state":1997,"title":2081,"updated_at":2082,"url":2083,"score":2084},"### Environment\n\nNode 22\nNuxt 4\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0 alpha 11\n\n### Reproduction\n\nUsing a selectmenu inside a modal doesnt work with search\n\nhttps://codesandbox.io/p/devbox/objective-khayyam-kq8n74\n\n### Description\n\nOpen the modal, open the select options and you will see you cant use the search in any way\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2075,2076,2079],{"name":2029,"color":2030},{"name":2077,"color":2078},"duplicate","cfd3d7",{"name":2017,"color":2018},3109,"SelectMenu search not working inside modal","2025-02-18T10:55:44Z","https://github.com/nuxt/ui/issues/3109",0.7316407,{"description":2086,"labels":2087,"number":2091,"owner":1985,"repository":1985,"state":1997,"title":2092,"updated_at":2093,"url":2094,"score":2095},"Hey,\r\nI'm working on a SSR website and keep having issues with duplicated meta tags. As you can see on the screenshot below, nuxt generate two title tags.\r\n\r\n\r\nI use nuxt `head()` method and `hid` attribute to override defaults tags on my article page, but the two meta tags are being used.\r\n\r\nIn nuxt.config.js : \r\n\u003Cimg width=\"439\" alt=\"capture d ecran 2018-02-26 a 14 24 43\" src=\"https://user-images.githubusercontent.com/4067686/36672788-e3965454-1b00-11e8-92c4-c862300de73e.png\">\r\n\r\nIn videos/_slug.vue :\r\n\u003Cimg width=\"565\" alt=\"capture d ecran 2018-02-26 a 14 22 56\" src=\"https://user-images.githubusercontent.com/4067686/36672727-a7448f98-1b00-11e8-99f5-ea1a8953654a.png\">\r\n\r\nOh, and if I remove default title and description from `nuxt.config.js`, nuxt is using the title from package.json\r\n\r\n**As anyone faced the same issue ? Or maybe I'm using nuxt head method wrong ?**\r\n\r\nThanks in advance for your help !\r\n\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/c2521\">#c2521\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2088],{"name":2089,"color":2090},"2.x","d4c5f9",2902,"Duplicated meta tags and titles","2023-01-18T16:09:43Z","https://github.com/nuxt/nuxt/issues/2902",0.73467076,["Reactive",2097],{},["Set"],["ShallowReactive",2100],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"9hMEZtTyUlnYPZNhvlqWKdhCwIgJM30n-QPgbV_a0vo":-1},"/nuxt/ui/2695"]