Forked from nuxt-internal-socket, and inspired by @BayBreezy from his video tutorial.

Nuxt IO Socket

Nuxt module that hooks into the listen hook and creates a socket.io connection.

Why use this module?

You an use this modulke if you want socket functionality in your application but dont want to create a separate socket.io server.

How to use this module?

Follow these steps to get started

• Install the module

1npm install nuxt-io-socket

• Add it to yor nuxt.config file

1export default defineNuxtConfig({
2  modules: ["nuxt-io-socket"],
3});

• Create your socket function file

1mkdir sockets && touch sockets/index.ts

• Create your socket function

1import { Server, Socket } from "socket.io";
2
3export default function (io: Server) {
4  io.on("connection", (socket: Socket) => {
5    console.log("socket connected", socket.id);
6    socket.on("join room", (room) => {
7      socket.join(room);
8    });
9    socket.on("disconnect", (reason) => {
10      console.log("socket disconnected");
11      io.emit("user disconnected", socket.id);
12    });
13  });
14}

• Add your socket function to the nuxt.config file & pass params to the module

1import { defineNuxtConfig } from "nuxt";
2import functions from "./sockets/index";
3
4export default defineNuxtConfig({
5  modules: ["nuxt-io-socket"],
6  socketIO: {
7    /** Required */
8    socketFunctions: functions,
9    /** Optional - these are the defaults
10     */
11    serverOptions: {},
12    /** Optional - these are the defaults
13     * managerOptions is of type ManagerOptions from the socket.io-client library
14     */
15    clientOptions: {
16      uri: "/", // If you want to connect to a different server than the one created by this plugin
17      managerOptions: {},
18    },
19  },
20});

What this module does?

This module will hook into the listen hook and create a socket.io connection.

You can access the socket client instance through the useNuxtApp composable withing your application.

1// get socket from nuxt instance
2const { $io } = useNuxtApp();

Then in a function you can use the socket client to emit events to the server.

1$io.emit("event", { data: "hello" });