\n```",[1984,1987],{"name":1985,"color":1986},"question","d876e3",{"name":1988,"color":1989},"v3","49DCB8",3517,"nuxt","ui","open","How To Style NavigationMenu items","2025-03-14T13:01:49Z","https://github.com/nuxt/ui/issues/3517",0.767863,{"description":1999,"labels":2000,"number":2004,"owner":1991,"repository":1991,"state":2005,"title":2006,"updated_at":2007,"url":2008,"score":2009},"I've got two relatively simple questions about the function of plugins from someone just starting with Nuxt. I'm trying to create service with a set of methods that can be called in response to user actions in the browser. These methods need to be able to access the store. \r\n\r\nIdeally I have a file `util.js` with the following:\r\n\r\n```\r\nimport store from '~store'\r\n\r\nmodule.exports = {\r\n actionA () {\r\n store.commit('a')\r\n },\r\n actionB () {\r\n store.commit('b')\r\n }\r\n}\r\n```\r\n\r\nHowever, from my understanding the only way to pass the store to a plugin is through using unnamed exports like example below. Also, in this case the code is invoked immediately and doesn't expose a method with context that I can use later on:\r\n\r\n```\r\nexport default ({ store }) => {\r\n store.commit('a')\r\n}\r\n```\r\n\r\n\r\nA) Functionally, should this 'service' be a plugin? My understanding is that plugins are intended to be run before the app is instantiated, while I am just looking to expose a set of methods that can be invoked on-demand client-side. If I were to create this in `/services/util.js` would there be any way to import the global store there?\r\n\r\nB) If it does make sense to wrap this service in a plugin, is there anyway to access store in plugin while still using named exports? I'd hope to avoid having to create a separate file for every instance.\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/c2436\">#c2436\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2001],{"name":2002,"color":2003},"2.x","d4c5f9",2807,"closed","Does this service belong in a plugin?","2023-01-18T16:02:39Z","https://github.com/nuxt/nuxt/issues/2807",0.72971255,{"description":2011,"labels":2012,"number":2014,"owner":1991,"repository":1991,"state":2005,"title":2015,"updated_at":2016,"url":2017,"score":2018},"\u003C!--\r\n🚨 IMPORTANT 🚨\r\n\r\nPlease use the following link to create a new issue:\r\n\r\n- 🚨 Bug report - https://bug.nuxtjs.org/ \r\n- 🙋 Feature request - https://feature.nuxtjs.org/ \r\n- 🤔 Help wanted - https://otechie.com/nuxt \r\n- ❗️ All other issues - https://cmty.nuxtjs.org/ \r\n\r\nIf your issue was not created using the app above, **it will be closed immediately**.\r\n\r\n🚨 注意事项 🚨\r\n\r\n请务必使用下述链接来创建 issue:\r\n\r\n- 🚨 Bug 提交 - https://bug.nuxtjs.org/ \r\n- 🙋 新功能提案 - https://feature.nuxtjs.org/ \r\n- 🤔 寻求帮助 - https://otechie.com/nuxt \r\n- ❗️ 其他问题 - https://cmty.nuxtjs.org/ \r\n\r\n如果 issue 不是通过上述链接进行创建, **该 issue 会被系统自动关闭**\r\n-->\r\n\r\nHow can I implement generic store which can be reusable? for example:\r\n\r\ninterface BaseState {\r\nlist: []\r\n}\r\n\r\ninterface ChildState extends BaseState {}\r\n\r\nexport default class BaseActions\u003CBaseState> implements ActionTree\u003CBaseState, BaseState>{\r\nadd(context:ActionContext, payload:BaseState){\r\ncontext.commit('ADD', palyload)\r\n}\r\n}\r\n\r\nexport default class ChildActions extends BaseAction\u003CChildState>{\r\n.. need to add actions only if one not available in parent class\r\n}\r\n\r\nor if can I create generic store which contains all (actions, mutations, getters, state)\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/c9337\">#c9337\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2013],{"name":2002,"color":2003},5908,"Re-usability of vuex store using typescript ","2023-01-18T20:25:39Z","https://github.com/nuxt/nuxt/issues/5908",0.7343859,{"description":2020,"labels":2021,"number":2029,"owner":1991,"repository":1992,"state":2005,"title":2030,"updated_at":2031,"url":2032,"score":2033},"### Description\n\nI'm basically trying to display the week day full name in the Calendar header slot.\n\nInstead of having `S - M - T - W - T - F -S` as week day headers, I'd like to show `Sunday - Monday - Tuesday - Wednesday - ...`\n\nThe `#week-day` slot only provides the day's letter, so there's no way to reformat it.\n\n```\n\u003Ctemplate #week-day=\"item\">\n {{ item }}\n\u003C/template>\n```\n\nIt simply displays \n```\n{\n \"day\": \"M\"\n}\n```\nWhich is not super helpful\n\nWould it be possible to have, like, the weekday number (0 to 6) ? \n\nSuggestion:\n```\n{\n \"day\": \"M\",\n \"dayNumber\": \"1\",\n}\n```\n\n### Additional context\n\n_No response_",[2022,2025,2026],{"name":2023,"color":2024},"enhancement","a2eeef",{"name":1988,"color":1989},{"name":2027,"color":2028},"triage","ffffff",3714,"Pass more complete data to Calendar week-day slots","2025-04-01T11:52:50Z","https://github.com/nuxt/ui/issues/3714",0.7361905,{"description":2035,"labels":2036,"number":2040,"owner":1991,"repository":1991,"state":2005,"title":2041,"updated_at":2042,"url":2043,"score":2044},"Hi,\r\n\r\nI have a custom node module, and I want to import a vue component from that module to my nuxt project. The external component has its own vuex store and will dispatch its own action. How should I import it to my nuxt project?\r\n\r\nFor the way I import it now, it will throw `[vuex] unknown action type: external_action`. I guess it's because this action is not defined in current nuxt project.\r\n\r\nThe following code is part of the external component, by triggering `toggleModalAuth()`, it will dispatch action `toggleModalAuth `, which is defined in the custom module.\r\n```\r\nmethods: {\r\ntoggleModalAuth() {\r\n if(util.jwtTokenIsHere()) {\r\n this.$store.dispatch('toggleModalIdentity', {\r\n value: !this.$store.state.modalIdentityIsShown\r\n })\r\n } else {\r\n this.$store.dispatch('toggleModalAuth', {\r\n value: !this.$store.state.modalAuthIsShown\r\n })\r\n }\r\n }\r\n}\r\n```\r\n\r\nAny help would be appreciated!!\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/c2509\">#c2509\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2037,2039],{"name":2038,"color":2028},"stale",{"name":2002,"color":2003},2887,"How to import external component with external store","2023-01-18T16:09:43Z","https://github.com/nuxt/nuxt/issues/2887",0.74837905,{"description":2046,"labels":2047,"number":2052,"owner":1991,"repository":1992,"state":2005,"title":2053,"updated_at":2054,"url":2055,"score":2056},"### Environment\n\n```\n------------------------------\n- Operating System: Darwin\n- Node Version: v23.2.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.17.1\n- Nitro Version: 2.10.4\n- Package Manager: npm@11.0.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.10\n- Build Modules: -\n------------------------------\n```\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n@nuxt/ui@3.0.0-alpha.10\n\n### Reproduction\n\nhttps://github.com/endquote/github-ugsebknu\n\n### Description\n\nTailwind in general is working fine for layout classes. However if I use a class like `drop-shadow-lg` it does not have an impact as it seems some variables are undefined.\n\n\u003Cimg width=\"328\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/1678ab42-b682-416b-9606-2d8605c837a1\" />\n\nPerhaps related, I'm seeing these warnings when building:\n\n```\n[vite:css] Lexical error on line 1: Unrecognized text. 4:12:25 PM\n\n Erroneous area:\n1: infinity * 1px\n^..^\n945| }\n946| .rounded-full {\n947| border-radius: calc(infinity * 1px);\n | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n948| }\n949| .rounded-s { (x2)\n\nℹ ✓ 227 modules transformed. 4:12:26 PM\n[plugin @tailwindcss/vite:generate:build] Sourcemap is likely to be incorrect: a plugin (@tailwindcss/vite:generate:build) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help\n```\n\nIn `nuxt.config.ts` I have this:\n`css: [\"~/assets/css/main.css\"]`\n\nIn `main.css` I have this:\n\n```\n@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n```\n\n### Additional context\n\nI'm new to vue/nuxt/tailwind so it's entirely possible I'm doing something wrong.\n\n\n### Logs\n\n```shell-script\n\n```",[2048,2051],{"name":2049,"color":2050},"bug","d73a4a",{"name":1988,"color":1989},2964,"undefined tailwind variables, css sourcemap warnings","2025-02-15T15:29:19Z","https://github.com/nuxt/ui/issues/2964",0.748907,{"description":2058,"labels":2059,"number":2062,"owner":1991,"repository":2063,"state":2005,"title":2064,"updated_at":2065,"url":2066,"score":2067},"`ProjectModalBranches` and `ProjectModalFiles` share the same logic for combox, the idea is to create a component `components/project/ProjectCombobox.vue` that will handle the logic:\n\n**Props**\n\n- `itemsLabel`\n- `items`\n- `recentItemsLabel` (default `Recent`)\n- `recentItems`\n- `actionsLabel` (default `null`)\n- `actions`",[2060],{"name":2023,"color":2061},"1ad6ff",362,"nuxt.com","Refactor command palette logic into one component","2023-02-15T12:32:14Z","https://github.com/nuxt/nuxt.com/issues/362",0.7489949,{"description":2069,"labels":2070,"number":2072,"owner":1991,"repository":1991,"state":2005,"title":2073,"updated_at":2074,"url":2075,"score":2076},"I noticed that folder `store` is automagically loaded, my question is, how do I get the `store` object to use directly? I'm aware that methods like `fetch`, `asyncData`, and `nuxtServerInit` have access to `commit`, `dispatch` and the like, but how do I do this:\r\n\r\n```javascript\r\nstore.dispatch('action',data)\r\n```\r\nfrom within a component \u003Cscript>\u003C/script> tags but not necessary the exported methods? \r\n\r\nfor example, suppose I want to invoke an action from `created`, there is no `{ store }` as there would be for `asyncData`.\r\n\r\n```javascript\r\nexport default {\r\n asyncData({store}) {\r\n // store is available here\r\n },\r\n created({store}) {\r\n // store is not available here\r\n }\r\n```\r\n\r\nDoes it make sense to import store?\r\n```javascript\r\nimport { store } from '../store/index'\r\n```\r\n\r\nSeems like it should be unnecessary since this file is already imported (?)\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/c1374\">#c1374\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2071],{"name":2002,"color":2003},1543,"New to Nuxt question","2023-01-18T15:41:58Z","https://github.com/nuxt/nuxt/issues/1543",0.76084477,{"description":2078,"labels":2079,"number":2080,"owner":1991,"repository":2081,"state":2005,"title":2082,"updated_at":2083,"url":2084,"score":2085},"Right now the docs has a quite limitation and there is no guidance on integrating with a full Nuxt app which contains pages with may api calls, not just plugin or components let alone ts module import.\r\n\r\nIt would be much appreciated if you can expand the docs on for a more specific cases or may be some examples on this repo or say a fiddle, codepen, codesandbox ?",[],265,"test-utils","more docs on how to mock test for a page","2023-12-02T00:18:11Z","https://github.com/nuxt/test-utils/issues/265",0.76232696,{"description":2078,"labels":2087,"number":2088,"owner":1991,"repository":2081,"state":2005,"title":2082,"updated_at":2089,"url":2090,"score":2085},[],355,"2023-12-02T00:13:09Z","https://github.com/nuxt/test-utils/issues/355",["Reactive",2092],{},["Set"],["ShallowReactive",2095],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"HSTRiu3_6DIqvBxJ4z-NkSu2ZBdDLm-xRGpjZ3JO6i8":-1},"/nuxt/nuxt.com/1841"]