Skip to content

Working With Nuxt 3 Module #197

Open
@halilyuce

Description

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

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