お客さんによって表示内容を変えるテンプレートを作るには（Vue）

お客さんによって表示内容を変えたい

やったー！ついに最強のテンプレートができた！
これでどんな案件にも対応でき・・・あれ、利用規約とか会社情報とかは、お客さんによって変える必要があるな・・・

方法は・・・

まず、プロジェクトによって変わる値を設定したいな
.env.development.localを作ろう、アヒル社だからahiruっと

// .env.development.local
VUE_APP_PROJECT=ahiru

こうするとVue3の場合、npm run serve した時に、読み込めるんだったよね
とりあえず読み込めてるかチェックしてみよう

// TermsOfService.vue
<template>
  {{project}}
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    const project = process.env.VUE_APP_PROJECT);
      return {
        project
      }
    }
})

よしよしテンプレートでもちゃんと読み込めてるね

ahiru

TermsOfService.vueに直接利用規約を書いちゃうと、表示が分けられないから別ファイルにしよう

// Ahiru.vue
<template>
利用規約
第1項：アヒルであること
第2項：いつでもアヒルたること
</template>

ahiruだったらAhiru.vue, kaeruだったらKaeru.vue, hiyokoだったらHiyoko.vue
というふうに読み込めばいいよね

ひとまずAhiru.vueを読み込んでみよう

// TermsOfService.vue
<template>
  <Ahiru/>
</template>

<script>
import { defineComponent } from "vue";
import Ahiru from "./Ahiru.vue";
export default defineComponent({
  setup() {
    component: {
      Ahiru
    },
    const project = process.env.VUE_APP_PROJECT;
    return {
      project
    }
  }
})

利用規約
第1：アヒルであること
第2：いつでもアヒルたること

うんできた

ここで疑問

あとはprocess.env.VUE_APP_PROJECTの値によって読み込むコンポーネントを分けられたら完成だ・・・
importのところを変えればいいでしょ。これでどう？

// TermsOfService.vue
<template>
  <Ahiru/>
</template>

<script>
import { defineComponent } from "vue";
import Ahiru from `./${process.env.VUE_APP_PROJECT}.vue`;
export default defineComponent({
  setup() {
    components: {
      Ahiru
    }
  }
})

結果：エラー！！エラー！！

なんで・・・・？

検索

どうやって読み込むコンポーネントを分けるんだろう？

import 可変　vue

検索結果

・タブ機能の作り方
→ 今作ってないし・・・
・非同期コンポーネントの表示
→今使ってないし・・・

はまる

うーん、VueRouterを使ってhttp://〇〇/ahiru/terms_of_serviceだったらAhiru.vueを読み込むとか？
いや、URLについちゃうのは困る・・・

先輩に聞く

あぁそれならこんなふうにしてあげれば？
projectがahiruだったらAhiru.vue, projectがhiyokoだったらHiyoko.vue
というふうに読み込めるよ

<component v-bind:is="project"></component>

いきなり解決

できたー！

// TermsOfService.vue
<template>
  <component v-bind:is="project"></component>
</template>

<script>
import { defineComponent } from "vue";
import Ahiru from "./Ahiru.vue";
import Kaeru from "./Kaeru.vue";
import Hiyoko from "./Hiyoko.vue";
export default defineComponent({
  setup() {
    const project = process.env.VUE_APP_PROJECT;
    return {
      project
    }
  }
})

学習したこと

検索結果は背景を読もう

タブ機能や非同期コンポーネントといった言葉で反射的にバックするのではなく、確かに可変できてるよな
ここからエッセンスを掴めるかもな・・という発想

やっぱり人に聞くのが一番できるわかる

いきなり聞くとふーんとかしかならないので、とりあえず自分で悩んでから

補足

もっといいやり方あるよという方ぜひJoinして私に教えてください
その際には「小林のQiitaみた」と一言あると、いいことあります