nikneym Posts - Answer Overflow

nikneym

•Created by nikneym on 11/27/2024 in #❓・help

Using protobufs with Nuxt

Hi, I'm trying to integrate google protocol buffers to nuxt to use together with websockets. I've searched through the web but couldn't find any resources so I've came up with my own to provide build artifacts to my app:

import { createResolver } from "nuxt/kit";
import pbjs from "protobufjs-cli/pbjs";

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  nitro: {
    experimental: {
      websocket: true,
    },
  },
  hooks: {
    // creates protobufs at build time
    "app:templates": (app) => {
      const { resolve } = createResolver(import.meta.url);
      const dir = resolve("./proto");

      pbjs.main(["--target", "json", dir + "/test.proto"], (err, output) => {
        if (err !== null) {
          throw err;
        }

        app.templates.push({
          filename: "protobuf.json",
          // intentionally write to disk
          write: true,
          getContents: () => output!,
        });
      });
    },
    "app:templatesGenerated": () => {
      console.info("Templates are generated successfully");
    },
  },
});

import { createResolver } from "nuxt/kit";
import pbjs from "protobufjs-cli/pbjs";

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: true },
  nitro: {
    experimental: {
      websocket: true,
    },
  },
  hooks: {
    // creates protobufs at build time
    "app:templates": (app) => {
      const { resolve } = createResolver(import.meta.url);
      const dir = resolve("./proto");

      pbjs.main(["--target", "json", dir + "/test.proto"], (err, output) => {
        if (err !== null) {
          throw err;
        }

        app.templates.push({
          filename: "protobuf.json",
          // intentionally write to disk
          write: true,
          getContents: () => output!,
        });
      });
    },
    "app:templatesGenerated": () => {
      console.info("Templates are generated successfully");
    },
  },
});

Is this the preferred way? Thanks in advance.

7 replies

NNuxt

•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