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@nuxtjs/tailwindcss but I also want to use it in runtime/componentsruntime/components (where I write my custom components). My module.tsmodule.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"));
},
});
