Using Typescript with Nuxt can become tricky when attempting to inject data into `Vue.extend` as it appears to be

Question

Using Typescript with Nuxt can become tricky when attempting to inject data into `Vue.extend` as it appears to be

I want to implement TypeScript support in my Nuxt project.

From my understanding, I need to use Vue.extend when returning the component data like this:

import Vue from 'vue';

type Data = {
 a: number
}

export default Vue.extend({
 data():Data{
  const a = 3;
  return {
   a
  }
 }
})

However, if my component has injected properties, these properties are not attached to the this type.

import Vue from 'vue';

type Data = {
 a: number
}

export default Vue.extend({
 
 inject: ['b'],
 
 data():Data{
  const a = 3;
  const c = this.b
            ^^^^
            // ~~ Property 'b' does not exist on type 'Readonly<Record<never,any>> & Vue' 
  return {
   a
  },
 
  methods:{
   my_method(){
     this.a // no problem here
     this.b // Error here
   }
  }

 }
})

Shouldn't the injected type also be inferred?

I am currently using:

const that = this as any;

which I would prefer to avoid.

typescript vue.js vue-component nuxt.js

Answer 1

Answer №1

If you want to be specific, try explicitly typing this within the data method


import Vue from 'vue';

type Data = {
  a: number
}

export default Vue.extend({

  inject: ['b'],

  data(this: { b: string }): Data {
    const a = 3;
    const c = this.b
    return {
      a
    }
  },

  methods: {
    my_method() {
      this.a // no issue here
      this.b // alright
    }
  }
})

Playground

You can refer to the type definition of Vue.extends:

export interface VueConstructor<V extends Vue = Vue> {
  new <Data = object, Methods = object, Computed = object, PropNames extends string = never>(options?: ThisTypedComponentOptionsWithArrayProps<V, Data, Methods, Computed, PropNames>): CombinedVueInstance<V, Data, Methods, Computed, Record<PropNames, any>>;
  // ideally, the return type should just contain Props, not Record<keyof Props, any>. But TS requires to have Base constructors with the same return type.
  new <Data = object, Methods = object, Computed = object, Props = object>(options?: ThisTypedComponentOptionsWithRecordProps<V, Data, Methods, Computed, Props>): CombinedVueInstance<V, Data, Methods, Computed, Record<keyof Props, any>>;
  new (options?: ComponentOptions<V>): CombinedVueInstance<V, object, object, object, Record<keyof object, any>>;

  extend<Data, Methods, Computed, PropNames extends string = never>(options?: ThisTypedComponentOptionsWithArrayProps<V, Data, Methods, Computed, PropNames>): ExtendedVue<V, Data, Methods, Computed, Record<PropNames, any>>;

  // ......
  extend<Data, Methods, Computed, Props>(options?: ThisTypedComponentOptionsWithRecordProps<V, Data, Methods, Computed, Props>): ExtendedVue<V, Data, Methods, Computed, Props>;
  extend<PropNames extends string = never>(definition: FunctionalComponentOptions<Record<PropNames, any>, PropNames[]>): ExtendedVue<V, {}, {}, {}, Record<PropNames, any>>;
  extend<Props>(definition: FunctionalComponentOptions<Props, RecordPropsDefinition<Props>>): ExtendedVue<V, {}, {}, {}, Props>;
  extend(options?: ComponentOptions<V>): ExtendedVue<V, {}, {}, {}, {}>;
}

Therefore, you can provide explicit generics like so:

export default Vue.extend<Data, { my_method: () => void }, object, 'b'>({

  inject: ['b'],

  data(): Data {
    const a = 3;
    const c = this.b
    return {
      a
    }
  },

  methods: {
    my_method() {
      this.a // no problem here
      this.b // ok
    }
  }
})

Answer 2

If you want to be specific, try explicitly typing this within the data method


import Vue from 'vue';

type Data = {
  a: number
}

export default Vue.extend({

  inject: ['b'],

  data(this: { b: string }): Data {
    const a = 3;
    const c = this.b
    return {
      a
    }
  },

  methods: {
    my_method() {
      this.a // no issue here
      this.b // alright
    }
  }
})

Playground

You can refer to the type definition of Vue.extends:

