Not mounting properly?

[jameshhood]

I was looking for a nuxt logger and came across this and had high hopes. I added everything to the nuxt.config as described, but for what ever reason I keep getting 'Cannot read property 'debug' of undefined'

Ive tried using this in middleware using

export default function({store, app, redirect }) {
     if(notAuthenticated) {
         app.$log.error('User is not authenticated!')
         redirect('/auth')
      }
  }

I've tried using this in the vuex store using this.$log.debug('checking authentication')

Ive tried using this in a plugin using

import Vue from 'vue'

Vue.$log.debug('Setting theme to be...')

Nothing seems to work and it keeps acting as if its not mounted. Id really like to use this. What can i do to get this to work?

[justinkames]

@jameshhood

Interesting, never tried it with nuxt personally. Will look into it!

[jameshhood]

I was able to get this working for the most part using a plugin. I am having difficulty getting the options to work though

[justinkames]

@jameshhood What do you mean exactly, getting the options to work?

[jameshhood]

Every time i tried to apply options it would say invalid options were passed. I got it to work though after tons of tinkering.

[homerjam]

Hi @jameshhood would you mind sharing what you did to get up and running with nuxt please?

[jameshhood]

so I made a plugin called logger.js with the following code

import Vue from 'vue'
import VueLogger from 'vuejs-logger'

const options = {
  isEnabled: true,
  logLevel: process.env.logLevel,
  stringifyArguments: false,
  showLogLevel: true,
  showMethodName: true,
  separator: '|',
  showConsoleColors: true
}
Vue.use(VueLogger, options)
export default ({
  app,
  store
}, inject) => {
  console.debug('Initializing Logger', options)
  VueLogger.install(Vue, options)
  app['$log'] = Vue.$log
  store['$log'] = Vue.$log
}

Two things to note here

1. for options, I created an environment variable to be defaulted by the nuxt config, or say passed in by a PM2 config to set the logLevel. I default my nuxt config to 'error' and then have my dev command inside my package.json file pass 'debug' so when im running in dev mode it will always show debug output and when i run production it will be at error.
2. For the logger to be accessible in other parts of the app outside of the standard vue (ie. app and store), i had to manually inject the logger into it. Its not a perfect solution but it allows me to use the logger inside the vuex store and during asyncData calls

Hope this helps

[homerjam]

Awesome, thank you!

On Mon, 1 Oct 2018, 20:37 James Hood, notifications@github.com wrote:

so I made a plugin called logger.js with the following code

import Vue from 'vue' import VueLogger from 'vuejs-logger'

const options = { isEnabled: true, logLevel: process.env.logLevel, stringifyArguments: false, showLogLevel: true, showMethodName: true, separator: '|', showConsoleColors: true } Vue.use(VueLogger, options) export default ({ app, store }, inject) => { console.debug('Initializing Logger', options) VueLogger.install(Vue, options) app['$log'] = Vue.$log store['$log'] = Vue.$log }

Two things to note here

1. for options, I created an environment variable to be defaulted by the nuxt config, or say passed in by a PM2 config to set the logLevel. I default my nuxt config to 'error' and then have my dev command inside my package.json file pass 'debug' so when im running in dev mode it will always show debug output and when i run production it will be at error.
2. For the logger to be accessible in other parts of the app outside of the standard vue (ie. app and store), i had to manually inject the logger into it. Its not a perfect solution but it allows me to use the logger inside the vuex store and during asyncData calls

Hope this helps

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/justinkames/vuejs-logger/issues/21#issuecomment-426035589, or mute the thread https://github.com/notifications/unsubscribe-auth/ABAcGds2gWIXgHDyDXuyG0NkrHhTUpFhks5ugm76gaJpZM4VtZtn .