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

@@ -0,0 +1,50 @@
+<template>
+  <div class="text-center">
+    <v-btn text x-small :disabled="isFirstPage" @click="changePage('previous')">
+      <v-icon x-small>icon-arrow-left</v-icon>
+    </v-btn>
+
+    <small class="mx-2">
+      {{ `${page} / ${totalPages}` }}
+    </small>
+
+    <v-btn text x-small :disabled="isLastPage" @click="changePage('next')">
+      <v-icon x-small>icon-arrow-right</v-icon>
+    </v-btn>
+
+    <!-- Debugging -->
+    <!-- <ul>
+      <li v-for="(column, i) in subset" :key="`column-dyn${i}`">
+        {{ column }}
+      </li>
+    </ul> -->
+  </div>
+</template>
+
+<script>
+// Inspiration: https://github.com/byteboomers/vue-lpage
+export default {
+  computed: {
+    page() {
+      return this.$store.state.columnBrowser.page
+    },
+    isFirstPage() {
+      return this.$store.getters['columnBrowser/isFirstPage']
+    },
+    isLastPage() {
+      return this.$store.getters['columnBrowser/isLastPage']
+    },
+    totalPages() {
+      return this.$store.getters['columnBrowser/totalPages']
+    },
+    subset() {
+      return this.$store.getters['columnBrowser/subset']
+    },
+  },
+  methods: {
+    changePage(direction) {
+      this.$store.dispatch('columnBrowser/changePage', direction)
+    },
+  },
+}
+</script>