unable to use Mixins in vue with typescript

vue-class-component mixin
vue-mixin-decorator
should i use typescript with vue
vue plugin typescript
vue typescript beforerouteleave
laravel vue mixins
vue mixin watch
vue-router mixin

I have a folder structure like this

--Page    
   -group.vue    
--Services
  -groupMixin.ts

script of group.vue

<script lang="ts">
     import { Vue, Component, Mixins } from 'vue-property-decorator'

     import { GroupMixin } from '../../services/groupMixin';
     @Component
     export default class Group extends Mixins(GroupMixin) {
        created () {
          console.log(this.test)
        }
      }
</script>

code of groupMixin.ts

import { Vue } from 'vue-property-decorator'
//creating mixins.
export class GroupMixin extends Vue {
  test: string = 'sss'
}

I am facing two problems here.

First, to import a ts file i used ../../, is there any way to use ./ or @/. Without using lang="ts", i can import a js file like this @/services/...

Second, not able to access the varaible test which i declared in groupmixin.ts.


Please try to do the following to make your mixin to work:

group.vue

<script lang="ts">
 import Vue from 'vue';
 // mixins only exist in `vue-class-component` and Component is a default export.
 import Component, { mixins } from 'vue-class-component';

 import { GroupMixin } from '../Services/groupMixin';

 @Component
 export default class Group extends mixins(GroupMixin) {
    created () {
      console.log(this.test)
    }
  }
</script>

groupMixin.ts

import { Vue } from 'vue'

export class GroupMixin extends Vue {
  test: string = 'sss'
}

There is a reason that I am using importing Vue using import Vue from 'vue';, it is mainly because some IDE's are highlighting Vue functions like $emit when it is imported from vue-class-component.

As for import ts files if you are not using vue-cli you'll need to setup webpack's resolve alias and also in your tsconfig.json and possibly will need to use tsconfig-paths

Using mixins with TypeScript - Get Help, I see that using vue-class-component it's as easy as: Can not solve the Vue mixin approach with inheritance in typescript? Is not the same? Currently, importing Vue mixins in vue-class-component under TypeScript is tricky, as defining them in @Component() Object and in class seems to be not enough. If referring to mixin properties in the decorated class, say in the created(){} life-cycle, plain JavaScript would be fine, but in Typescript, due to its strong typings feature, its


I spent a lot of time today trying to figure out how to get Vue mixins to work in a TypeScript project. Apparently all the normal ways that the tutorials say to use mixins simply do not work in TypeScript. The components don't have access to the properties defined in their mixins because apparently the Vue framework's mixin code just isn't TypeScript-friendly.

Eventually, I did find a way to get mixins working in TypeScript. Working really well, in fact. I have multiple levels of mixin inheritance in my project, with mixins extending other mixins, and it all works exactly how I expected it to. The secret was that I had to install this third-party package that someone wrote to fix mixins in TypeScript:

https://www.npmjs.com/package/vue-typed-mixins

Couple words of warning (but neither is a big deal):

  1. This plugin only works for me if I define my mixins in .ts files instead of .vue files. This wasn't a problem for me because my mixins only contain code, no html or css (and I can't think of a situation where that would even make sense).

  2. When you include a mixin on a component, make sure you do it the same way as the example on the package's website (url above). If you simply install the package without refactoring your code to follow the example on the site, it won't work.

Here's a simple example:

// /src/mixins/MyMixin.ts

import Vue from "vue";

export default Vue.extend({
    data: function () {
        return {
            mixinMessage: "this came from MyMixin!"
        };
    },
    created: function () {
        console.log("MyMixin.created()");
    },
    mounted: function () {
        console.log("MyMixin.mounted()");
    },
    methods: {
        mixinOutput: function (text:string) {
            console.log("mixin says: " + text);
        }
    }
});

Which is then used by:

// /src/components/MyComponent.vue

<template>
    <div>
        whatever
    </div>
</template>

<style>
    /* whatever */
</style>

<script lang="ts">
    import mixins from "vue-typed-mixins";
    import MyMixin from "../mixins/MyMixin";

    export default mixins(MyMixin).extend({
        created: function () {
            console.log("MyComponent.created()");
        },
        mounted: function () {
            console.log("MyComponent.mounted()");

            this.mixinOutput("hello from MyComponent");
            this.mixinOutput(this.mixinMessage);
        }
    });
