Nuxt•4w ago

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.

3 Replies

kapa.ai•4w ago

Hi @nikneym. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Thank you for your question about integrating Google Protocol Buffers with Nuxt and WebSockets. While your approach is creative, there isn't a standardized or officially recommended way to integrate Protocol Buffers with Nuxt specifically. However, I can provide some insights based on the available information. Your approach of generating Protocol Buffer artifacts at build time using Nuxt hooks is a valid strategy. It leverages Nuxt's extensibility to incorporate Protocol Buffers into your build process. Here are some observations: 1. You're using the app:templates hook to generate the Protocol Buffer JSON output, which is a reasonable approach Nuxt Configuration (https://nuxt.com/docs/api/nuxt-config#hooks). 2. You've enabled WebSocket support in Nitro, which is necessary for using WebSockets with Nuxt 3 Nitro WebSocket Guide (https://nitro.unjs.io/guide/websocket). 3. The use of protobufjs-cli for compilation is appropriate, as it's a standard tool for working with Protocol Buffers in JavaScript/TypeScript environments. However, there are a few considerations: 1. Ensure that the generated protobuf.json file is properly accessible in your Nuxt application. You might need to adjust your build configuration to include it in the appropriate directory. 2. For using Protocol Buffers with WebSockets in Nuxt, you'll need to set up a WebSocket server handler and client-side code to use the generated Protocol Buffer definitions. The Nitro WebSocket API can be used for this purpose Nitro WebSocket Guide (https://nitro.unjs.io/guide/websocket#usage). 3. Consider whether you need to generate TypeScript definitions alongside the JSON output for better type safety in your Nuxt application. While your approach is workable, it's worth noting that integrating Protocol Buffers with Nuxt is not a common use case, which explains the lack of resources you encountered. You might want to consider creating a Nuxt module to encapsulate this functionality if you plan to reuse it across projects. For further assistance or to discuss alternative approaches, you might want to reach out to the Nuxt community through their official channels Nuxt Community Help (https://nuxt.com/docs/community/getting-help). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@233591823098970113> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

nikneymOP•4w ago

I think I've found a better solution, by adding these imports I can use the generated json in both vue & nitro apps

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,
    },
    imports: {
      dirs: ["shared"],
    },
  },
  imports: {
    dirs: ["../shared"],
  },
  hooks: {
    // generate protobufs before building the nuxt app
    "build:before": () => {
      const { resolve } = createResolver(import.meta.url);
      const proto = resolve("./proto");
      const shared = resolve("./shared");

      pbjs.main([
        "--target",
        "json",
        proto + "/*.proto",
        "-o",
        shared + "/proto/proto.json",
      ]);
    },
  },
});

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,
    },
    imports: {
      dirs: ["shared"],
    },
  },
  imports: {
    dirs: ["../shared"],
  },
  hooks: {
    // generate protobufs before building the nuxt app
    "build:before": () => {
      const { resolve } = createResolver(import.meta.url);
      const proto = resolve("./proto");
      const shared = resolve("./shared");

      pbjs.main([
        "--target",
        "json",
        proto + "/*.proto",
        "-o",
        shared + "/proto/proto.json",
      ]);
    },
  },
});

(also added this run script)

pbjs --target json proto/*.proto -o shared/proto/proto.json

pbjs --target json proto/*.proto -o shared/proto/proto.json

Gaming

Programming

Using protobufs with Nuxt