export interface VueConstructor<V extends Vue = Vue> {
  new <Data = object, Methods = object, Computed = object, PropNames extends string = never>(options?: ThisTypedComponentOptionsWithArrayProps<V, Data, Methods, Computed, PropNames>): CombinedVueInstance<V, Data, Methods, Computed, Record<PropNames, any>>;
  // ideally, the return type should just contain Props, not Record<keyof Props, any>. But TS requires to have Base constructors with the same return type.
  new <Data = object, Methods = object, Computed = object, Props = object>(options?: ThisTypedComponentOptionsWithRecordProps<V, Data, Methods, Computed, Props>): CombinedVueInstance<V, Data, Methods, Computed, Record<keyof Props, any>>;
  new (options?: ComponentOptions<V>): CombinedVueInstance<V, object, object, object, Record<keyof object, any>>;

  extend<Data, Methods, Computed, PropNames extends string = never>(options?: ThisTypedComponentOptionsWithArrayProps<V, Data, Methods, Computed, PropNames>): ExtendedVue<V, Data, Methods, Computed, Record<PropNames, any>>;

  // ......
  extend<Data, Methods, Computed, Props>(options?: ThisTypedComponentOptionsWithRecordProps<V, Data, Methods, Computed, Props>): ExtendedVue<V, Data, Methods, Computed, Props>;
  extend<PropNames extends string = never>(definition: FunctionalComponentOptions<Record<PropNames, any>, PropNames[]>): ExtendedVue<V, {}, {}, {}, Record<PropNames, any>>;
  extend<Props>(definition: FunctionalComponentOptions<Props, RecordPropsDefinition<Props>>): ExtendedVue<V, {}, {}, {}, Props>;
  extend(options?: ComponentOptions<V>): ExtendedVue<V, {}, {}, {}, {}>;
}

Therefore, you can provide explicit generics like so:

export default Vue.extend<Data, { my_method: () => void }, object, 'b'>({

  inject: ['b'],

  data(): Data {
    const a = 3;
    const c = this.b
    return {
      a
    }
  },

  methods: {
    my_method() {
      this.a // no problem here
      this.b // ok
    }
  }
})

Answer 3

Answer №2

Utilize the power of vue-class-component alongside vue-property-decorator.

These libraries enable you to write robust TypeScript code as shown below.

@Component({
  layout: 'form',
  head: { title: 'somr title' },
  directives: { onlyNumber: onlyNumberDirective }
})
export default class Login extends Vue {
  @Ref()
  readonly form!: HTMLFormElement;
  
  phone = '';
  password = '';
  
  someMethod() {}

  get someComputedVar() {}
}

Moreover, nuxt-property-decorator combines the aforementioned libraries for even simpler implementation.

Answer 4

Utilize the power of vue-class-component alongside vue-property-decorator.

These libraries enable you to write robust TypeScript code as shown below.

@Component({
  layout: 'form',
  head: { title: 'somr title' },
  directives: { onlyNumber: onlyNumberDirective }
})
export default class Login extends Vue {
  @Ref()
  readonly form!: HTMLFormElement;
  
  phone = '';
  password = '';
  
  someMethod() {}

  get someComputedVar() {}
}

Moreover, nuxt-property-decorator combines the aforementioned libraries for even simpler implementation.

Answer 5

Answer №3

I encountered a similar issue and here is the solution I came up with: To resolve this, you need to create a plugin for nuxt as shown below and add it to the plugins section in nuxt.config.

Firstly, create an object using Vue.extend

export const MyService = Vue.extend({

  data(){
    return {
      ready: false
    }
  },

  watch: {
    '$accessor.auth.loggedIn'(success){
        if (!success) return;

         this.ready = true;
        //perform actions here ...
     }
  },

  methods: {
    //...
  },

  
})

Next, export the configure plugin function like this:

export default function (ctx, inject) {

  const hookMixin = {
    created() {
      // nuxt context depends on $root object,
      // so we assign $root which was just created

      const $root = this.$root;
      const myService = new MyService({
        beforeCreate() {
          this.$root = $root;
        }
      });

      //make $myService accessible globally
      Object.defineProperty(Vue.prototype, '$myService', {
        get() { return myService; }
      })

    },
  }

  // add global hook onMounted as mixin
  const mixins = ctx.app.mixins || [];
  mixins.push(hookMixin);
  ctx.app.mixins = mixins;
}

