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

@@ -0,0 +1,66 @@
+<template>
+  <v-toolbar dense flat>
+    <v-overflow-btn
+      :items="components"
+      item-text="name"
+      return-object
+      v-model="componentSelected"
+      label="Select Component"
+      hide-details
+      class="pa-0"
+      flat
+    ></v-overflow-btn>
+    <v-btn text @click="addComponent">
+      <v-icon small>icon-add</v-icon>
+    </v-btn>
+  </v-toolbar>
+</template>
+
+
+<script>
+export default {
+  props: {
+    id: {
+      type: Number
+    },
+    model: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      componentSelected: '',
+      components: []
+    }
+  },
+  async mounted() {
+    await this.getComponents()
+  },
+  methods: {
+    async getComponents() {
+      try {
+        const response = await this.$axios.get(`/components`)
+        this.components = response.data
+      } catch (error) {
+        console.log('TCL: getComponents -> error', error)
+      }
+    },
+    async addComponent() {
+      const data = {
+        model: this.model,
+        model_id: this.id,
+        component_id: this.componentSelected.id
+      }
+
+      try {
+        const response = await this.$axios.post('/components/attach', data)
+        const modelReturned = response.data;
+
+        this.componentSelected = null
+      } catch (error) {
+        console.log('TCL: addComponent -> error', error)
+      }
+    }
+  }
+}
+</script>