\r\n \u003C/template>\r\n\r\n \u003Ctemplate #description=\"{ description }\">\r\n \u003Cspan v-html=\"description\" />\r\n \u003C/template>\r\n \u003C/UNotifications>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst toast = useToast()\r\nconst app = useNuxtApp()\r\n\r\nconst columns = [{\r\n key: \"id\",\r\n label: \"编号\",\r\n class: 'w-16'\r\n}, {\r\n key: \"from\",\r\n label: \"发方\",\r\n class: 'w-[180px]'\r\n}, {\r\n key: \"to\",\r\n label: \"接方\",\r\n class: 'w-[180px]'\r\n\r\n}, {\r\n key: \"type\",\r\n label: \"类型\",\r\n class: 'w-[120px]'\r\n\r\n}, {\r\n key: \"value\",\r\n label: \"金额\",\r\n class: 'w-[120px]'\r\n\r\n}, {\r\n key: \"hash\",\r\n label: \"哈希\",\r\n}\r\n]\r\n\r\nconst people = ref([\r\n /*{\r\n \"id\": 1,\r\n \"from\": { value: '0x11111111fce9647bdf1e7877bf73ce8b0bad1111', class: 'w-[80px]' },\r\n \"to\": '0x22222222fce9647bdf1e7877bf73ce8b0bad2222',\r\n \"type\": 'ETH',\r\n \"value\": '123',\r\n \"hash\": '0x88baba17ca0060d644a72a9460260104eea81e7959445d3500d015ed71875d38',\r\n }*/\r\n])\r\n\r\n\r\n\u003C/script>\r\n\r\n\r\n\u003Cstyle>\r\na {\r\n color: #65a30d;\r\n font-weight: 700;\r\n font-size: 20px;\r\n}\r\n\r\n\r\n\u003C/style>\r\n```\r\n\r\n\r\n\r\nHowever, once there is data, it will be stretched open. How can I fix the header so that the content is partially hidden and drag the header to decide whether to hide or display it? This is too common in daily development and provides a good user experience\r\n\r\n\r\n```vue\r\nconst people = ref([\r\n {\r\n \"id\": 1,\r\n \"from\": { value: '0x11111111fce9647bdf1e7877bf73ce8b0bad1111', class: 'w-[80px]' },\r\n \"to\": '0x22222222fce9647bdf1e7877bf73ce8b0bad2222',\r\n \"type\": 'ETH',\r\n \"value\": '123',\r\n \"hash\": '0x88baba17ca0060d644a72a9460260104eea81e7959445d3500d015ed71875d38',\r\n }\r\n])\r\n```\r\n\r\n",[2867,2870],{"name":2868,"color":2869},"question","d876e3",{"name":2871,"color":2872},"stale","ededed",2092,"nuxt","ui","open","UTable column width","2024-09-29T02:05:59Z","https://github.com/nuxt/ui/issues/2092",0.7583008,{"description":2882,"labels":2883,"number":2887,"owner":2874,"repository":2888,"state":2876,"title":2889,"updated_at":2890,"url":2891,"score":2892},"Im trying to use country-icons dynamically based on input, but Im having issues.\n\n```\n\u003Cscript setup lang=\"ts\">\nimport { Icon } from '#components'\n\nconst props = defineProps\u003C{\n country: string\n}>()\n\nconst icon = computed(() => {\n const icon = props?.country.toLowerCase()\n if (icon == 'northern ireland') {\n return 'ireland'\n }\n return icon\n})\nconst FlagIcon = h(Icon, { name: 'twemoji:flag-' + icon.value, size: 18 })\n\n\u003C/script>\n\u003Ctemplate>\n \u003CFlagIcon />\n\u003C/template>\n```\n\nThis is working when loading the page SSR, but navigating to the page results in errors like this:\n`DR5f3n0Z.js:52 [Icon] failed to load icon 'twemoji:flag-hungary'`\n\nHow can I create the icon names dynamically?",[2884],{"name":2885,"color":2886},"need-repro","A50BA3",321,"icon","Dynamic icon name","2024-12-12T08:54:20Z","https://github.com/nuxt/icon/issues/321",0.7665595,{"description":2894,"labels":2895,"number":2902,"owner":2874,"repository":2874,"state":2876,"title":2903,"updated_at":2904,"url":2905,"score":2906},"### Describe the feature\r\n\r\nI'm reaching out with a suggestion that might enhance the documentation, particularly for those looking to disable code splitting. We recently came across a method to inline dynamic imports through the Rollup configuration, effectively disabling code splitting. This was discovered in a ViteJS discussion ([Reference here](https://github.com/vitejs/vite/discussions/13925#discussioncomment-7709077)):\r\n\r\n```typescript\r\nbuild: {\r\n rollupOptions: {\r\n output: {\r\n inlineDynamicImports: true\r\n }\r\n }\r\n}\r\n```\r\n\r\nComing forth to this solution took us a considerable amount of time. A search in the Nuxt documentation for \"code splitting\" yielded few results. Including this information in the Nuxt documentation could significantly improve the developer experience, making this knowledge more readily accessible.\r\n\r\nThere are practical scenarios, such as ensuring seamless access for mobile users with unstable internet connections, where disabling code splitting can be beneficial. Although code splitting with dynamic imports provides some fantastic optimizations, ensuring that the entire page content is downloaded and ready on the first load can be crucial in these situations. I do understand, that there are [ways to handle these errors](https://nuxt.com/docs/getting-started/error-handling#errors-with-js-chunks), but unfortunately, as the application grows, it just creates too much room for error.\r\n\r\nI must admit my understanding of the implications of setting `inlineDynamicImports` to `true` is not comprehensive. One of our applications, deployed as a static single-page app, benefits from this setting, but I'm uncertain about its effects in other build configurations. I would greatly appreciate if someone could provide further insight on this.\r\n\r\nAdditionally, I would like your opinion on the best section within the Nuxt documentation to include this information, ensuring it's easily found by those who need it.\r\n\r\nLooking forward to your thoughts and guidance on this matter.\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2896,2899],{"name":2897,"color":2898},"documentation","5319e7",{"name":2900,"color":2901},"discussion","538de2",24539,"Docs: Suggestion for documenting disabling code splitting","2024-06-30T11:06:44Z","https://github.com/nuxt/nuxt/issues/24539",0.76809484,{"description":2908,"labels":2909,"number":2913,"owner":2874,"repository":2875,"state":2914,"title":2915,"updated_at":2916,"url":2917,"score":2918},"### Environment\r\n\r\n```\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v21.6.1\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: bun@1.1.26\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, modules\r\n- Runtime Modules: @nuxt/ui@2.18.4\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n### Version\r\n\r\n2.18.4\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/MickL/nuxtui-colors-bug\r\n\r\n### Description\r\n\r\nWhen the color prop is created dynamically, some css styles are not generated, especially for subtle and soft variants:\r\n\r\nFor example, `subtle` badges dont have correct border color and the background colors are missing:\r\n\r\n\u003Cimg width=\"237\" alt=\"Bildschirmfoto 2024-09-14 um 18 47 17\" src=\"https://github.com/user-attachments/assets/a3dd5d73-02ae-43d5-96ff-3ef67342cb1d\">\r\n\r\nIt should look like this:\r\n\r\n\u003Cimg width=\"236\" alt=\"Bildschirmfoto 2024-09-14 um 18 46 37\" src=\"https://github.com/user-attachments/assets/7fd2bd00-f2c2-40ed-a7f8-23ec07266d29\">\r\n\r\nIn my reproduction repo I used a table:\r\n```\r\n \u003CUTable :columns :rows>\r\n \u003Ctemplate #colors-data=\"{row}\">\r\n \u003CUBadge :color=\"row.color\" variant=\"subtle\">Subtle Badge\u003C/UBadge>\r\n \u003CUButton :color=\"row.color\" variant=\"soft\">Soft Button\u003C/UButton>\r\n \u003C/template>\r\n \u003C/UTable>\r\n```",[2910],{"name":2911,"color":2912},"bug","d73a4a",2199,"closed","Missing tailwind classes for dynamic colors","2024-09-23T10:31:05Z","https://github.com/nuxt/ui/issues/2199",0.68194044,{"description":2920,"labels":2921,"number":2922,"owner":2874,"repository":2923,"state":2914,"title":2924,"updated_at":2925,"url":2926,"score":2927},"[nuxi build](https://nuxt.com/docs/api/commands/build) is missing the docs for `--preset`\r\n\r\nSource: https://github.com/nuxt/cli/blob/main/src/commands/build.ts#L22",[],1556,"nuxt.com","docs: nuxi build missing `--preset` option","2024-04-12T22:06:13Z","https://github.com/nuxt/nuxt.com/issues/1556",0.7202302,{"description":2929,"labels":2930,"number":2934,"owner":2874,"repository":2875,"state":2914,"title":2935,"updated_at":2936,"url":2937,"score":2938},"### 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_",[2931],{"name":2932,"color":2933},"enhancement","a2eeef",2168,"Make an inplace editable table","2024-09-11T14:14:15Z","https://github.com/nuxt/ui/issues/2168",0.7408877,{"description":2940,"labels":2941,"number":2946,"owner":2874,"repository":2875,"state":2914,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### Description\n\nAs it is today, when you change the neutral color on dark mode, the whole background changes, which I personally love.\n\nI think it would be nice if that happened on light mode as well. So instead of using #fff, using neutral-50.\n\nWould that make sense?\n\nI'm willing to contribute if this suggestion is accepted.\n\n### Additional context\n\n_No response_",[2942,2943],{"name":2932,"color":2933},{"name":2944,"color":2945},"v3","49DCB8",3189,"Change light-mode body bg-color from white to neutral-50","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3189",0.74583256,{"description":2952,"labels":2953,"number":2957,"owner":2874,"repository":2874,"state":2914,"title":2958,"updated_at":2959,"url":2960,"score":2961},"\r\nthere is my config\r\n```javascript\r\nimport path from 'path'\r\nimport CopyWebpackPlugin from 'copy-webpack-plugin'\r\n\r\nexport default {\r\nbuild: {\r\n extend(config, ctx) {\r\n config.plugins.push(\r\n new CopyWebpackPlugin([\r\n {\r\n from: 'node_modules/mavon-editor/dist/highlightjs',\r\n to: path.join(__dirname, 'static/plugins/highlightjs/')\r\n }\r\n ])\r\n )\r\n\r\n return config\r\n }\r\n }\r\n}\r\n\r\n```\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c9883\">#c9883\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2954],{"name":2955,"color":2956},"2.x","d4c5f9",6538,"Copy-Webpack-Plugin can not work?","2023-01-18T21:49:16Z","https://github.com/nuxt/nuxt/issues/6538",0.7529289,{"description":2963,"labels":2964,"number":2970,"owner":2874,"repository":2923,"state":2914,"title":2971,"updated_at":2972,"url":2973,"score":2974},"On sub-pages (paths longer than 1 level) 404 is not triggered\n\nEx:\n\nhttps://nuxt.com/unknown => Triggers 404\nhttps://nuxt.com/modules/unknown => Broken page",[2965,2967],{"name":2911,"color":2966},"ff281a",{"name":2968,"color":2969},"SEO","01403D",1046,"404s handling","2023-06-06T12:14:30Z","https://github.com/nuxt/nuxt.com/issues/1046",0.7609995,{"description":2976,"labels":2977,"number":2979,"owner":2874,"repository":2875,"state":2914,"title":2980,"updated_at":2981,"url":2982,"score":2983},"### Description\n\nWould be nice to have the option to preserve theme per component, for example if you have dark footer and it needs to be dark in both themes, then any component residing inside it will change the colours, but in such a case you might want to preserve dark theme for components in dark footer. \r\n\r\nYes it's possible to overwrite styles per component, but for some use cases this could become quite a clutter.\r\nAlso this option could nicely work with \"hybrid\" themes.\n\n### Additional context\n\n_No response_",[2978],{"name":2932,"color":2933},2087,"Preserve theme for component","2024-09-06T10:16:43Z","https://github.com/nuxt/ui/issues/2087",0.76200175,["Reactive",2985],{},["Set"],["ShallowReactive",2988],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f8x2wEsWNn3TH1QxGCXz2c0zlLJxklFwJypW5fuhyGSo":-1},"/nuxt/ui/2828"]