Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

unable to use Mixins in vue with typescript

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.

like image 344
Sam Avatar asked Aug 16 '18 08:08

Sam


People also ask

Can TypeScript be used with Vue?

Vue is written in TypeScript itself and provides first-class TypeScript support. All official Vue packages come with bundled type declarations that should work out-of-the-box.

What are mixins in TypeScript?

Mixins are a faux-multiple inheritance pattern for classes in JavaScript which TypeScript has support for. The pattern allows you to create a class which is a merge of many classes.

How do mixins work in Vue?

Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component's own options.


2 Answers

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>
like image 79
Joe Irby Avatar answered Nov 15 '22 19:11

Joe Irby


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

like image 43
Marlon Barcarol Avatar answered Nov 15 '22 21:11

Marlon Barcarol