Add Winston Logging to Nuxt3

Winston is a logging framework that we want to use in our Nuxt3 application, but the Winston package from Nuxt is still only available for Nuxt2. There is sparse documentation on getting this particular combination of tools working.

I tried pulling in the Nuxt Winston package anyway (https://www.npmjs.com/package/nuxt-winston-log), but that did not work as expected.

Note that this is only for logging in Nuxt's SSR functionality ("server-side rendering"). I'm not trying to get Winston to log from the client side.

So in this case, we just want to use Winston directly:

Step 1

Run yarn add winston

Step 2

Create a server-side plugin. Prefix the file with 00. since plugins are loaded in alphabetical order, and you'll likely want your logging available in your other plugins. Suffix with .server.ts so that this only tries to run on the server side; Winston isn't meant for use on client side.
Filename: plugins/00.logging.server.ts

import { defineNuxtPlugin } from "#app";
import winston from "winston";

export default defineNuxtPlugin(() => {
  const logger = winston.createLogger({
    level: 'info',
    format: winston.format.combine(winston.format.printf((event) => {
      return `${JSON.stringify({ ...event, timestamp: new Date().toISOString() }, null, 4)}\n`;
    })),
    defaultMeta: { service: 'myappname' },
    transports: [
      new winston.transports.Console()
    ],
  });

  return {
    provide: {
      logger
    }
  }
});

Step 3 (Optional)

For ease of use and so that a single logging function can be called from both the frontend and the backend, build some composables.
Filename: composables/logging.ts

export function logServerError(err: any, message?: string) {
  const nuxtApp = useNuxtApp();
  if (process?.server && nuxtApp.$logger) {
    nuxtApp.$logger.log("error", message, err);
  } else {
    console.error("We Have Encountered an ERROR: ", err);
  }
}

export function logServerWarn(message: string) {
  const nuxtApp = useNuxtApp();
  if (process?.server && nuxtApp.$logger) {
    nuxtApp.$logger.log("warn", message);
  } else {
    console.warn(message);
  }
}

export function logServerInfo(message: string) {
  const nuxtApp = useNuxtApp();
  if (process?.server && nuxtApp.$logger) {
    nuxtApp.$logger.log("info", message);
  } else {
    console.info(message);
  }
}

Step 4 (If you did Step 3)

Use the logger. Filename: plugins/50.myplugin.js

export default defineNuxtPlugin(async (nuxtApp) => {

  // do stuff to setup my app

  // do more stuff

  logServerInfo("Plugin operations complete");
});

Notes

• You might get TS warnings on the references to nuxtApp.$logger.log. After all this rigamarole, I just put // @ts-ignore and moved on.
• The filename of the plugin doesn't matter if none of your other plugins needs logging.
• You have to provide the logger itself from the plugin, not the logger.log function
• If you want different output (say to a file instead of the console), reference the Winston documentation: https://github.com/winstonjs/winston

The package you've linked to is compatible with Nuxt2 and doesn't list Nuxt3 as a compatible framework. In addition, there's been no commits for 3+ years. I found an issue on that package addressing this very thing with official feedback saying it would require some reworking: https://github.com/aaronransley/nuxt-winston-log/issues/10

I would recommend either commenting in that thread, or forking the project and adding compatibility yourself. You may also want to contact the author about contributing with them towards a Nuxt3 version.

in this case , we can try nuxt3-winston-log

nuxt3-winston-log is a Nuxt 3.x modules to add winston-powered logging to your Nuxt application . it is very simple to use , just use console.log and console.error to log everythings .

Step 1
Install npm package

yarn add nuxt3-winston-log

Step 2
Edit your nuxt.config.js file to add module

{
  modules: ["nuxt3-winston-log"];
}

Step 3
Change options using the nuxt3WinstonLog key as needed

we can see more details in nuxt3-winston-log