How to use vue-class-component - 10 common examples

import InputRadio from '../../vue/component/InputRadio.vue'

import modalMixin from './modal-mixin'
import Component, { mixins } from 'vue-class-component'

const { remote } = window.node.electron
const getPath = window.preload.getPath
const { scoreDir, liveDir } = getPath
const url = window.node.url

@Component({
  components: {
    InputRadio
  }
})
export default class extends mixins(modalMixin) {
  difficulty: string = '4'
  live: any = {}
  difficulties: { [key: string]: string } = {}

  async start () {
    this.playSe(this.enterSe)
    const res = await window.preload.getScore(
      scoreDir(this.live.score), // scoreFile)
      this.difficulty, // difficulty
      this.live.bpm, // bpm
      liveDir(this.live.fileName) // audioFile
    )
    if (!res) return

    this.event.$emit('gameStart')
    this.event.$emit('pauseBgm')

import * as Vts from 'vue-property-decorator'
import { mixins as Mixins } from 'vue-class-component'
import Vue from 'vue'
import Symbol from './symbol'
import VMixin from '../../mixins/v.mixin'
import * as _ from '../../../common/lodash'
import * as core from '../../../common/core'
import * as rkeys from '../../../common/rkeys'
import * as http from '../../../common/http'
import * as utils from '../../adapters/utils'
import socket from '../../adapters/socket'



@Vts.Component
export default class extends Mixins(VMixin) {
	$parent: Symbol
	symbol = this.$parent.symbol
	all = this.$parent.all

	deals = [] as Quotes.Deal[]

	created() {
		// this.syncdeals()
	}

	beforeDestroy() {
		socket.offListener(this.ondeal, this)
		this.deals.splice(0)
	}

	syncdeals() {

export function WithRouteStore(options: RouteStoreOptions) {
	return createDecorator(componentOptions => {
		// Store the options passed in.
		componentOptions.routeStoreOptions = {
			...componentOptions.routeStoreOptions,
			...options,
		};

		// We unshift so that this always goes first before the RouteResolver
		// callback.
		componentOptions.mixins = componentOptions.mixins || [];
		componentOptions.mixins.unshift({
			beforeRouteEnter(route, _from, next) {
				const options = componentOptions.routeStoreOptions;
				if (options) {
					const { store, routeStoreClass, routeStoreName } = options;
					store.registerModule(routeStoreName, new routeStoreClass());

import Vue from "vue"
import Component from "vue-class-component"
import Router from "vue-router"

Vue.use(Router)

// you have to register the hooks before component definition
Component.registerHooks(["beforeRouteEnter", "beforeRouteUpdate", "beforeRouteLeave", "beforeRouteLeave"])

export default new Router({
  routes: [
    {
      path: "/",
      redirect: "/project/prerequisites"
    },
    {
      path: "/project",
      redirect: "/project/prerequisites",
      component: () => import(/* webpackMode: "eager" */ "./components/project.vue"),
      children: [
        {
          path: "prerequisites",
          component: () => import(/* webpackChunkName: "project" */ "./components/prerequisites.vue")
        },

// class-component-hooks.js
import Component from 'vue-class-component'

// Register the router hooks with their names
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate' // for vue-router 2.2+
])

/// 

import Vue from 'vue';
import Component, { mixins, createDecorator } from 'vue-class-component';

export { Vue, Component, mixins, createDecorator };
export * from 'vue-property-decorator';
export * from 'vuex-class';

Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteUpdate',
  'beforeRouteLeave',
  'asyncData',
  'head',
  'middlewares',
]);

Vue.use(mixins);

// use dayjs
import date from './plugins/date';
Vue.use(date);

// use markdown-it
import markdown from './plugins/markdown';
Vue.use(markdown);

// use nprogress
import nprogress from './plugins/nprogress';
Vue.use(nprogress);

// register hooks
Components.registerHooks([
  'fetch',
]);

import Component from 'vue-class-component';

// Register the router hooks with their names
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate' // for vue-router 2.2+
]);