Nuxt•7mo ago

Writing a Nuxt 3 module with TailwindCSS

Hi, I'm developing a custom nuxt module with tailwind as a dependency. I can use it from the playground since I've installed the @nuxtjs/tailwindcss but I also want to use it in runtime/components (where I write my custom components). My module.ts looks like this:

import {
  defineNuxtModule,
  createResolver,
  addComponentsDir,
  addImportsDir,
  installModule,
} from "@nuxt/kit";

// Module options TypeScript interface definition
export interface ModuleOptions {}

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: "my-module",
    configKey: "myModule",
  },
  // Default configuration options of the Nuxt module
  defaults: {},
  async setup(_options, nuxt) {
    const { resolve } = createResolver(import.meta.url);

    // Transpile runtime
    const runtimeDir = resolve("./runtime");

    nuxt.options.modules.push("@nuxtjs/tailwindcss");

    // install TailwindCSS
    await installModule("@nuxtjs/tailwindcss", {
      configPath: resolve(runtimeDir, "tailwind.config"),
    });

    // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
    //addPlugin(resolver.resolve("./runtime/plugin"));

    await addComponentsDir({
      path: resolve("./runtime/components"), // path of components
      pathPrefix: false, // Prefix component name by its path.
      prefix: "", // Prefix all matched components.
      global: true, // Registers components to be globally available.
    });

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

import {
  defineNuxtModule,
  createResolver,
  addComponentsDir,
  addImportsDir,
  installModule,
} from "@nuxt/kit";

// Module options TypeScript interface definition
export interface ModuleOptions {}

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: "my-module",
    configKey: "myModule",
  },
  // Default configuration options of the Nuxt module
  defaults: {},
  async setup(_options, nuxt) {
    const { resolve } = createResolver(import.meta.url);

    // Transpile runtime
    const runtimeDir = resolve("./runtime");

    nuxt.options.modules.push("@nuxtjs/tailwindcss");

    // install TailwindCSS
    await installModule("@nuxtjs/tailwindcss", {
      configPath: resolve(runtimeDir, "tailwind.config"),
    });

    // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
    //addPlugin(resolver.resolve("./runtime/plugin"));

    await addComponentsDir({
      path: resolve("./runtime/components"), // path of components
      pathPrefix: false, // Prefix component name by its path.
      prefix: "", // Prefix all matched components.
      global: true, // Registers components to be globally available.
    });

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

1 Reply

nikneymOP•7mo ago

I still couldn't find a documentation on this, can anyone help?

Gaming

Programming

Writing a Nuxt 3 module with TailwindCSS