</script>

@Mixins How to use · Issue #113 · kaorun343/vue-property , Or how to use VeeValidate with TypeScript? I can not use Vue.use(VeeValidate) because i will get computed fields for all components in projects,  In other words, it needs to inherit Vue constructor as an ancestor and be decorated by @Component decorator. # Mixins. Vue Class Component provides mixins helper function to use mixins in class style manner. By using mixins helper, TypeScript can infer mixin types and inherit them on the component type. Example of declaring mixins Hello and World:


mixins.ts

import { Vue, Component } from "vue-property-decorator";

@Component
export default class Mixin extends Vue {
  public perfectScrollbarSetting: object = {
    maxScrollbarLength: 750
  };
  public widthClient: number = 0;
  public heightClient: number = 0;
}

file About.vue

<template>
</template>
<script lang="ts">
import { Vue, Component, Mixins } from "vue-property-decorator";
import { generalInfo } from "../../store/modules/general";
import Mixin from "../../mixin/mixins";
@Component({
  mixins: [Mixin]
})
export default class About extends Mixins(Mixin) {
  mounted() {
    console.log(this.widthClient) //it's work
  }

}
</script>

Can i use mixins global in vue? i am use typescript with vue · Issue , if i call function $notify (in file mixins and declared in main.ts) by this or Vue. ts will show error this function doesn't exist in module. So how to  @posva We are using TypeScript with @Component decorators. The implementation of this decorator uses Vue.extend(options) in order to create the components. We are then needing to extend/mixin functionality from multiple components, causing this issue.


As of today there's 2 ways to use a mixin with Typescript/Vue:

  1. If your mixin holds just variables:
// mixins/title.ts
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class titleMixin extends Vue {
  public test: string = 'Hello, hello, hello'
}

// Page.vue
import { Component, Vue, Mixins } from 'vue-property-decorator'
import titleMixin from '@/mixins/title'

export default class Page extends Mixins(titleMixin) {
  private mounted(): void {
    console.log(this.test) // would print: Hello, hello, hello
  }
}
  1. If you're using lifecycle hooks:
// mixins/title.ts
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class titleMixin extends Vue {
  private mounted(): void {
    console.log('somevalue')
  }
}

// Page.vue
import { Component, Vue } from 'vue-property-decorator'
import titleMixin from '@/mixins/title'

@Component({
  mixins: [titleMixin]
})
export default class Page extends Vue {} // this will print console.log

This way it works for me. You can take a look at 'vue-class-component' package: https://github.com/vuejs/vue-class-component/blob/master/test/test.ts#L389

How to write a Vue.js app completely in TypeScript, Since Vue is flexible, users are not forced to use TypeScript. To use the above mixin in our Vue component, we need to import Mixins from  Vue Typed Mixins. Type safe Vue.js mixins. Example. This has the same capability of canonical Vue mixins, but is type safe in TypeScript.


Vue support breaks when extending Mixin (TypeScript) : WEB-43243, It fails as an IDE when using TypeScript and Vue (two of the most popular libraries of their kind) with what is still the most common component syntax, and will still  Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components. In most cases, you should only use it for custom option handling like demonstrated in the example above. It’s also a good idea to ship them as Plugins to avoid duplicate application. Custom Option Merge Strategies


Is Vue.js really ready for TypeScript? - Ondřej Janošík, provide a form of code reuse that is based on composing behavior. returns the class itself. So Vue mixins can be shared between multiple Vue components without the need to repeat code blocks. Anyone who has used the CSS pre-processor called SASS has a good idea of mixins. Tip : Use Bit to reuse and sync your components across your projects and apps; it will help you share more code, build fatser and stay consistent.


Understanding Mixins in Vue JS, NET Framework + Angular — This story for 2 years ago. Nowaday, it is a time of .​NET core & Vúe….oops, sorry, it's VueJS. ABP using typescript for VueJS, beside​  Vue Mixin Decorator. This library fully depends on vue-class-component.. Most ideas and code are stolen borrowed from @HerringtonDarkholme and his av-ts project. Also from @JsonSong89's comment, who suggested that the idea should be extracted into a separate project which is why I've begrudgingly done so.