nikneym Posts - Answer Overflow

nikneym

•Created by nikneym on 7/14/2024 in #❓・help

Nuxt way to teleport modals

Hi, I'm curious if I should <Teleport> my modals to body since there's also #__nuxt div that wraps everything. Which one do you prefer?

4 replies

NNuxt

•Created by nikneym on 7/10/2024 in #❓・help

Passing props vs `useNuxtData`

Hi, when do you prefer useNuxtData over passing props and vice versa? For example I have a ServiceEntity component that's been used for each row in a table. I'm curious if it'd be better to pass entities prop to each (like <ServiceEntity :entities="entities" />) or just directly using useNuxtData("service.entities") inside of the component.

3 replies

NNuxt

•Created by nikneym on 5/18/2024 in #❓・help

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"));
  },
});

2 replies

Gaming

Programming