I am trying to inject a javascript class as a plugin.

I get following error: Cannot read property 'log' of undefined

Class to be injected:

// helper/logging.service.js

export class LoggingService {
  constructor (prefix) {
      this.prefix = prefix
  }

  log (message) {
      console.log(`[${this.prefix}] ${message}`)
  }

  debug (message) {
      console.debug(`[${this.prefix}] ${message}`)
  }

  warn (message) {
      console.warn(`[${this.prefix}] ${message}`)
  }
}

Plugin:

// plugins/logger.client.js

import { LoggingService } from '../helper/logging.service'

export default ({ app }, inject) => {
  // create an instance of the LoggingService with the prefix 'My App'
  const logging = new LoggingService('My App')

  // inject the service, making it available in the context, component, store, etc.
  inject('logging', logging)
}

Usage:

// pages/logger.vue

<template>
  <button @click="log('Button clicked!')">Click Me</button>
</template>

<script>  
export default {
  name: 'ExamplePage',

  created () {
    this.$logging.log('Component created!')   // error is here
  },

  mounted () {
    this.$logging.debug('Component mounted!')
  },

  methods: {
    log (message) {
      this.$logging.warn(message)
    }
  }
}
</script>

UPDATE:

It looks like the plugin is not available in the created hook on client side, why? If I convert the plugin to a server-client side plugin, it works.