spaceless

components/Authors.vue

@@ -8,10 +8,12 @@
             <a v-if="author.mail" :href="'mailto:' + author.mail" target="_blank" rel="noopener"><Icon v="envelope"/></a>)
             –
             <template v-for="(link, area, index) in author.areas">
-                <nuxt-link v-if="link && link.indexOf('/') === 0" :to="link">{{ area }}</nuxt-link>
+                <Spaceless>
-                <a v-else-if="link" :href="link" target="_blank" rel="noopener">{{ area }}</a>
+                    <nuxt-link v-if="link && link.indexOf('/') === 0" :to="link">{{ area }}</nuxt-link>
-                <span v-else>{{ area }}</span>
+                    <a v-else-if="link" :href="link" target="_blank" rel="noopener">{{ area }}</a>
-                <span v-if="index < Object.keys(author.areas).length - 1">, </span>
+                    <span v-else>{{ area }}</span>
+                    <span v-if="index < Object.keys(author.areas).length - 1">, </span>
+                </Spaceless>
             </template>
         </li>
     </ul>

components/Spaceless.vue

@@ -0,0 +1,23 @@
+<template>
+    <span><slot></slot></span>
+</template>
+
+<script>
+    export default {
+        mounted() {
+            this.removeWhitespaces(this.$el);
+        },
+        methods: {
+            removeWhitespaces(parent) {
+                for (let child of parent.childNodes) {
+                    if (child.nodeName === '#text' && child.textContent.trim() === '') {
+                        parent.removeChild(child);
+                    }
+                    for (let grandchild of child.childNodes) {
+                        this.removeWhitespaces(grandchild);
+                    }
+                }
+            }
+        },
+    }
+</script>