Vue.jsでtemplateでclassを複数定義したいならこうしよう

結論

Vue.jsでこんな感じでかけます

<template lang="pug">
.hoge-container
  .box-wrapper(:class="[propsClass, { active: isActive }]")
</template>

<script>
export default {
  name: 'hoge-container'
  props: {
    propsClass: {
      type: String,
      required: false,
    },
    isActive: {
      type: Boolean,
      required: true,
    }
  }
}
</script>

説明

この書き方の場合、 propsClass には class名が String で渡ってきたら、そのまま classに入る。そして、 isActive は true で渡ってきたら、 active クラスが付与される。

補足：これでもok

<template lang="pug">
.hoge-container
  .box-wrapper(:class="[propsClassA, propsClassB, propsClassC]")
</template>

<template lang="pug">
.hoge-container
  .box-wrapper(:class="{active: isActive, big: isBig}")
</template>