Initial Nuxt frontend import

- Complete GGZ Ecademy Nuxt.js user portal
- Learning products browser and management
- Member management interface
- User authentication and roles
- Multi-language support (NL/EN)
- Vuex store for state management
- Component-based architecture

components/Learning/FilterItemsResolver.vue

@@ -0,0 +1,73 @@
+<template>
+  <span>
+    <span v-if="hasFilterItems && !gratisMode">
+      <small
+        v-for="({ filter_item }, i) in filterItemResolved"
+        :key="`column-filter_item-${filter_item.id}`"
+      >
+        <v-icon
+          :color="filter_item.color"
+          class="mx-1"
+          size="10"
+          v-if="filter_item.color"
+          >mdi-circle</v-icon
+        >
+        <span v-if="filter_item.title">{{ filter_item.title }}</span>
+        <span v-if="filter_item.subtitle">{{ filter_item.subtitle }}</span>
+        {{ filterItemResolved.length - 1 === i ? '' : '-' }}
+      </small>
+    </span>
+
+    <span v-if="gratisMode && isGratis">
+      <v-icon class="mx-1" color="accent" x-small>mdi-star</v-icon>
+      <span class="accent--text">Gratis</span>
+    </span>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    filterTitle: {
+      type: String,
+      default: 'type',
+    },
+    filters: {
+      type: Array,
+      default: [],
+    },
+    gratisMode: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    filterItemResolved() {
+      // return this.$store.getters.filterItemsResolved(
+      //   this.filterTitle,
+      //   this.filters
+      // )
+
+      const filter = this.$store.getters.getFilterByTitle(this.filterTitle)
+      return this.filters.filter((f) => f.filter_item.filter_id === filter.id)
+    },
+    hasFilterItems() {
+      return this.filterItemResolved.length > 0
+    },
+    isGratis() {
+      return this.filterItemResolved.find(
+        (f) => f.filter_item.title === 'Gratis'
+      )
+    },
+  },
+}
+</script>
+
+<style scoped>
+small span {
+  font-size: 15.75px;
+}
+.mdi-star {
+  margin-right: 0 !important;
+}
+</style>