Integrating Vue Components with UnoCSS into Nuxt Application – Styling Challenges

Question

I have a Vue application using UnoCSS for styling, and I want to share these components with my Nuxt application. However, I'm facing issues with UnoCSS styles not working when creating a Nuxt module for the Vue components.

Current Approach using pnpm Workspaces

I am attempting to use pnpm workspaces with two packages: one for the Vue app (named components-lib) with components and the other for the Nuxt app (named app) that should have access to the Vue components.

Nuxt Module Definition (./packages/components-lib/index.ts)

// ./packages/components-lib/index.ts
import path from 'node:path';
import { defineNuxtModule } from '@nuxt/kit';

export default defineNuxtModule({
  setup(_, nuxt) {
    // Add Vue components directory to Nuxt
    nuxt.hook('components:dirs', (dirs) => {
      dirs.push({
        path: path.join(__dirname, './src/components'),
        prefix: 'test',
      });
    });
  },
});

Dependency Management (./app/package.json)

  "dependencies": {
    "components-lib": "workspace:*"
  },

Nuxt Configuration (./app/nuxt.config.ts)

export default defineNuxtConfig({
  modules: [
    'components-lib',
  ],
});

Question

How can I ensure UnoCSS styles work seamlessly in my Nuxt application without having to install UnoCSS directly and duplicate the configuration?