Refactor from flavor mixin to ES6 module and plugin

client/config/prod-my-kv.env.js

@@ -4,8 +4,6 @@ module.exports = {
   * ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
   * around strings
   */
-  VUE_APP_LOGO: '"https://skillbox-my-kv-prod.s3-eu-west-1.amazonaws.com/mykv-logo.png"',
-  VUE_APP_ENABLE_PORTFOLIO: "true",
   VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
 
   /*

client/config/prod.env.js

@@ -13,8 +13,6 @@ const values = {
   * and JS needs quotes around strings
   * see https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code
   */
-  VUE_APP_LOGO: '"/static/logo.png"',
-  VUE_APP_ENABLE_PORTFOLIO: "true",
   VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
 
   /*

client/src/components/AssignmentWithSubmissions.vue

@@ -9,7 +9,7 @@
       <a
         class="button button--primary submissions-page__back"
         @click="$emit('back')"
-      >Aufgabe im {{ flavorTextModul }} anzeigen</a>
+      >Aufgabe im {{ $flavor.textModule }} anzeigen</a>
     </div>
 
     <div
@@ -64,13 +64,11 @@
 
 <script>
   import StudentSubmission from '@/components/StudentSubmission';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   import { meQuery } from '@/graphql/queries';
 
   export default {
     props: ['assignment'],
-    mixins: [appFlavorTermsMixin],
 
     components: {
       StudentSubmission

client/src/components/BackLink.vue

@@ -13,8 +13,6 @@
   import { ROOMS_PAGE } from '@/router/room.names';
   import { PROJECTS_PAGE } from '@/router/portfolio.names';
 
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
-
   const ChevronLeft = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronLeft');
 
   export default {
@@ -33,8 +31,6 @@
       },
     },
 
-    mixins: [appFlavorTermsMixin],
-
     components: {
       ChevronLeft,
     },
@@ -55,9 +51,9 @@
       fullTitle() {
         switch (this.type) {
           case 'topic':
-            return `${this.flavorTextThema}: ${this.title}`;
+            return `${this.$flavor.textTopic}: ${this.title}`;
           case 'module':
-            return `${this.flavorTextModul}: ${this.title}`;
+            return `${this.$flavor.textModule}: ${this.title}`;
           default:
             return this.title;
         }

client/src/components/ContentBlock.vue

@@ -81,7 +81,6 @@
   import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
 
   import me from '@/mixins/me';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   import { hidden } from '@/helpers/visibility';
   import { CONTENT_TYPE } from '@/consts/types';
@@ -115,7 +114,7 @@
       },
     },
 
-    mixins: [me, appFlavorTermsMixin],
+    mixins: [me],
 
     components: {
       PopoverLink,
@@ -139,7 +138,7 @@
           return '';
         }
 
-        return `${this.flavorTextInstrument} - ${instruments[contentType]}`;
+        return `${this.$flavor.textInstrument} - ${instruments[contentType]}`;
       },
       canEditContentBlock() {
         return this.contentBlock.mine && !this.contentBlock.indent;

client/src/components/book-navigation/ContentNavigation.vue

@@ -12,7 +12,7 @@
           class="content-navigation__link"
           @click.native="close"
         >
-          {{ flavorTextThemen }}
+          {{ $flavor.textTopics }}
         </router-link>
 
         <book-topic-navigation
@@ -27,7 +27,7 @@
           class="content-navigation__link"
           @click.native="close"
         >
-          {{ flavorTextInstrumente }}
+          {{ $flavor.textInstruments }}
         </router-link>
       </div>
 
@@ -99,7 +99,6 @@
 <script>
   import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
 
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
   import sidebarMixin from '@/mixins/sidebar';
   import meMixin from '@/mixins/me';
 
@@ -112,7 +111,7 @@
       }
     },
 
-    mixins: [sidebarMixin, meMixin, appFlavorTermsMixin],
+    mixins: [sidebarMixin, meMixin],
 
     components: {
       BookTopicNavigation,
@@ -121,7 +120,7 @@
 
     computed: {
       showPortfolio() {
-        return process.env.VUE_APP_ENABLE_PORTFOLIO;
+        return this.$flavor.showPortfolio;
       }
     },
 

client/src/components/content-blocks/InstrumentWidget.vue

@@ -9,17 +9,14 @@
       :to="{name: 'instrument', params: { slug: value.slug }}"
       class="instrument-widget__button button"
     >
-      {{ flavorTextInstrument }} anzeigen
+      {{ $flavor.textInstrument }} anzeigen
     </router-link>
   </div>
 </template>
 
 <script>
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
-
   export default {
     props: ['value'],
-    mixins: [appFlavorTermsMixin],
   };
 </script>
 

client/src/components/icons/Logo.vue

@@ -10,7 +10,7 @@
   export default {
     computed: {
       img() {
-        return process.env.VUE_APP_LOGO;
+        return this.$flavor.appLogo;
       }
     },
   };

client/src/components/instruments/InstrumentEntry.vue

@@ -15,7 +15,6 @@
 <script>
   import { INTERDISCIPLINARY, LANGUAGE_COMMUNICATION, SOCIETY } from '@/consts/instrument.consts';
   import instrumentType from '@/helpers/instrumentType';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   export default {
     props: {
@@ -26,8 +25,6 @@
       },
     },
 
-    mixins: [appFlavorTermsMixin],
-
     computed: {
       typeClass() {
         return {
@@ -37,8 +34,8 @@
         };
       },
       categoryName() {
-        if (process.env.VUE_APP_FLAVOR === 'my-kv') {
-          return this.flavorTextInstrumente;
+        if (this.$flavor.appFlavor === 'my-kv') {
+          return this.$flavor.textInstruments;
         } else {
           return instrumentType(this.instrument);
         }

client/src/components/modules/Module.vue

@@ -40,7 +40,7 @@
     </div>
 
     <h3 id="objectives">
-      <span v-show="flavorShowObjectivesTitle">Lernziele</span>
+      <span v-show="$flavor.showObjectivesTitle">Lernziele</span>
     </h3>
 
     <div class="module__objective-groups">
@@ -65,7 +65,6 @@
   import ObjectiveGroups from '@/components/objective-groups/ObjectiveGroups.vue';
   import Chapter from '@/components/Chapter.vue';
   import BookmarkActions from '@/components/notes/BookmarkActions';
-  import appFlavorFlagsMixin from '@/mixins/app-flavor-flags';
 
   export default {
 
@@ -75,7 +74,7 @@
         default: () => ({}),
       },
     },
-    mixins: [appFlavorFlagsMixin],
+
     components: {
       BookmarkActions,
       ObjectiveGroups,

client/src/components/modules/SnapshotCreated.vue

@@ -25,7 +25,7 @@
         <a
           class="button"
           @click="close"
-        >Zurück zum {{ flavorTextModul }}</a>
+        >Zurück zum {{ $flavor.textModule }}</a>
       </div>
     </template>
   </modal>
@@ -35,10 +35,8 @@
   import Modal from '@/components/Modal';
   import { SNAPSHOT_LIST } from '@/router/module.names';
   import dateformat from '@/helpers/date-format';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   export default {
-    mixins: [appFlavorTermsMixin],
     components: {
       Modal,
     },

client/src/components/modules/SnapshotHeader.vue

@@ -37,7 +37,7 @@
         <checkbox
           :checked="agreement"
           data-cy="apply-checkbox"
-          :label="`Ich will die Anpassungen aus diesem Snapshot in das ${flavorTextModul} kopieren.`"
+          :label="`Ich will die Anpassungen aus diesem Snapshot in das ${$flavor.textModule} kopieren.`"
           @input="agreement = $event"
         />
       </div>
@@ -68,7 +68,6 @@
   import Checkbox from '@/components/ui/Checkbox';
 
   import me from '@/mixins/me';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   import APPLY_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/applySnapshot.gql';
   import { MODULE_PAGE } from '@/router/module.names';
@@ -89,7 +88,7 @@
       },
     },
 
-    mixins: [me, appFlavorTermsMixin],
+    mixins: [me],
 
     components: {
       Checkbox,

client/src/components/profile/DeactivatePerson.vue

@@ -46,7 +46,7 @@
         <template v-else>
           Diese Person kann
         </template>
-        weiterhin {{ flavorTextModule }} und {{ flavorTextInstrumente }} lesen.
+        weiterhin {{ $flavor.textModules }} und {{ $flavor.textInstruments }} lesen.
       </li>
       <li class="deactivate-user__text deactivate-user__list-item">
         <template v-if="myself">
@@ -75,11 +75,8 @@
 
 <script>
   import Modal from '@/components/Modal';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   export default {
-    mixins: [appFlavorTermsMixin],
-
     components: {
       Modal
     },

client/src/components/toggle-menu/ToggleEditing.vue

@@ -2,7 +2,7 @@
   <toggle
     :checked="module.inEditMode"
     data-cy="toggle-editing"
-    :label="`${flavorTextModul} anpassen`"
+    :label="`${$flavor.textModule} anpassen`"
     @input="toggle"
   />
 </template>
@@ -13,8 +13,6 @@
   import { gql } from '@apollo/client/core';
   import { setModuleEditMode } from '@/graphql/cache-operations';
 
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
-
   const QUERY = gql`
           query ModuleEditModeQuery ($slug: String) {
               module(slug: $slug) {
@@ -25,8 +23,6 @@
           `;
 
   export default {
-    mixins: [appFlavorTermsMixin],
-
     components: {
       Toggle
     },

client/src/helpers/app-flavor.js

@@ -0,0 +1,45 @@
+const defaultFlavorValues = {
+  appFlavor: 'skillbox',
+  appLogo: '/static/logo.png',
+
+  // mySkillbox texts
+  textAppName: 'mySkillbox',
+  textTopic: 'Thema',
+  textTopics: 'Themen',
+  textModule: 'Modul',
+  textModules: 'Module',
+  textInstrument: 'Instrument',
+  textInstruments: 'Instrumente',
+
+  // mySkillbox flags
+  showFooter: true,
+  showObjectivesTitle: true,
+  showInstrumentFilterSidebar: true,
+  showPortfolio: true,
+};
+
+let flavorValues = Object.assign({}, defaultFlavorValues);
+
+if (process.env.VUE_APP_FLAVOR === 'my-kv') {
+  flavorValues = Object.assign({}, defaultFlavorValues, {
+    appFlavor: 'my-kv',
+    appLogo: 'https://skillbox-my-kv-prod.s3-eu-west-1.amazonaws.com/mykv-logo.png',
+
+    // myKV texts
+    textAppName: 'myKV',
+    textTopic: 'HKB',
+    textTopics: 'HKB',
+    textModule: 'Lernfeld',
+    textModules: 'Lernfelder',
+    textInstrument: 'Grundlagenwissen',
+    textInstruments: 'Grundlagenwissen',
+
+    // myKV flags
+    showFooter: false,
+    showObjectivesTitle: false,
+    showInstrumentFilterSidebar: false,
+    showPortfolio: true,
+  });
+}
+
+export default flavorValues;

client/src/layouts/DefaultLayout.vue

@@ -26,10 +26,8 @@
   import ProfileSidebar from '@/components/profile/ProfileSidebar';
   import DefaultFooter from '@/layouts/DefaultFooter';
   import NavigationSidebar from '@/components/book-navigation/NavigationSidebar';
-  import appFlavorFlagsMixin from '@/mixins/app-flavor-flags';
 
   export default {
-    mixins: [appFlavorFlagsMixin],
     components: {
       HeaderBar,
       ProfileSidebar,
@@ -57,7 +55,7 @@
         return classes;
       },
       enableFooter() {
-        return this.flavorShowFooter && (!this.$route.meta || !this.$route.meta.hideFooter);
+        return this.$flavor.showFooter && (!this.$route.meta || !this.$route.meta.hideFooter);
       }
     }
   };

client/src/layouts/PublicLayout.vue

@@ -11,18 +11,16 @@
     <router-view class="public__content layout__content" />
     <default-footer
       class="skillbox__footer public__footer footer"
-      v-if="flavorShowFooter"
+      v-if="$flavor.showFooter"
     />
   </div>
 </template>
 <script>
   import DefaultFooter from '@/layouts/DefaultFooter';
-  import appFlavorFlagsMixin from '@/mixins/app-flavor-flags';
 
   const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
 
   export default {
-    mixins: [appFlavorFlagsMixin],
     components: {
       Logo,
       DefaultFooter

client/src/layouts/SimpleLayout.vue

@@ -19,12 +19,10 @@
 
 <script>
   import SimpleFooter from '@/layouts/SimpleFooter';
-  import appFlavorFlagsMixin from '@/mixins/app-flavor-flags';
 
   const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
 
   export default {
-    mixins: [appFlavorFlagsMixin],
     components: {
       Cross,
       SimpleFooter
@@ -35,7 +33,7 @@
         if (this.$route.meta.hideFooter) {
           return false;
         }
-        return this.flavorShowFooter;
+        return this.$flavor.showFooter;
       }
     },
 

client/src/main.js

@@ -15,7 +15,8 @@ import VueRemoveEdges from '@/plugins/edges';
 import VueMatomo from 'vue-matomo';
 import VueToast from 'vue-toast-notification';
 import VueLogger from 'vuejs-logger';
-import {joiningClass, loginRequired, unauthorizedAccess} from "@/router/guards";
+import { joiningClass, loginRequired, unauthorizedAccess } from '@/router/guards';
+import flavorPlugin from '@/plugins/flavor';
 
 Vue.config.productionTip = false;
 const isProduction = process.env.NODE_ENV === 'production';
@@ -38,6 +39,8 @@ Vue.use(VueScrollTo, {
   offset: -50,
 });
 
+Vue.use(flavorPlugin);
+
 if (process.env.MATOMO_HOST) {
   Vue.use(VueMatomo, {
     host: process.env.MATOMO_HOST,

client/src/mixins/app-flavor-flags.js

@@ -1,24 +0,0 @@
-export default {
-  computed: {
-    flavorShowObjectivesTitle() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv': return false;
-      }
-      return true;
-    },
-    flavorShowFooter() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv':
-          return false;
-      }
-      return true;
-    },
-    flavorShowInstrumentFilterSidebar() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv':
-          return false;
-      }
-      return true;
-    }
-  }
-};

client/src/mixins/app-flavor-terms.js

@@ -1,52 +0,0 @@
-export default {
-  computed: {
-    flavorPageTitle() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv': return 'My KV';
-      }
-      return 'my Skillbox';
-    },
-    flavorTextModul() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv':
-          return 'Lernfeld';
-      }
-      return 'Modul';
-    },
-    flavorTextModule() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv':
-          return 'Lernfelder';
-      }
-      return 'Module';
-    },
-    flavorTextThema() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv':
-          return 'HKB';
-      }
-      return 'Thema';
-    },
-    flavorTextThemen() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv':
-          return 'HKB';
-      }
-      return 'Themen';
-    },
-    flavorTextInstrument() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv':
-          return 'Grundlagenwissen';
-      }
-      return 'Instrument';
-    },
-    flavorTextInstrumente() {
-      switch(process.env.VUE_APP_FLAVOR) {
-        case 'my-kv':
-          return 'Grundlagenwissen';
-      }
-      return 'Instrumente';
-    },
-  }
-};

client/src/pages/hello.vue

@@ -19,7 +19,7 @@
         </a>
       </div>
       <p class="about__text">
-        mySkillbox ist ein Angebot des hep Verlags in
+        {{ $flavor.textAppName }} ist ein Angebot des hep Verlags in
         Zusammenarbeit mit der Eidgenössischen Hochschule für Berufsbildung (EHB).
       </p>
     </div>
@@ -29,7 +29,7 @@
         class="login-actions__title"
         data-cy="hello-title"
       >
-        Wollen Sie {{ flavorPageTitle }} im Unterricht verwenden?
+        Wollen Sie {{ $flavor.textAppName }} im Unterricht verwenden?
       </h2>
       <a
         class="button button--primary button--big actions__submit"
@@ -71,13 +71,11 @@
 </template>
 
 <script>
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
   const HepLogoNoClaim = () => import(/* webpackChunkName: "icons" */'@/components/icons/HepLogoNoClaim');
   const EhbLogo = () => import(/* webpackChunkName: "icons" */'@/components/icons/EhbLogo');
   const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
 
   export default {
-    mixins: [appFlavorTermsMixin],
     components: {
       HepLogoNoClaim,
       EhbLogo,

client/src/pages/index.vue

@@ -14,7 +14,7 @@
       </li>
       <li>
         <router-link to="/module">
-          {{ flavorTextModul }}
+          {{ $flavor.textModule }}
         </router-link>
       </li>
       <li>
@@ -28,11 +28,8 @@
 
 <script>
   import ALL_MODULES from '@/graphql/gql/queries/allModules.gql';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   export default {
-    mixins: [appFlavorTermsMixin],
-
     data() {
       return {
         modules: []

client/src/pages/instrumentOverview.vue

@@ -2,10 +2,13 @@
   <div class="instrument-overview">
     <instrument-filter
       class="instrument-overview__filter"
-      v-if="flavorShowInstrumentFilterSidebar"
+      v-if="$flavor.showInstrumentFilterSidebar"
       @filter="updateFilter"
     />
-    <div class="instrument-overview__filter" v-else />
+    <div
+      class="instrument-overview__filter"
+      v-else
+    />
     <div class="instrument-overview__list">
       <router-link
         :to="{name: 'instrument', params: {slug: instrument.slug}}"
@@ -25,10 +28,8 @@
   import InstrumentEntry from '@/components/instruments/InstrumentEntry';
   import INSTRUMENTS_QUERY from '@/graphql/gql/queries/instrumentsQuery.gql';
   import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
-  import appFlavorFlagsMixin from '@/mixins/app-flavor-flags';
 
   export default {
-    mixins: [appFlavorFlagsMixin],
     components: {
       InstrumentFilter,
       InstrumentEntry,

client/src/pages/license-activation.vue

@@ -72,12 +72,11 @@
 
   import me from '@/mixins/me';
   import logout from '@/mixins/logout';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   const ValidatedInput = () => import('@/components/validation/ValidatedInput');
 
   export default {
-    mixins: [me, logout, appFlavorTermsMixin],
+    mixins: [me, logout],
     components: {
       LoadingButton,
       ValidationObserver,

client/src/pages/module/moduleSettings.vue

@@ -8,7 +8,7 @@
         Lösungen
       </h2>
       <p class="module-settings__paragraph">
-        Wollen Sie die Lösungen in diesem {{ flavorTextModul }} für die Lernenden der ausgewählten Klasse anzeigen?
+        Wollen Sie die Lösungen in diesem {{ $flavor.textModule }} für die Lernenden der ausgewählten Klasse anzeigen?
       </p>
       <toggle-solutions-for-module />
     </section>
@@ -36,11 +36,8 @@
 
 <script>
   import ToggleSolutionsForModule from '@/components/toggle-menu/ToggleSolutionsForModule';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   export default {
-    mixins: [appFlavorTermsMixin],
-
     components: {
       ToggleSolutionsForModule,
     }

client/src/pages/onboarding/start.vue

@@ -12,13 +12,9 @@
 </template>
 
 <script>
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
-
   const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
 
   export default {
-
-    mixins: [appFlavorTermsMixin],
     components: {
       Logo
     },

client/src/pages/onboarding/step1.vue

@@ -7,16 +7,16 @@
       Ihr Lernbereich
     </h1>
     <h2 class="onboarding__heading">
-      {{ flavorTextThemen }}
+      {{ $flavor.textTopics }}
     </h2>
     <p class="onboarding__paragraph">
-      In den «{{ flavorTextThemen }}» finden Sie aktuelle {{ flavorTextModule }} mit Aufträgen und Situationen.
+      In den «{{ $flavor.textTopics }}» finden Sie aktuelle {{ $flavor.textModules }} mit Aufträgen und Situationen.
     </p>
     <h2 class="onboarding__heading">
-      {{ flavorTextInstrumente }}
+      {{ $flavor.textInstruments }}
     </h2>
     <p class="onboarding__paragraph">
-      Die «{{ flavorTextInstrumente }}» helfen Ihnen dabei, Aufträge und Situationen zu bearbeiten. Zudem erweitern Sie so Ihre Kompetenzen.
+      Die «{{ $flavor.textInstruments }}» helfen Ihnen dabei, Aufträge und Situationen zu bearbeiten. Zudem erweitern Sie so Ihre Kompetenzen.
     </p>
     <h2 class="onboarding__heading">
       News

client/src/pages/snapshot/snapshots.vue

@@ -2,7 +2,7 @@
   <div class="snapshots">
     <h1>Snapshots</h1>
     <p class="snapshots__details">
-      {{ flavorTextThema }}: {{ module.topic.title }} - {{ module.metaTitle }}: {{ module.title }}
+      {{ $flavor.textTopic }}: {{ module.topic.title }} - {{ module.metaTitle }}: {{ module.title }}
     </p>
     <snapshot-team-menu
       :selected="selectedLink"
@@ -26,12 +26,10 @@
   import SnapshotListItem from '@/components/modules/SnapshotListItem';
   import MODULE_SNAPSHOTS_QUERY from '@/graphql/gql/queries/moduleSnapshots.gql';
   import SnapshotTeamMenu from '@/components/modules/SnapshotTeamMenu';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
 
   const defaultModule = {topic: {}, snapshots: []};
 
   export default {
-    mixins: [appFlavorTermsMixin],
     components: {
       SnapshotTeamMenu,
       SnapshotListItem,

client/src/pages/start.vue

@@ -9,14 +9,14 @@
           class="start-page__heading"
           data-cy="start-page-heading"
         >
-          Letzte {{ flavorTextModule }}
+          Letzte {{ $flavor.textModules }}
         </h2>
         <h3
           class="start-page__no-modules"
           data-cy="no-modules-yet"
           v-if="!me.recentModules.length"
         >
-          Sie haben sich noch kein {{ flavorTextModul }} angeschaut. Legen Sie jetzt los!
+          Sie haben sich noch kein {{ $flavor.textModule }} angeschaut. Legen Sie jetzt los!
         </h3>
         <div class="start-page__modules-list">
           <module-teaser
@@ -34,7 +34,7 @@
           tag="div"
           class="button"
         >
-          Alle {{ flavorTextModule }} anzeigen
+          Alle {{ $flavor.textModules }} anzeigen
         </router-link>
       </div>
       <div
@@ -85,11 +85,9 @@
   import meQuery from '@/mixins/me';
   import news from '@/mixins/news';
 
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
-
   export default {
 
-    mixins: [meQuery, news, appFlavorTermsMixin],
+    mixins: [meQuery, news],
 
     components: {
       NewsTeaser,
@@ -105,7 +103,7 @@
       },
       moduleText() {
         if (this.me.lastModule && this.me.lastModule.slug) {
-          return `Aktuelles ${this.flavorTextModul} anzeigen`;
+          return `Aktuelles ${this.$flavor.textModule} anzeigen`;
         }
         return 'Alle Inhalte anzeigen';
       },

client/src/pages/topic-page.vue

@@ -30,7 +30,7 @@
           v-if="me.isTeacher && topic.instructions"
         >
           <bulb-icon class="topic__instruction-icon topic__link-icon" />
-          <span class="topic__link-description">Anweisungen zum {{ flavorTextThema }} anzeigen</span>
+          <span class="topic__link-description">Anweisungen zum {{ $flavor.textTopic }} anzeigen</span>
         </a>
       </div>
       <div class="topic__modules">
@@ -48,7 +48,6 @@
   import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
   import TOPIC_QUERY from '@/graphql/gql/queries/topicQuery.gql';
   import me from '@/mixins/me';
-  import appFlavorTermsMixin from '@/mixins/app-flavor-terms';
   import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
 
   import UPDATE_LAST_TOPIC_MUTATION from '@/graphql/gql/mutations/updateLastTopic.gql';
@@ -59,7 +58,7 @@
 
   export default {
 
-    mixins: [me, appFlavorTermsMixin],
+    mixins: [me],
     components: {
       BookTopicNavigation,
       ModuleTeaser,

client/src/plugins/flavor.js

@@ -0,0 +1,7 @@
+import flavorValues from '@/helpers/app-flavor';
+
+export default {
+  install: (Vue) => {
+    Vue.prototype.$flavor = Object.assign({}, flavorValues);
+  }
+};

client/src/router/portfolio.routes.js

@@ -1,4 +1,6 @@
 import { NEW_PROJECT_PAGE, PROJECTS_PAGE } from '@/router/portfolio.names';
+import flavorValues from '@/helpers/app-flavor';
+
 const portfolio = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/portfolio');
 const project = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/project');
 const newProject = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/newProject');
@@ -11,6 +13,6 @@ const portfolioRoutes = [
   {path: '/edit-project/:slug', name: 'edit-project', component: editProject, props: true},
 ];
 
-const routes = process.env.VUE_APP_ENABLE_PORTFOLIO ? portfolioRoutes : [];
+const routes = flavorValues.showPortfolio ? portfolioRoutes : [];
 
 export default routes;