N
Nuxt•2mo ago
Frox

@nuxt/ui as external lib

There is a way to build a npm package that relies on nuxt/ui ( I want to externilize) nuxt/ui during build, there is an example how Can I achive this with Vite? (Not Nuxt)
5 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Frox. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To externalize @nuxt/ui when building a Vue library with Vite (not Nuxt), you can use the build.rollupOptions.external option in your vite.config.ts. This tells Vite/Rollup not to bundle @nuxt/ui into your output, so consumers of your package must install it themselves. Here’s an example configuration: 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.ts', // your entry file
      name: 'MyLib',
      fileName: 'my-lib'
    },
    rollupOptions: {
      // Externalize @nuxt/ui so it is not bundled
      external: ['@nuxt/ui'],
      output: {
        globals: {
          '@nuxt/ui': 'NuxtUI'
        }
      }
    }
  }
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.ts', // your entry file
      name: 'MyLib',
      fileName: 'my-lib'
    },
    rollupOptions: {
      // Externalize @nuxt/ui so it is not bundled
      external: ['@nuxt/ui'],
      output: {
        globals: {
          '@nuxt/ui': 'NuxtUI'
        }
      }
    }
  }
})
This approach is similar to how you would externalize other dependencies like vue in a Vite library build. You can see a comparable example for externalizing vue in a Nuxt/Vite context in this Stack Overflow answer (replace 'vue' with '@nuxt/ui' in your case). Note: The knowledge sources do not provide a full, explicit example for @nuxt/ui, but the standard Vite/Rollup externalization pattern applies, and the Stack Overflow post demonstrates the general approach for external dependencies. If you need to use @nuxt/ui components in your library, make sure to add it as a peerDependency in your package.json so consumers are aware they need to install it themselves. If you need more advanced configuration (e.g., auto-imports or theming), refer to the Nuxt UI Vite plugin documentation, but for externalization, the above is the standard method. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@252212996334551040> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Frox
FroxOP•2mo ago
And what about local development? @kapa.ai And what about local development?
kapa.ai
kapa.ai•2mo ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- For local development of a library that externalizes @nuxt/ui, the knowledge sources do not provide a detailed, explicit workflow. However, the standard approach is to install @nuxt/ui as a dependency in your local project (even if it is externalized for the final build), so your development environment can resolve imports and provide type support. You can do this by running: 
pnpm add @nuxt/ui
# or
npm install @nuxt/ui
pnpm add @nuxt/ui
# or
npm install @nuxt/ui
This allows you to import and use @nuxt/ui components during development. When you build your library with the external option in your vite.config.ts, @nuxt/ui will not be bundled in the output, but it will still be available for local development and testing. If you want to test local changes to @nuxt/ui itself, you can use a local path in your package.json to point to a local clone of @nuxt/ui, as described for Nuxt DevTools and modules in the sources. For example: 
"dependencies": {
  "@nuxt/ui": "file:/path/to/local/nuxt-ui"
}
"dependencies": {
  "@nuxt/ui": "file:/path/to/local/nuxt-ui"
}
This way, you can develop your library and @nuxt/ui in tandem. Just remember to revert to the regular package version before publishing. The knowledge sources do not provide a more specific or unique workflow for local development with @nuxt/ui as an external dependency, so this is the recommended general approach based on the available documentation Use the Nuxt UI Vite plugin in Vue and Nuxt DevTools local development. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@252212996334551040> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?