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/SynonymsSelector.vue

@@ -0,0 +1,65 @@
+<template>
+  <v-select
+    v-model="synonymsSelected"
+    :items="allSynonyms"
+    attach
+    chips
+    multiple
+    item-text="title"
+    item-value="id"
+    :outlined="editMode"
+    :solo="!editMode"
+    :disabled="!editMode"
+    :flat="!editMode"
+    append-icon="icon-dropdown"
+  >
+    <template v-slot:selection="{ attrs, item, select, selected }">
+      <v-chip
+        v-bind="attrs"
+        :input-value="selected"
+        color="secondary"
+        @click="select"
+      >
+        <!-- close -->
+        <!-- @click:close="remove(item)" -->
+        <v-icon class="mx-2"> mdi-tag</v-icon>
+
+        <strong>{{ item.title }}</strong
+        >&nbsp;
+      </v-chip>
+    </template>
+  </v-select>
+</template>
+
+<script>
+export default {
+  props: {
+    editMode: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    synonymsSelected: {
+      get() {
+        return this.$store.state.learning.synonymsSelected
+      },
+      set(value) {
+        this.$store.commit('learning/SELECT_SYNONYM', value)
+      },
+    },
+
+    allSynonyms() {
+      return this.$store.getters.synonyms
+    },
+  },
+
+  // methods: {
+  //   remove(synonym) {
+  //     if (!synonym || !synonym.id) return
+  //     this.$store.dispatch('learning/removeSynonym', synonym.id)
+  //   },
+  // },
+}
+</script>