question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Typescript definitions are not included the package

See original GitHub issue

It would be good to include the definitions along with this package.

Right now the following code needs to be included in the VueJS app in order to make the typescript recognise them.

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;
      };
    }
}

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:1
  • Comments:21 (8 by maintainers)

github_iconTop GitHub Comments

3reactions
Glandoscommented, Mar 23, 2020

Hi everyone, I am still struggling with Typescript import system. However, I found that this code is working for me:

// For unknown reason, we need the first import to declare $log on Vue
// and the second to get the correct plugin type
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import VueLogger from 'vuejs-logger'
import VueLoggerPlugin from 'vuejs-logger/dist/vue-logger'

const debug = process.env.NODE_ENV !== 'production'
Vue.use(VueLoggerPlugin, {
// options
})

It works with vuejs-logger@1.5.4.

0reactions
ztnelcommented, Oct 22, 2021

Hi everyone, I am still struggling with Typescript import system. However, I found that this code is working for me:

// For unknown reason, we need the first import to declare $log on Vue
// and the second to get the correct plugin type
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import VueLogger from 'vuejs-logger'
import VueLoggerPlugin from 'vuejs-logger/dist/vue-logger'

const debug = process.env.NODE_ENV !== 'production'
Vue.use(VueLoggerPlugin, {
// options
})

It works with vuejs-logger@1.5.4.

Im using ts with vue 2.6.14 and "vuejs-logger": "^1.5.5", and this works for me. Here is what I have:

// /main.ts
import VueLoggerPlugin from "vuejs-logger/dist/vue-logger";
const isProduction = process.env.NODE_ENV === "production";

const options = {
  isEnabled: true,
  logLevel: isProduction ? "error" : "debug",
  stringifyArguments: false,
  showLogLevel: true,
  showMethodName: true,
  separator: "|",
  showConsoleColors: true,
};

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

Vue.use(VueLoggerPlugin, options);

Hope this helps someone.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Type definitions bundled with npm modules are not ... - GitHub
I have a JS project that depends on mobx and other libs that include its own type definitions bundled and properly declared in...
Read more >
Documentation - Publishing - TypeScript
Including declarations in your npm package. If your package has a main .js file, you will need to indicate the main declaration file...
Read more >
Package type definition cannot be found - Stack Overflow
We are using a global namespace for all files and all the compiled files get concatenated because of the outFile compiler option. No...
Read more >
Typescript Typings: The Complete Guide: @types Compiler ...
The @types scope package contains type definitions for a lot of libraries, like Express, Sequelize, JQuery, and many others. So definitively ...
Read more >
Type Declarations
If a library you're using is published as an npm package, it may include type declaration files as part of its distribution already....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found