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/UI/GlobalSnackbar/GlobalSnackbar.vue

@@ -0,0 +1,60 @@
+<template>
+  <v-snackbar
+    v-model="display"
+    :timeout="3000"
+    :color="color"
+    :multi-line="hasErrors"
+    right
+    top
+  >
+    <v-icon class="mr-2">{{ icon }}</v-icon>
+    {{ content }}
+
+
+    <ul v-if="hasErrors">
+      <li v-for="(allErrors, field) in errors" :key="field">
+        {{ field }}
+        <ul>
+          <li v-for="(error, i) in allErrors" :key="i">
+            {{ error }}
+          </li>
+        </ul>
+      </li>
+    </ul>
+
+    <!-- <v-btn text @click="display = false">Close</v-btn> -->
+  </v-snackbar>
+</template>
+
+<script>
+// https://dev.to/stephannv/how-to-create-a-global-snackbar-using-nuxt-vuetify-and-vuex-1bda
+
+export default {
+  data() {
+    return {
+      display: false,
+      color: 'success',
+      content: '',
+      icon: '',
+      errors: {},
+    }
+  },
+  mounted() {
+    this.$store.subscribe((mutation, state) => {
+      if (mutation.type === 'snackbar/showMessage') {
+        this.content = state.snackbar.content
+        this.color = state.snackbar.color
+        this.icon = state.snackbar.icon
+        this.errors = state.snackbar.errors
+        this.display = true
+      }
+    })
+  },
+  computed: {
+    hasErrors() {
+      return Object.keys(this.errors).length > 0
+    },
+  },
+}
+
+</script>