Skip to content

Working With Nuxt 3 Module #197

Open
@halilyuce

Description

@halilyuce

Describe the bug

I created a UI module that contains components and although everything looks as it should in the development env but when I build the project, I noticed that the windiCSS classes were not created.

To Reproduce
Steps to reproduce the behavior:

  1. Create a Nuxt 3 module project
  2. Add WindiCSS to the project
  3. Build the project
  4. See the error

Expected behavior
After compiling the project, I was expecting to see the CSS classes I used in the components.

Screenshots

When I add the component from the nuxt module I created to another simple Nuxt 3 project:

image

When I did run the module project in dev mode:

image

Additional context

nuxt.config.ts

import { defineNuxtConfig } from "nuxt/config";
import module from "../src/module";

export default defineNuxtConfig({
  modules: [module, "nuxt-windicss"],
  ssr: false,
  imports: {
    autoImport: true,
  },
  windicss: {
    scan: {
      include: ["../src/runtime/**/*.{vue,ts}"],
      exclude: ["node_modules", ".git"],
    },
  },
  css: ["ant-design-vue/dist/antd.css"],
});


module.ts

async setup(options, nuxt) {
    if (options.addPlugin) {
      const { resolve } = createResolver(import.meta.url);
      const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
      nuxt.options.build.transpile.push(runtimeDir);

      addImportsDir(resolve(runtimeDir, "composables"));

      addComponentsDir({
        path: resolve(runtimeDir, "components"),
        pathPrefix: false,
        prefix: "",
        // @ts-ignore
        level: 999,
        global: true,
      });

      addPlugin(resolve(runtimeDir, "plugin"));
    }
  },

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions