Vue class-based-components Extends And Mixins

Question

Hello how can I convert this component in a class-based-component using typescript?

<script>
import { Line } from 'vue-chartjs'
import { chartLast30Days, chartStylingMethods } from '#/mixins'
import { myChartOptions } from '#/const/charts'

export default {
    extends: Line,
    mixins: [chartLast30Days, chartStylingMethods],
    props: { chartPointsDownloads: Array, chartPointsPlays: Array, chartPointsSales: Array },        
}
</script>

Answer 1

I can give you some code examples for creating class based components using the vue property decorator, extending classes and use mixins.

Vue component, class based:

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class MyClass extends Vue {
    created() {
        console.log("Created MyClass");
    }
}
</script>

Extend an existing class:

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import MyClass from './MyClass';
@Component
export default class MyExtendingClass extends MyClass {
  created() {
    console.log("Created MyExtendingClass");
  }
}
</script>

Creating a mixin:

import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class MyMixin extends Vue {
  myMixinValue = 'Fetch my mixin';
}

Inject mixins to component:

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import MyClass from './MyClass';
import MyMixin from './MyMixin';
@Component({
  mixins: [MyMixin]
})
export default class MyExtendingClass extends MyClass {
  created() {
    console.log("Created MyExtendingClass");
    console.log(this.myMixinValue);
  }
}
</script>