Nuxt injection not found

Question

What am I doing wrong when injecting a logger to the Nuxt instance?

loglevel.client.js

import log from 'loglevel';

log.setLevel(process.env.LOG_LEVEL || 'debug');

export default ({ app }, inject) => {
  inject('log', log);
  log.debug('logger set up')
}

nuxt.config.js

  plugins: [
    '~/plugins/loglevel.client.js',
    '~/plugins/api.js',
  ],

plugins\api.js

if (process.client) {
  console.log('on client console')
  this.$log.error('on client $log')
}

browser:

api.js?e568:4 on client console
08:22:26.456 api.js?e568:5 Uncaught TypeError: Cannot read properties of undefined (reading '$log')
    at eval (api.js?e568:5:1)
    at Module../plugins/api.js (app.js:1033:1)

Nick Dawes · Accepted Answer · 2022-03-14 12:25:32Z

1

inject makes $log available elsewhere by attaching it as a property to both the root Vue app and to the Nuxt context.

Plugins are ran before the root Vue app is instantiated— you can't access $log via this.$log, unless this refers to the root Vue app instance (like it does in components).

Instead you'll have to access $log via the Nuxt context, which is conveniently available as the first argument to your api.js plugin.

export default ({ $log }) => {
  if (process.client) {
    console.log('on client console')
    $log.error('on client $log')
  }
}

From the docs:

The (Nuxt) context provides additional objects/params from Nuxt to Vue components and is available in special nuxt lifecycle areas like asyncData , fetch , plugins , middleware and nuxtServerInit.

Also, it looks like loglevel is registered as a client-side plugin (loglevel.client.js). That code will not run server side— so you don't have to wrap anything within process.client.

answered Mar 14, 2022 at 12:25

Nick Dawes

2,2641 gold badge15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Leos Literak Over a year ago

Thanks, this seems to work.

Leos Literak Over a year ago

I wrapped it with process.client to test this condition. But it fails with "api.js?e568:3 Uncaught ReferenceError: process is not defined".

Nick Dawes Over a year ago

"process" is a node (ie. server-side) global, not a browser global. There's no such thing as "process.client" on the client side, so you will indeed see this error. Just remove it, you don't need to check you're on the client because you specified api is a client-side only plugin by adding ".client.js" to the filename.

Leos Literak Over a year ago

Well, process.client comes from an official Nuxt documentation: axios.nuxtjs.org/helpers

Nick Dawes Over a year ago

Yup, which is documentation for a universal plugin, not a client-side plugin. Universal plugins run on the server (node), so process.client is recognised by node.

Collectives™ on Stack Overflow

Nuxt injection not found

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related