\n\nI'm also using UModal, UCard elsewhere in the app itself, they do work there.\nSo what do I need to do to get these files parsed my vite/vue/nuxt ui?",[3180],{"name":3181,"color":3182},"question","d876e3",4892,"Using Nuxt UI in components from a npm package, in Vue","2025-09-05T08:48:22Z","https://github.com/nuxt/ui/issues/4892",0.6725786,{"description":3189,"labels":3190,"number":3195,"owner":3141,"repository":3141,"state":3196,"title":3197,"updated_at":3198,"url":3199,"score":3200},"Not sure if this belongs here. Feels like it doesn't belong in the Nuxt repo either, because it's module specific. Let me know if I need to move it.\r\n\r\nSo my situation is the following. I'm further improving my [Nuxt-vuetify module](https://github.com/invictus-codes/nuxt-vuetify). Users of the module, will provide a Vuetify config through the Nuxt.config.ts. Now Vuetify has the following feature when it comes to icons, [fa-svg](https://vuetifyjs.com/en/features/icon-fonts/#font-awesome-svg-icons). To use this feature, you need to provide a function as iconSet (component). This is how it works, I cannot change this. However, this is not the cause of my \"issue\".\r\n\r\nWhat I can't seem to get working is the following, tested it on the nuxt-module-starter:\r\n\r\nIn my Nuxt.config.ts:\r\n```typescript\r\nexport default defineNuxtConfig({\r\n modules: [\"../src/module\"],\r\n myModule: {\r\n testViaConfig() {\r\n console.log(\"test\");\r\n return \"test\";\r\n },\r\n },\r\n});\r\n```\r\n\r\nin my module.ts:\r\n```typescript\r\nimport { defineNuxtModule, addPlugin, createResolver } from \"@nuxt/kit\";\r\n\r\n// Module options TypeScript interface definition\r\nexport interface ModuleOptions {}\r\n\r\nexport default defineNuxtModule\u003CModuleOptions>({\r\n meta: {\r\n name: \"my-module\",\r\n configKey: \"myModule\",\r\n },\r\n // Default configuration options of the Nuxt module\r\n defaults: {},\r\n setup(options, nuxt) {\r\n const resolver = createResolver(import.meta.url);\r\n\r\n nuxt.options.runtimeConfig.public.myModule = {\r\n ...options,\r\n test: \"runtimeConfig, check\",\r\n testViaModule: () => {\r\n console.log(\"test\");\r\n return \"test\";\r\n },\r\n };\r\n // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`\r\n addPlugin(resolver.resolve(\"./runtime/plugin\"));\r\n },\r\n});\r\n```\r\n\r\nIn my runtime/plugin.ts:\r\n```typescript\r\nimport { defineNuxtPlugin, useRuntimeConfig } from \"#app\";\r\n\r\nexport default defineNuxtPlugin((nuxtApp) => {\r\n const config = useRuntimeConfig();\r\n const options = config.public.myModule;\r\n console.log({ options });\r\n console.log(\"Plugin injected by my-module!\");\r\n});\r\n```\r\n\r\nI would expect that in the browser both the `testViaConfig` and `testViaModule` functions would be logged. Except only the string (defined in module.ts, also passed via runtimeConfig), is logged in the browser.\r\n\r\nI have made a codesandbox to reproduce. You can find it [here](https://codesandbox.io/p/github/jvhellemondt/nuxt-module-starter/draft/trusting-galileo?file=%2Fsrc%2Fmodule.ts&workspaceId=26bac05a-e35e-485b-bb0f-53f697bee73f).\r\n\r\nIs it intended that I cannot pass functions to runtime like this? I have the feeling that it's not possible due to rollup, however I'm definitely not an expert on that. If so, is there another way around? It seems vital that users of the module can provide it via the Nuxt.config.ts from a user experience perspective.\r\n\r\nHope someone is able to help out. If I need to explain further, please let me know.\r\n\r\nThank you in advance.\r\n\r\nBest regards,\r\n\r\nJ",[3191,3194],{"name":3192,"color":3193},"3.x","29bc7f",{"name":3151,"color":3152},20933,"closed","Question/ bug: How to provide functions from within Nuxt.config.ts or module.ts to runtime?","2024-04-17T06:42:23Z","https://github.com/nuxt/nuxt/issues/20933",0.6398884,{"description":3202,"labels":3203,"number":3206,"owner":3141,"repository":3141,"state":3196,"title":3207,"updated_at":3208,"url":3209,"score":3210},"### Environment\n\n- Operating System: Windows_NT\r\n- Node Version: v21.6.1\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: yarn@1.22.19\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://github.com/TutorFx/nuxt-zod/tree/type-bug-reproduction\n\n### Describe the bug\n\nAfter creating the module using npx nuxi init -t module _project name_, I noticed that some typings were missing.\r\n\r\n```ts\r\nimport MyModule from '../../../src/module'\r\n\r\nexport default defineNuxtConfig({\r\n// ^^^^^^^^^^^^^^^\r\n// Cannot find name 'defineNuxtConfig'. Did you mean 'defineNitroConfig'?ts(2552)\r\n// nitro.da3b833a.d.ts(867, 11): 'defineNitroConfig' is declared here.\r\n modules: [\r\n MyModule\r\n ]\r\n})\r\n\r\n```\r\n```ts\r\nimport { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'\r\n\r\n// Module options TypeScript interface definition\r\nexport interface ModuleOptions {}\r\n\r\nexport default defineNuxtModule\u003CModuleOptions>({\r\n meta: {\r\n name: 'my-module',\r\n configKey: 'myModule'\r\n },\r\n // Default configuration options of the Nuxt module\r\n defaults: {},\r\n setup (options, nuxt) {\r\n const resolver = createResolver(import.meta.url)\r\n// ^^^^^^^^^^\r\n// The 'import.meta' meta-property is only allowed when the '--module'\r\n// option is 'es2020', 'es2022', 'esnext', 'system', 'node16', \r\n// or 'nodenext'.ts(1343)\r\n\r\n // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`\r\n addPlugin(resolver.resolve('./runtime/plugin'))\r\n }\r\n})\r\n```\n\n### Additional context\n\nSome things I tried to work around the problem:\r\n\r\n- npm ci\r\n- enable the \"Takeover\" mode\r\n- delete the node_modules\r\n- update the node to v21.6.1\r\n\n\n### Logs\n\n_No response_",[3204,3205],{"name":3192,"color":3193},{"name":3151,"color":3152},25456,"Nuxt's module \"defineNuxtConfig\" type error","2024-01-28T23:50:06Z","https://github.com/nuxt/nuxt/issues/25456",0.6535487,{"description":3212,"labels":3213,"number":3215,"owner":3141,"repository":3141,"state":3196,"title":3216,"updated_at":3217,"url":3218,"score":3219},"## Setup\nNuxt: 3.16.1\nOS: MacOS\n\n[Demo repo](https://github.com/MartinLednarLedo/nuxt-layers-demo)\n\n## Context\n\nI am incorporating layers into my codebase. I created a layer for reusable components. During implementation I encountered some problems with overriding the layer files and some questions regarding the file structure of some files.\n\n## Problems / Questions\n\n### 1. Overriding problems\n\n #### Context\nFor components I am using [cva](https://cva.style/docs). Initially I put the files for styles like this:\n`my-layer/components/button/button.styles.ts`. Then when I wanted to override this file in the main application i created file `app/components/button/button.styles.ts`. \n\nI expected that types will be taken from the new file in the app, but instead they were still taken from the layer. Only time it was overriden for the component was, when I added the component itself to the main app.\n\nNext I tried putting these style files into `variants` folder i created in the root of project, and registered it in `nuxt.config.ts` so that they could be auto-imported:\n\n```\n imports: {\n dirs: [\"variants\"],\n },\n```\n\nThen again when I created the `variants` folder in the main app and added styles file for component I expected that the file would be overriden, which didn't happen. The only time it worked was when I added the `imports` to the `nuxt.config.ts` of the app as well.\n\nI would expect the `imports` from layer to be merged into the app's config since the field is not specified there.\n\nCould you suggest what am I doing wrong?\n\n### 2. Assets in layers\n\n #### Context\nI want to give my components some default minimal styling. I am using scss for styling and stylesheets are located in `assets/css`. However when I run the app I get errors that the stylesheet import is not longer valid because stylesheet for component is not available, since assets are not merged into the app like `components/`, `composables/` etc..\n\nI was wondering if there is some way to overcome this or what's the best practice.\n\nThank you in advance for any suggestions.\n",[3214],{"name":3151,"color":3152},31501,"[NEED HELP] Overriding layer files not working as expected","2025-03-22T19:35:16Z","https://github.com/nuxt/nuxt/issues/31501",0.6588879,{"description":3221,"labels":3222,"number":3225,"owner":3141,"repository":3172,"state":3196,"title":3226,"updated_at":3227,"url":3228,"score":3229},"### Description\n\nHey all, \n\nI'm fairly new to nuxt module authorship, and so I was wondering how one may use nuxtUI within a custom module?\nI have the module working, but none of my stylings are coming through, so I am assuming it is a configuration issue. Any guidance, links, or docs on this topic would be greatly appreciated.",[3223,3224],{"name":3181,"color":3182},{"name":3164,"color":3165},4118,"Using NuxtUI within a module","2025-05-23T13:23:04Z","https://github.com/nuxt/ui/issues/4118",0.66099405,{"labels":3231,"number":3234,"owner":3141,"repository":3141,"state":3196,"title":3235,"updated_at":3236,"url":3237,"score":3238},[3232,3233],{"name":3192,"color":3193},{"name":3151,"color":3152},14016,"defineComponent is not defined when a component is used from a module via @nuxt/kit","2023-05-20T08:34:46Z","https://github.com/nuxt/nuxt/issues/14016",0.66424865,{"description":3240,"labels":3241,"number":3245,"owner":3141,"repository":3141,"state":3196,"title":3246,"updated_at":3247,"url":3248,"score":3249},"### Describe the feature\n\nIn the component library module. \r\nWe should automatically import components in Nuxt3 for users. We always import some style files for this component (\u003Cvar-button> import '../xxx/style'). \r\n\r\n at this link https://github.com/nuxt/module-builder/issues/106. I want to use `addComponentsDir` to replace `addComponent`. Then now I can use `extendComponent` to resolve the Component's alias. \r\n\r\nI want to add an optional prototype to the Component's style file. if anyone needs.\r\n\r\nMaybe It's like \r\n\r\n```javascript\r\nconst dirPath = `${moduleName}/es`;\r\nconst filePath = `${moduleName}/es/${kebabCase(name)}/index`;\r\nconst stylePath = `${moduleName}/es/${kebabCase(name)}/style/index`;\r\n\r\naddComponent({\r\n name: `XXX${name}`,\r\n filePath,\r\n stylePath,\r\n export: `_${name}Component`\r\n})\r\n\r\naddComponentsDir({\r\n path: join(CMD, `node_modules/${dirPath}`),\r\n .......\r\n extendComponent (component) {\r\n const componentName = component.pascalName.replace('Var', '')\r\n return {\r\n ...component,\r\n stylePath: `${component.filePath}/style`\r\n export: `_${componentName}Component`,\r\n }\r\n }\r\n ......\r\n})\r\n```\n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3242,3243,3244],{"name":3135,"color":3136},{"name":3138,"color":3139},{"name":3192,"color":3193},25611,"Feature: support style config on addComponent & addComponentsDir","2024-02-09T10:47:38Z","https://github.com/nuxt/nuxt/issues/25611",0.6654819,["Reactive",3251],{},["Set"],["ShallowReactive",3254],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fVyrcRoPk3BnUqYTTDVKxEd8h9LbVm-UJMijze6zps7o":-1},"/nuxt/ui/3679"]