Follow these three steps to make sure this component is globally available.

Register the created hook for nuxt to wait until nuxt is ready.
Assign the nuxt $root object when your component is ready during beforeCreate, which can be set via VueConstructor options.
Make the service global so it can be accessed through $myService using Object.defineProperty.

In this example, I use the watch on the store variable loggedIn. I also utilize typed-vuex, where $accessor serves as a global accessor to the store. The concept is simple - wait for the user to log in before performing certain actions.

Enjoy your custom component!

Answer 6

I encountered a similar issue and here is the solution I came up with: To resolve this, you need to create a plugin for nuxt as shown below and add it to the plugins section in nuxt.config.

Firstly, create an object using Vue.extend

export const MyService = Vue.extend({

  data(){
    return {
      ready: false
    }
  },

  watch: {
    '$accessor.auth.loggedIn'(success){
        if (!success) return;

         this.ready = true;
        //perform actions here ...
     }
  },

  methods: {
    //...
  },

  
})

Next, export the configure plugin function like this:

export default function (ctx, inject) {

  const hookMixin = {
    created() {
      // nuxt context depends on $root object,
      // so we assign $root which was just created

      const $root = this.$root;
      const myService = new MyService({
        beforeCreate() {
          this.$root = $root;
        }
      });

      //make $myService accessible globally
      Object.defineProperty(Vue.prototype, '$myService', {
        get() { return myService; }
      })

    },
  }

  // add global hook onMounted as mixin
  const mixins = ctx.app.mixins || [];
  mixins.push(hookMixin);
  ctx.app.mixins = mixins;
}

Follow these three steps to make sure this component is globally available.

Register the created hook for nuxt to wait until nuxt is ready.
Assign the nuxt $root object when your component is ready during beforeCreate, which can be set via VueConstructor options.
Make the service global so it can be accessed through $myService using Object.defineProperty.

In this example, I use the watch on the store variable loggedIn. I also utilize typed-vuex, where $accessor serves as a global accessor to the store. The concept is simple - wait for the user to log in before performing certain actions.

Enjoy your custom component!

Answer 7

Answer №4

Could this be Nuxt3?

Remember to modify

import Vue from 'vue'
export default Vue.extend({...})

to

import { defineComponent } from 'vue';
export default defineComponent({ ... })

Answer 8

Could this be Nuxt3?

Remember to modify

import Vue from 'vue'
export default Vue.extend({...})

to

import { defineComponent } from 'vue';
export default defineComponent({ ... })

Using Typescript with Nuxt can become tricky when attempting to inject data into `Vue.extend` as it appears to be

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

When using Vuejs, it's important to note that the DOM.getBoundingClientRect event does not trigger on window scroll events, but instead

Using v-model with the Toast-UI editor in Vue.js adds a dynamic and

What is the best way to retain all checkbox selections from a form upon submission?

Connect an input in VueJS to a VueX store state value

Reactive value is failing to update according to the changes in the dependent value

Is it possible to include a video as a thumbnail before the video begins playing on a webpage? (I am utilizing Laravel and Vue.js for this project

Is there a way to showcase a specific chart from Charts.vue within App.vue, even though Charts.vue includes multiple charts in a Vue.js application

The npm package that utilizes @types/meteor is unable to locate the meteor/meteor module

Issue with Multer s3 upload: File not functioning properly in s3 and size increase of file

Using asynchronous import statements in Vue allows for more efficient loading of components

What is the best way to create a TypeScript function that can return either a string or an object?

The quantity of elements remains constant in the EventEmitter

Looking to compare the values of objects in one array with the values of objects in another array

Is it possible for me to access and observe the children attribute within the $ref reference

Utilize a dual list approach while setting axios data to useState

I attempted to unsubscribe from an observable in Angular, but I encountered an error stating that the unsubscribe function does not exist

Guide on Fetching an Image from a Server with Vue Js

Executing Cross-Component Communication in Angular 7: A Quick Guide

What is a simple method to convert TypeScript to JavaScript?

How to use attributes in Angular 2 when initializing a class constructor