Formatting not working when using Nuxt

[ihkawiss]

Environment

consola: 3.2.3

Nitro: 2.8.1 Nuxt: 3.10.2 Node: v20.11.0 NPM: 10.3.0 OS: Windows 11

Reproduction

Create a new nuxt project and use consola in /server/api npx nuxi@latest init <project-name>

The reproduction is prepared in this repo: https://github.com/ihkawiss/consola-nuxt

Describe the bug

When using Nuxt and Consola, the desired formats are not working out-of-the box. There are no colors, date-time information, tags and so on. Important for me would be at least to have date-time information in the logs. I was unable to set the reporter to FancyReporter. It seems, that a BasicReporter is used. The fancy option mentioned in the documentation is not available / working.

Additional context

In index.ts is a check for !(isCI || isTest) which would lead to a BasicReporter. In my tests, both were false.

Logs

Take a look at the nuxt logs compared with the once I logged.

[ihkawiss]

I assume the issue is caused by some sort of typescript / bundle config. Not really an expert there.

For now I'm using a custom reporter, maybe this helps someone.

import { createConsola } from 'consola'
import { env } from '~/shared/util/enviroment'

export const logger = createConsola({
  level: env<number>('logLevel'),
  reporters: [
    {
      log: (msg) => {
        const event = useEvent()
        const date = msg.date.toLocaleString()
        const severity = msg.type.toUpperCase()

        console.log(`${date} ${severity} - ${msg.args}`)
      },
    },
  ],
})

[Atulkumar112]

I assume the issue is caused by some sort of typescript / bundle config. Not really an expert there.

For now I'm using a custom reporter, maybe this helps someone.

import { createConsola } from 'consola'
import { env } from '~/shared/util/enviroment'

export const logger = createConsola({
  level: env<number>('logLevel'),
  reporters: [
    {
      log: (msg) => {
        const event = useEvent()
        const date = msg.date.toLocaleString()
        const severity = msg.type.toUpperCase()

        console.log(`${date} ${severity} - ${msg.args}`)
      },
    },
  ],
})

is it working for you now.? now are you able to see proper colour formatting and time as well?

[ihkawiss]

Hey @Atulkumar112

No, the issue is the same. I'm using this as workaround to see the timestamp and log level in the logs. Without this, I would only see the message itself.

Best regards Kevin

[Atulkumar112]

Hey @Atulkumar112

No, the issue is the same. I'm using this as workaround to see the timestamp and log level in the logs. Without this, I would only see the message itself.

Best regards Kevin

oh! Thanks @ihkawiss for provided custom reporter. let me try it in my project.

[ozfox]

Hi, I just stumbled across this issue when I was wondering about the output format myself. But...

This is the expected behavior as consola/core is used by default which does not ship with the fancy reporter.

... Nuxt 3 mocks consola for server/nitro builds that is why some functions like create do not exist. I have created upstream issue to track from there unjs/unenv#93

You can enable it in your nuxt config:

export default defineNuxtConfig({
  ...
  nitro: {
    alias: {
      consola: 'consola'
    }
  }
  ...
})

Or just use a custom formatter as you already do, which is what I would prefer.