Nuxt•2mo ago

Packaging Nuxt UI 3 with a custom theme in a private package

Does anyone have any pointers? Basically I want to use the Nuxt UI components with our own custom theme, potentially also exporting our own custom modules build with the Nuxt UI components. My thoughts were to make it a private npm package so the "client" app wouldnt have to set up much.

2 Replies

kapa.ai•2mo ago

Hi @hiimmox. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, I can help you with packaging Nuxt UI 3 components with a custom theme in a private package. This is indeed possible and can be a great way to share your customized UI components across multiple projects. Here's how you can approach this: 1. Create a Nuxt layer: You can create a Nuxt layer that contains your customized Nuxt UI components and theme. This layer can be published as a private npm package. 2. Customize the theme: In your layer, create an app.config.ts file to define your custom theme. You can override the default Nuxt UI settings here. For example:

   export default defineAppConfig({
     ui: {
       primary: 'your-custom-color',
       // other customizations
     }
   })

   export default defineAppConfig({
     ui: {
       primary: 'your-custom-color',
       // other customizations
     }
   })

Source (https://ui.nuxt.com/pro/getting-started/structure#appconfigts) 3. Create custom components: You can create your own components using Nuxt UI components as a base. These can be placed in the components directory of your layer. 4. Publish as a private npm package: To publish your layer as a private npm package, ensure your package.json is set up correctly. Here's an example:

   {
     "name": "@your-org/ui-theme",
     "version": "1.0.0",
     "type": "module",
     "main": "./nuxt.config.ts",
     "files": [
       "components",
       "app.config.ts"
     ],
     "dependencies": {
       "@nuxt/ui": "^2.11.0"
     },
     "devDependencies": {
       "nuxt": "^3.0.0"
     }
   }

   {
     "name": "@your-org/ui-theme",
     "version": "1.0.0",
     "type": "module",
     "main": "./nuxt.config.ts",
     "files": [
       "components",
       "app.config.ts"
     ],
     "dependencies": {
       "@nuxt/ui": "^2.11.0"
     },
     "devDependencies": {
       "nuxt": "^3.0.0"
     }
   }

Source (https://nuxt.com/docs/guide/going-further/layers#npm-package) 5. Use in client projects: In the client Nuxt project, you can extend from your custom layer:

   // nuxt.config.ts
   export default defineNuxtConfig({
     extends: ['@your-org/ui-theme']
   })

   // nuxt.config.ts
   export default defineNuxtConfig({
     extends: ['@your-org/ui-theme']
   })

Source (https://nuxt.com/docs/guide/going-further/layers#npm-package) Remember to ensure that your private npm package is accessible to the client projects, which may require setting up authentication for npm. This approach allows you to encapsulate your custom theme and components in a reusable package, making it easy for client projects to implement your customized UI without much setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@327193365797928963> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Packaging Nuxt UI 3 with a custom theme in a private package