vuejs-logger: Property '$log' does not exist on type '*'

@sneko solution almost worked for me. Had to change the interface to use the VueConstructor instead.

import Vue from 'vue';

declare module 'vue/types/vue' {
  export interface VueConstructor<V extends Vue = Vue> {
    $log: {
      debug(...args: any[]): void;
      info(...args: any[]): void;
      warn(...args: any[]): void;
      error(...args: any[]): void;
      fatal(...args: any[]): void;
    };
  }
}

@justinkames would you consider adding such a .d.ts file in the NPM package, or publishing another package with type definitions? This is needed to properly use vuejs-logger in Typescript projects.

In the meantime we can all work around it by adding the definitions ourselves, but it would be better if we didn’t have to.

The info comes from here: https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins

I forgot to include that you have to import Vue so the whole file looks like:

// ./src/$log.d.ts
import Vue from 'vue';

declare module 'vue/types/vue' {
  interface Vue {
    $log: {
      info(message: string, trace?: {}): void;
      warning(message: string, trace?: {}): void;
      error(message: string, trace?: {}): void;
    };
  }
}

If you’re using VSCode you might have to reload the window for it to pick up the declaration file.

I should also mention that I’ve stopped using vuejs-logger, so this declaration file is not complete. At a glance it’s missing the debug and fatal methods, but also bear in mind that the log levels appear to be configurable, so you might need some dynamic typings.

The d.ts file is now included in version 1.5.4 and ( 0964b185c6a92f234314b4bbcf83c8ac68ab155c )

Adding this here in case others find it useful. I actually fixed it by doing the following:

declare module 'vue-jslogger' {
    module "vue/types/vue" {
        interface VueConstructor<V extends Vue = Vue> {
            $log: {
                debug(...args: any[]): void;
                info(...args: any[]): void;
                warn(...args: any[]): void;
                error(...args: any[]): void;
                fatal(...args: any[]): void;
            };
        }
    }
}

My understanding (I’m new to Typescript) is that you want to declare the module for the, well, module you installed, here vue-jslogger and in it extend existing modules (the Vue one vue/types/vue should be installed already if you’re reading this) with the correct interface so that vscode understands it. For instance the above does the trick if you’re calling $log from the Vue instance directly by upgrading its constructor. If you’re calling from within a Vue instance, add the declaration to the Vue interface directly.

No worries, glad it’s working 😃

It was simply that our requirements changed - we need to post our logs to an API. I ended up creating my own very simple Plugin - I’m very grateful to @justinkames for his work with this because it is great to learn from. In the end we just needed something a bit more specific to our needs.

@sneko I solved this by extending the vue model myself

declare module 'vue/types/vue' {
  interface Vue {
    $log: {
      info(message: string, trace?: {}): void;
      warning(message: string, trace?: {}): void;
      error(message: string, trace?: {}): void;
    };
  }
}

I realise this is only a short term solution, but just in case you needed something immediately.