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

pages/manager/builder.vue

@@ -0,0 +1,139 @@
+<template>
+  <v-container fluid>
+    <v-toolbar dense flat>
+      <v-overflow-btn
+        :items="components"
+        v-model="componentSelected"
+        item-text="name"
+        return-object
+        editable
+        label="Choose a component"
+        hide-details
+        class="pa-0"
+        overflow
+      ></v-overflow-btn>
+
+      <v-btn icon>
+        <v-icon @click="addComponent(componentSelected)" size="15">icon-add</v-icon>
+      </v-btn>
+    </v-toolbar>
+
+    <!-- Dynamic Component -->
+    <component :is="componentSelected.name" :data="componentSelected.data" />
+    <!-- End Dynamic Component -->
+
+    <!-- Components Sort -->
+    <v-card outlined tile v-if="tmpPage.length > 0">
+      <v-toolbar dark dense flat color="red">
+        <v-toolbar-title>Sort Components</v-toolbar-title>
+        <v-spacer></v-spacer>
+        <v-icon>mdi-sort</v-icon>
+      </v-toolbar>
+
+      <v-card-text class="my-0 py-0">
+        <v-list>
+          <draggable v-model="tmpPage">
+            <transition-group>
+              <v-list-item v-for="(component, index) in tmpPage" :key="component">
+                <v-list-item-action>
+                  <v-badge overlap>
+                    <template v-slot:badge>
+                      <span class="white--text">{{index+1}}</span>
+                    </template>
+                  </v-badge>
+                </v-list-item-action>
+
+                <v-list-item-content>
+                  <v-list-item-title v-text="`${component.name}`"></v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </transition-group>
+          </draggable>
+        </v-list>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-btn block color="red" depressed dark @click>Save</v-btn>
+      </v-card-actions>
+    </v-card>
+    <!-- end Components Sort -->
+  </v-container>
+</template>
+
+<script>
+/**
+ * Builder
+ *
+ * Load a list of custom components from dynamicComponents dir?
+ *
+ * Clicking on ADD, we put in the preview page that component
+ *
+ * clicking on that component, we can pass some data
+ *
+ *  https://www.storyblok.com/tp/vue-dynamic-component-from-json
+ *
+ *  https://baianat.github.io/vuse/example.html
+ *
+ * -------
+ * https://github.com/tommcclean/Vue-PageBuilder
+ * https://www.youtube.com/watch?v=Iwwv0A7ttpQ&feature=youtu.be
+ * -------
+ *
+ */
+
+import Draggable from 'vuedraggable'
+import Calendar from '@/components/DynamicComponents/Calendar'
+import Carousel from '@/components/DynamicComponents/Carousel'
+import Card from '@/components/DynamicComponents/Card'
+
+export default {
+  components: {
+    Calendar,
+    Card,
+    Carousel,
+    Draggable
+  },
+  layout: `${process.env.CUSTOMER}Admin`,
+  data: () => ({
+    tmpPage: [],
+    componentSelected: '',
+    components: [
+      {
+        name: 'Carousel',
+        data: {
+          items: [
+            {
+              src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg'
+            },
+            {
+              src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg'
+            },
+            {
+              src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
+            },
+            {
+              src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
+            }
+          ]
+        }
+      },
+
+      {
+        name: 'Card',
+        data: {
+          title: '3110 Card',
+          image: 'https://cdn.vuetifyjs.com/images/cards/cooking.png'
+        }
+      }
+    ],
+    carousel: {
+      name: 'Carousel'
+    }
+  }),
+  methods: {
+    addComponent(component) {
+      this.tmpPage.push(component)
+    }
+  }
+}
+</script>