diff --git a/resources/js/app/app.js b/resources/js/app/app.js
index 746b02120..861d9dd72 100644
--- a/resources/js/app/app.js
+++ b/resources/js/app/app.js
@@ -43,7 +43,7 @@ const _vueInstance = new Vue({
         TagPicker: () => import(/* webpackChunkName: "tag-picker" */'app/components/tag-picker/tag-picker'),
         TagForm: () => import(/* webpackChunkName: "tag-form" */'app/components/tag-form/tag-form'),
         FolderPicker: () => import(/* webpackChunkName: "folder-picker" */'app/components/folder-picker/folder-picker'),
-        Dashboard: () => import(/* webpackChunkName: "modules-index" */'app/pages/dashboard/index'),
+        DashboardSearch: () => import(/* webpackChunkName: "dashboard-search" */'app/components/dashboard-search'),
         DateRange: () => import(/* webpackChunkName: "date-range" */'app/components/date-range/date-range'),
         DateRangesView: () => import(/* webpackChunkName: "date-ranges-view" */'app/components/date-ranges-view/date-ranges-view'),
         DateRangesList: () => import(/* webpackChunkName: "date-ranges-list" */'app/components/date-ranges-list/date-ranges-list'),
diff --git a/resources/js/app/components/ajax-login/ajax-login.js b/resources/js/app/components/ajax-login/ajax-login.js
deleted file mode 100644
index fb2b06bdc..000000000
--- a/resources/js/app/components/ajax-login/ajax-login.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import Vue from 'vue';
-
-export const AjaxLogin = Vue.extend({
-
-    template: `
-        <div class="ajax-login-modal" role="dialog">
-            <transition name="fade">
-                <div class="backdrop" @click="hide()" v-if="isOpen"></div>
-            </transition>
-            <transition name="slide">
-                <div class="ajax-login">
-                    <header>
-                        <span class="title" v-if="headerText"><: headerText :></span>
-                        <i class="icon-cancel-1 has-text-size-larger" @click="close()"></i>
-                    </header>
-                    <div class="content">
-                        <div class="message" v-if="message">
-                            <: message :>
-                        </div>
-                        <iframe title="Login form" :src="url" ref="iframe"></iframe>
-                    </div>
-                </div>
-            </transition>
-        </div>
-    `,
-    name: 'AjaxLogin',
-
-    props: {
-        headerText: {
-            type: String,
-            default: null,
-        },
-        message: {
-            type: String,
-            default: null,
-        },
-    },
-
-    data() {
-        return {
-            isOpen: false,
-            url: `${BEDITA.base}/login`,
-        };
-    },
-
-    mounted() {
-        window.addEventListener('message', this.checkLogin);
-        this.isOpen = true;
-    },
-
-    methods: {
-        checkLogin(message) {
-            if (message.data !== 'login') {
-                return;
-            }
-
-            this.$emit('login');
-            this.close();
-        },
-
-        close() {
-            this.isOpen = false;
-            window.removeEventListener('message', this.checkLogin);
-
-            if (this.$el.parentNode) {
-                this.$el.parentNode.removeChild(this.$el);
-            }
-
-            this.$destroy();
-        }
-    },
-});
diff --git a/resources/js/app/components/ajax-login/ajax-login.vue b/resources/js/app/components/ajax-login/ajax-login.vue
new file mode 100644
index 000000000..cb60dd554
--- /dev/null
+++ b/resources/js/app/components/ajax-login/ajax-login.vue
@@ -0,0 +1,93 @@
+<template>
+    <dialog class="ajax-login-modal">
+        <transition name="fade">
+            <div
+                class="backdrop"
+                @click="hide()"
+                v-if="isOpen"
+            />
+        </transition>
+        <transition name="slide">
+            <div class="ajax-login">
+                <header>
+                    <span
+                        class="title"
+                        v-if="headerText"
+                    >
+                        {{ headerText }}
+                    </span>
+                    <i
+                        class="icon-cancel-1 has-text-size-larger"
+                        @click="close()"
+                    />
+                </header>
+                <div class="content">
+                    <div
+                        class="message"
+                        v-if="message"
+                    >
+                        {{ message }}
+                    </div>
+                    <iframe
+                        title="Login form"
+                        :src="url"
+                        ref="iframe"
+                    />
+                </div>
+            </div>
+        </transition>
+    </dialog>
+</template>
+<script>
+import Vue from 'vue';
+
+export const AjaxLogin = Vue.extend({
+    name: 'AjaxLogin',
+
+    props: {
+        headerText: {
+            type: String,
+            default: null,
+        },
+        message: {
+            type: String,
+            default: null,
+        },
+    },
+
+    data() {
+        return {
+            isOpen: false,
+            url: `${BEDITA.base}/login`,
+        };
+    },
+
+    mounted() {
+        window.addEventListener('message', this.checkLogin);
+        this.isOpen = true;
+    },
+
+    methods: {
+        checkLogin(message) {
+            if (message.data !== 'login') {
+                return;
+            }
+
+            this.$emit('login');
+            this.close();
+        },
+
+        close() {
+            this.isOpen = false;
+            window.removeEventListener('message', this.checkLogin);
+
+            if (this.$el.parentNode) {
+                this.$el.parentNode.removeChild(this.$el);
+            }
+
+            this.$destroy();
+        }
+    },
+});
+export default AjaxLogin;
+</script>
diff --git a/resources/js/app/components/autosize-textarea.js b/resources/js/app/components/autosize-textarea.vue
similarity index 57%
rename from resources/js/app/components/autosize-textarea.js
rename to resources/js/app/components/autosize-textarea.vue
index 4cc8bda6d..d9bf1e121 100644
--- a/resources/js/app/components/autosize-textarea.js
+++ b/resources/js/app/components/autosize-textarea.vue
@@ -1,14 +1,35 @@
+<template>
+    <textarea
+        :value="text"
+        @input="handleChange"
+    />
+</template>
+<script>
 import autosize from 'autosize';
 
 export default {
-    props: ['value', 'reset-value'],
-
-    template: '<textarea @input="handleChange" :value="text"></textarea>',
+    name: 'AutosizeTextarea',
+    props: {
+        value: {
+            type: String,
+            default: '',
+        },
+        resetValue: {
+            type: String,
+            default: '',
+        },
+    },
 
     data() {
         return {
-            text: '',
-            originalValue: '',
+            text: {
+                type: String,
+                default: '',
+            },
+            originalValue: {
+                type: String,
+                default: '',
+            },
         };
     },
 
@@ -22,7 +43,7 @@ export default {
 
         value() {
             this.originalValue = this.value;
-        }
+        },
     },
 
     mounted() {
@@ -37,15 +58,10 @@ export default {
     },
 
     methods: {
-        /**
-         *
-         * @emits Event#input textarea value
-         *
-         * @param {Event} event event object
-         */
         handleChange(event) {
             this.text = event.target.value;
             this.$emit('input', this.text);
         }
     }
 };
+</script>
diff --git a/resources/js/app/components/category-picker/category-picker.js b/resources/js/app/components/category-picker/category-picker.js
deleted file mode 100644
index c8c292e48..000000000
--- a/resources/js/app/components/category-picker/category-picker.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Treeselect } from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-
-export default {
-    components: {
-        Treeselect,
-    },
-
-    template: `
-        <div class="category-picker">
-            <label v-if="label" :for="id"><: label :></label>
-            <Treeselect
-                placeholder
-                :form="form"
-                :options="categoriesOptions"
-                :disabled="disabled"
-                :disable-branch-nodes="true"
-                :multiple="true"
-                v-model="selectedIds"
-                @input="onChange"
-            />
-            <input type="hidden" :form="form" :id="id" name="categories" :value="selectedIds" />
-        </div>
-    `,
-
-    props: {
-        id: String,
-        categories: Array,
-        disabled: Boolean,
-        label: String,
-        form: String,
-        initialCategories: Array,
-    },
-
-    data() {
-        return {
-            categoriesOptions: [],
-            selectedIds: null,
-        };
-    },
-
-    mounted() {
-        this.categoriesOptions = this.categories?.map((category) => ({ id: category.id, label: category.label }));
-        this.selectedIds = this.initialCategories?.map(selected => this.categories.find(cat => cat.name == selected.name)?.id);
-    },
-
-    methods: {
-        /**
-         * Emits currently selected categories on selection change.
-         */
-        onChange() {
-            const selectedCategories = this.categories.filter((cat) => this.selectedIds.includes(cat.id));
-            this.$emit('change', selectedCategories);
-        }
-    },
-}
diff --git a/resources/js/app/components/category-picker/category-picker.vue b/resources/js/app/components/category-picker/category-picker.vue
new file mode 100644
index 000000000..2e985d066
--- /dev/null
+++ b/resources/js/app/components/category-picker/category-picker.vue
@@ -0,0 +1,80 @@
+<template>
+    <div class="category-picker">
+        <label
+            :for="id"
+            v-if="label"
+        >
+            {{ label }}
+        </label>
+        <Treeselect
+            placeholder
+            :form="form"
+            :options="categoriesOptions"
+            :disabled="disabled"
+            :disable-branch-nodes="true"
+            :multiple="true"
+            v-model="selectedIds"
+            @input="onChange"
+        />
+        <input
+            :id="id"
+            type="hidden"
+            :form="form"
+            name="categories"
+            :value="selectedIds"
+        >
+    </div>
+</template>
+<script>
+import { Treeselect } from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+
+export default {
+    components: {
+        Treeselect,
+    },
+
+    props: {
+        id: {
+            type: String,
+            default: null,
+        },
+        categories: {
+            type: Array,
+            default: () => [],
+        },
+        disabled: Boolean,
+        label: {
+            type: String,
+            default: null,
+        },
+        form: {
+            type: String,
+            default: null,
+        },
+        initialCategories: {
+            type: Array,
+            default: () => [],
+        },
+    },
+
+    data() {
+        return {
+            categoriesOptions: [],
+            selectedIds: null,
+        };
+    },
+
+    mounted() {
+        this.categoriesOptions = this.categories?.map((category) => ({ id: category.id, label: category.label }));
+        this.selectedIds = this.initialCategories?.map(selected => this.categories.find(cat => cat.name == selected.name)?.id);
+    },
+
+    methods: {
+        onChange() {
+            const selectedCategories = this.categories.filter((cat) => this.selectedIds.includes(cat.id));
+            this.$emit('change', selectedCategories);
+        }
+    },
+}
+</script>
diff --git a/resources/js/app/pages/dashboard/index.js b/resources/js/app/components/dashboard-search.vue
similarity index 53%
rename from resources/js/app/pages/dashboard/index.js
rename to resources/js/app/components/dashboard-search.vue
index ba69b90e6..6010e43d1 100644
--- a/resources/js/app/pages/dashboard/index.js
+++ b/resources/js/app/components/dashboard-search.vue
@@ -1,9 +1,31 @@
-export default {
-    name: 'DashboardIndex',
+<template>
+    <section class="dashboard-section">
+        <header>
+            <h2>{{ msgSearch }}</h2>
+        </header>
 
-    components: {
-        RecentActivity:() => import(/* webpackChunkName: "recent-activity" */'app/components/recent-activity/recent-activity'),
-    },
+        <div role="search">
+            <div role="textsearch">
+                <input type="text" v-model="searchString" v-on:keydown.stop="captureKeys">
+                <button ref="searchSubmit" :disabled="!searchString || searchString.length < 3" v-on:click="searchObjects">
+                    <app-icon icon="carbon:search"></app-icon>
+                    {{ msgSearch }}
+                </button>
+            </div>
+            <div role="idsearch">
+                <input type="text" :placeholder="msgIdOrUname" v-model="searchId">
+                <button @click.prevent="goToID()" :disabled="!searchId">
+                    {{ msgId }}
+                </button>
+            </div>
+        </div>
+    </section>
+</template>
+<script>
+import { t } from 'ttag';
+
+export default {
+    name: 'DashboardSearch',
 
     props: {
         q: {
@@ -14,6 +36,9 @@ export default {
 
     data() {
         return {
+            msgId: t`Go to ID`,
+            msgIdOrUname: t`ID or uname`,
+            msgSearch: t`Search`,
             searchId: '',
             searchString: '',
         };
@@ -53,3 +78,4 @@ export default {
         },
     }
 }
+</script>
diff --git a/resources/js/app/components/date-input.js b/resources/js/app/components/date-input.vue
similarity index 97%
rename from resources/js/app/components/date-input.js
rename to resources/js/app/components/date-input.vue
index 32280b05e..2fc3731b3 100644
--- a/resources/js/app/components/date-input.js
+++ b/resources/js/app/components/date-input.vue
@@ -1,3 +1,9 @@
+<template>
+    <div>
+        <slot />
+    </div>
+</template>
+<script>
 import 'flatpickr/dist/flatpickr.min.css';
 import 'flatpickr/dist/themes/dark.css';
 import flatpickr from 'flatpickr';
@@ -29,14 +35,11 @@ const FLATPICKR_OPTIONS = {
 // get loaded locale
 const LOCALE = BEDITA.locale.slice(0, 2);
 export default {
-    template: /* template */`
-    <div>
-        <slot></slot>
-    </div>
-    `,
+    name: 'DateInput',
     props: {
         el: {
             type: HTMLInputElement,
+            default: null,
         },
         attrs: {
             type: Object,
@@ -129,3 +132,4 @@ export default {
         },
     },
 };
+</script>
diff --git a/resources/js/app/components/email-input.js b/resources/js/app/components/email-input.vue
similarity index 79%
rename from resources/js/app/components/email-input.js
rename to resources/js/app/components/email-input.vue
index b71e391f3..2760adb36 100644
--- a/resources/js/app/components/email-input.js
+++ b/resources/js/app/components/email-input.vue
@@ -1,17 +1,23 @@
+<template>
+    <div>
+        <slot />
+    </div>
+</template>
+<script>
 import { t } from 'ttag';
 
 export default {
-    template: /* template */`
-    <div>
-        <slot></slot>
-    </div>
-    `,
+    name: 'EmailInput',
 
     props: {
         el: {
             type: HTMLInputElement,
+            default: null,
+        },
+        isValid: {
+            type: Boolean,
+            default: false,
         },
-        isValid: false
     },
 
     async mounted() {
@@ -34,3 +40,4 @@ export default {
         this.el.parentElement.appendChild(span);
     },
 };
+</script>
diff --git a/resources/js/app/components/filter-box.vue b/resources/js/app/components/filter-box.vue
index d612acb3e..d6f59880a 100644
--- a/resources/js/app/components/filter-box.vue
+++ b/resources/js/app/components/filter-box.vue
@@ -176,10 +176,10 @@ export default {
 
         initFolder() {
             if (!this.initFilter?.filter) {
-                return '';
+                return null;
             }
 
-            return this.initFilter?.filter[this.positionFilterName] || '';
+            return this.initFilter?.filter[this.positionFilterName] || null;
         },
 
         /**
diff --git a/resources/js/app/components/folder-picker/folder-picker.js b/resources/js/app/components/folder-picker/folder-picker.vue
similarity index 76%
rename from resources/js/app/components/folder-picker/folder-picker.js
rename to resources/js/app/components/folder-picker/folder-picker.vue
index a2ecb7b83..043e30b7c 100644
--- a/resources/js/app/components/folder-picker/folder-picker.js
+++ b/resources/js/app/components/folder-picker/folder-picker.vue
@@ -1,3 +1,27 @@
+<template>
+    <div class="folder-picker">
+        <label v-if="label">{{ label }}</label>
+        <Treeselect
+            placeholder=""
+            loading-text=""
+            :default-options="initialOptions"
+            :disabled="disabled"
+            :options="options"
+            :load-options="loadOptions"
+            :auto-load-root-options="false"
+            value-format="object"
+            v-model="selectedFolder"
+            @input="onChange"
+        />
+        <input
+            type="hidden"
+            :form="form"
+            name="folderSelected"
+            :value="selectedFolder?.id"
+        >
+    </div>
+</template>
+<script>
 import { Treeselect, LOAD_ROOT_OPTIONS, LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect';
 import '@riophae/vue-treeselect/dist/vue-treeselect.css';
 import { t } from 'ttag';
@@ -11,48 +35,31 @@ const API_OPTIONS = {
 };
 const PAGE_SIZE = 100;
 
-/**
- * Folder picker component.
- * Displays a tree-view folders list and allows to pick one.
- *
- * @prop {Boolean} disabled Enable/disable the select
- * @prop {String} initialFolder Id of the folder to pre-select
- * @prop {String} label Label to show before the select
- */
 export default {
+    name: 'FolderPicker',
     components: {
         Treeselect,
     },
 
-    template: `<div class="folder-picker">
-        <label v-if="label"><: label :></label>
-        <Treeselect
-            placeholder=""
-            loading-text=""
-            v-model="selectedFolder"
-            :default-options="initialOptions"
-            :disabled="disabled"
-            :options="options"
-            :load-options="loadOptions"
-            :auto-load-root-options="false"
-            value-format="object"
-            @input="onChange"
-        />
-        <input type="hidden" :form="form" name="folderSelected" :value="selectedFolder?.id" />
-    </div>`,
-
     props: {
-        disabled: Boolean,
-        initialFolder: String,
-        label: String,
-        form: String,
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        initialFolder: {
+            type: Number,
+            default: null,
+        },
+        label: {
+            type: String,
+            default: null,
+        },
+        form: {
+            type: String,
+            default: null,
+        },
     },
 
-    /**
-     * @property {Array} initialOptions Initial options used to pre-select the initial folder
-     * @property {Array} options The list of folder to show in the select
-     * @property {Object} options Currently selected folder (an object in the format {id: ..., label: ...})
-     */
     data() {
         return {
             initialOptions: null,
@@ -102,3 +109,4 @@ export default {
         }
     },
 }
+</script>
diff --git a/resources/js/app/components/json-editor-input.js b/resources/js/app/components/json-editor-input.vue
similarity index 94%
rename from resources/js/app/components/json-editor-input.js
rename to resources/js/app/components/json-editor-input.vue
index 1b78f0dd8..1dc04f5a5 100644
--- a/resources/js/app/components/json-editor-input.js
+++ b/resources/js/app/components/json-editor-input.vue
@@ -1,3 +1,9 @@
+<template>
+    <div>
+        <slot />
+    </div>
+</template>
+<script>
 import { JSONEditor } from 'vanilla-jsoneditor';
 
 const options = {
@@ -8,15 +14,11 @@ const options = {
 };
 
 export default {
-    template: `
-    <div>
-        <slot></slot>
-    </div>
-    `,
-
+    name: 'JsonEditorInput',
     props: {
         el: {
             type: HTMLTextAreaElement,
+            default: null,
         },
     },
 
@@ -65,3 +67,4 @@ export default {
         }
     },
 };
+</script>
diff --git a/resources/js/app/components/login-password/login-password.js b/resources/js/app/components/login-password/login-password.vue
similarity index 58%
rename from resources/js/app/components/login-password/login-password.js
rename to resources/js/app/components/login-password/login-password.vue
index a88947f06..a084371cc 100644
--- a/resources/js/app/components/login-password/login-password.js
+++ b/resources/js/app/components/login-password/login-password.vue
@@ -1,37 +1,51 @@
-import { t } from 'ttag';
-
-export default {
-    template: `
+<template>
     <div class="input password required">
-        <label for="password">${t`Password`}</label>
+        <label for="password">{{ msgPassword }}</label>
         <div class="is-flex">
             <div class="is-expanded">
                 <input
+                    id="password"
                     style="border-top-right-radius: 0; border-bottom-right-radius: 0;"
                     :type="type"
-                    id="password"
                     name="password"
                     required="required"
                     autocomplete="current-password"
                     aria-required="true"
                     v-model="password"
-                    @keydown="onKeydown($event)" />
+                    @keydown="onKeydown($event)"
+                >
             </div>
             <div>
-                <button @click.prevent.stop="toggleShow" class="button button-primary" style="min-width: 32px; border-top-left-radius: 0; border-bottom-left-radius: 0;" :disabled="!this.password || this.password.length == 0">
-                    <app-icon icon="carbon:view-filled" v-if="show"></app-icon>
-                    <app-icon icon="carbon:view-off-filled" v-if="!show"></app-icon>
+                <button
+                    style="min-width: 32px; border-top-left-radius: 0; border-bottom-left-radius: 0;"
+                    :disabled="!this.password || this.password.length == 0"
+                    class="button button-primary"
+                    @click.prevent.stop="toggleShow"
+                >
+                    <app-icon
+                        icon="carbon:view-filled"
+                        v-if="show"
+                    />
+                    <app-icon
+                        icon="carbon:view-off-filled"
+                        v-if="!show"
+                    />
                 </button>
             </div>
         </div>
     </div>
-    `,
+</template>
+<script>
+import { t } from 'ttag';
 
+export default {
+    name: 'LoginPassword',
     data() {
         return {
             show: false,
             password: null,
             type: 'password',
+            msgPassword: t`Password`,
         };
     },
 
@@ -49,3 +63,4 @@ export default {
         },
     }
 };
+</script>
diff --git a/resources/js/app/components/map-view.js b/resources/js/app/components/map-view.vue
similarity index 88%
rename from resources/js/app/components/map-view.js
rename to resources/js/app/components/map-view.vue
index e59723864..036505851 100644
--- a/resources/js/app/components/map-view.js
+++ b/resources/js/app/components/map-view.vue
@@ -1,24 +1,13 @@
-/**
- * Templates that uses this component (directly or indirectly):
- *  ...
- *
- * <map-view> component used for ModulesPage -> View
- *
- * Handle maps
- *
- * @prop {String} lat
- * @prop {String} lng
- * @prop {String} popupHtml
- * @prop {String} mapToken (mapBox accessToken)
- */
-
+<template>
+    <div class="map-container" />
+</template>
+<script>
 import mapbox from 'mapbox-gl';
 import Compare from 'mapbox-gl-compare';
 import 'mapbox-gl/dist/mapbox-gl.css';
 
 export default {
-    template: '<div class="map-container"></div>',
-
+    name: 'MapView',
     props: {
         lng: {
             type: String,
@@ -109,3 +98,4 @@ export default {
         }
     }
 }
+</script>
diff --git a/resources/js/app/components/object-types-list/object-types-list.js b/resources/js/app/components/object-types-list/object-types-list.js
deleted file mode 100644
index 377e02df8..000000000
--- a/resources/js/app/components/object-types-list/object-types-list.js
+++ /dev/null
@@ -1,48 +0,0 @@
-export default {
-    template: `<div class="object-types-list">
-        <div v-for="type in all">
-            <input type="checkbox" :checked="type in selected" :value="type" v-model="selected" />
-            <a :href="ref(type)" :class="className(type)">
-                <: type :>
-            </a>
-        </div>
-        <input type="hidden" :name="name('current')" :value="valueCurrent()" />
-        <input type="hidden" :name="name('change')" :value="valueChange()" />
-    </div>`,
-
-    props: {
-        all: [],
-        selected: [],
-        side: '',
-    },
-
-    data() {
-        return {
-            current: [],
-        };
-    },
-
-    mounted() {
-        this.$nextTick(() => {
-            this.current = this.selected;
-        });
-    },
-
-    methods: {
-        className(t) {
-            return `tag has-background-module-${t}`;
-        },
-        name(prefix) {
-            return `${prefix}_${this.side}`;
-        },
-        ref(t) {
-            return `/model/object_types/view/${t}`;
-        },
-        valueCurrent() {
-            return this.current.join(',');
-        },
-        valueChange() {
-            return this.selected.join(',');
-        },
-    },
-}
diff --git a/resources/js/app/components/object-types-list/object-types-list.vue b/resources/js/app/components/object-types-list/object-types-list.vue
new file mode 100644
index 000000000..5587b630c
--- /dev/null
+++ b/resources/js/app/components/object-types-list/object-types-list.vue
@@ -0,0 +1,82 @@
+<template>
+    <div class="object-types-list">
+        <div
+            v-for="type in all"
+            :key="type"
+        >
+            <input
+                type="checkbox"
+                :checked="type in modified"
+                :value="type"
+                v-model="modified"
+            >
+            <a
+                :href="ref(type)"
+                :class="className(type)"
+            >
+                {{ type }}
+            </a>
+        </div>
+        <input
+            type="hidden"
+            :name="name('current')"
+            :value="valueCurrent()"
+        >
+        <input
+            type="hidden"
+            :name="name('change')"
+            :value="valueChange()"
+        >
+    </div>
+</template>
+<script>
+export default {
+    name: 'ObjectTypesList',
+    props: {
+        all: {
+            type: Array,
+            default: () => ([]),
+        },
+        selected: {
+            type: Array,
+            default: () => ([]),
+        },
+        side: {
+            type: String,
+            default: '',
+        },
+    },
+
+    data() {
+        return {
+            current: [],
+            modified: [],
+        };
+    },
+
+    mounted() {
+        this.$nextTick(() => {
+            this.current = this.selected;
+            this.modified = this.selected;
+        });
+    },
+
+    methods: {
+        className(t) {
+            return `tag has-background-module-${t}`;
+        },
+        name(prefix) {
+            return `${prefix}_${this.side}`;
+        },
+        ref(t) {
+            return `/model/object_types/view/${t}`;
+        },
+        valueCurrent() {
+            return this.current.join(',');
+        },
+        valueChange() {
+            return this.modified.join(',');
+        },
+    },
+}
+</script>
diff --git a/resources/js/app/components/secret/secret.js b/resources/js/app/components/secret/secret.js
deleted file mode 100644
index 8efe7df77..000000000
--- a/resources/js/app/components/secret/secret.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import { t } from 'ttag';
-
-export default {
-    template: `<div class="secret">
-        <div v-if="visible && val">
-            <div><: val :></div>
-            <button class="button button-text-white is-width-auto" @click.prevent="reset(0)">
-                <app-icon icon="carbon:view-off-filled"></app-icon>
-            </button>
-            <button v-if="!msg" class="button button-text-white is-width-auto" @click.prevent="copy()">
-                <app-icon icon="carbon:copy"></app-icon>
-            </button>
-            <div v-if="msg" v-text="msg"></div>
-        </div>
-        <div v-if="!visible && val">
-            <div>****************</div>
-            <button class="button button-text-white is-width-auto" @click.prevent="reset(1)">
-                <app-icon icon="carbon:view-filled"></app-icon>
-            </button>
-        </div>
-        <div v-if="!val">---</div>
-
-
-
-    </div>`,
-
-    props: {
-        val: '',
-    },
-
-    data() {
-        return {
-            visible: false,
-            msg: '',
-        };
-    },
-
-    methods: {
-        copy() {
-            navigator.clipboard.writeText(this.val);
-            this.msg = t`copied in the clipboard`;
-        },
-        reset(v) {
-            this.visible = v;
-            this.msg = '';
-        }
-    },
-}
diff --git a/resources/js/app/components/secret/secret.vue b/resources/js/app/components/secret/secret.vue
new file mode 100644
index 000000000..7aadf844f
--- /dev/null
+++ b/resources/js/app/components/secret/secret.vue
@@ -0,0 +1,67 @@
+<template>
+    <div class="secret">
+        <div v-if="visible && val">
+            <div>{{ val }}</div>
+            <button
+                class="button button-text-white is-width-auto"
+                @click.prevent="reset(0)"
+            >
+                <app-icon icon="carbon:view-off-filled" />
+            </button>
+            <button
+                class="button button-text-white is-width-auto"
+                @click.prevent="copy()"
+                v-if="!msg"
+            >
+                <app-icon icon="carbon:copy" />
+            </button>
+            <div
+                v-text="msg"
+                v-if="msg"
+            />
+        </div>
+        <div v-if="!visible && val">
+            <div>****************</div>
+            <button
+                class="button button-text-white is-width-auto"
+                @click.prevent="reset(1)"
+            >
+                <app-icon icon="carbon:view-filled" />
+            </button>
+        </div>
+        <div v-if="!val">
+            ---
+        </div>
+    </div>
+</template>
+<script>
+import { t } from 'ttag';
+
+export default {
+    name: 'AppSecret',
+    props: {
+        val: {
+            type: String,
+            default: '',
+        },
+    },
+
+    data() {
+        return {
+            visible: false,
+            msg: '',
+        };
+    },
+
+    methods: {
+        copy() {
+            navigator.clipboard.writeText(this.val);
+            this.msg = t`copied in the clipboard`;
+        },
+        reset(v) {
+            this.visible = v;
+            this.msg = '';
+        }
+    },
+}
+</script>
diff --git a/resources/js/app/components/staggered-list.js b/resources/js/app/components/staggered-list.vue
similarity index 69%
rename from resources/js/app/components/staggered-list.js
rename to resources/js/app/components/staggered-list.vue
index b1bf7adfd..4c2629a08 100644
--- a/resources/js/app/components/staggered-list.js
+++ b/resources/js/app/components/staggered-list.vue
@@ -1,25 +1,21 @@
-/**
- * Templates that uses this component (directly or indirectly):
- *  Template/Elements/relations.twig
- *
- * <staggered-list> component used for lists with staggered animation
- *
- */
-
+<template>
+    <transition-group
+        appear
+        name="${NAME}"
+        @enter="enter"
+        @after-enter="afterEnter"
+    >
+        <slot />
+    </transition-group>
+</template>
+<script>
 const NAME = 'staggered';
 
 export default {
-    template: `
-        <transition-group appear
-            name="${NAME}"
-            v-on:enter="enter"
-            v-on:after-enter="afterEnter">
-            <slot></slot>
-        </transition-group>`,
-
+    name: 'StaggeredList',
     props: {
         stagger: {
-            type: String,
+            type: Number,
             default: () => 50,
         },
     },
@@ -52,3 +48,4 @@ export default {
         }
     }
 }
+</script>
diff --git a/resources/js/app/components/uri-input.js b/resources/js/app/components/uri-input.vue
similarity index 92%
rename from resources/js/app/components/uri-input.js
rename to resources/js/app/components/uri-input.vue
index c1652b4bc..98a5e1833 100644
--- a/resources/js/app/components/uri-input.js
+++ b/resources/js/app/components/uri-input.vue
@@ -1,17 +1,22 @@
-import { t } from 'ttag';
-
-export default {
-    template: /* template */`
+<template>
     <div>
-        <slot></slot>
+        <slot />
     </div>
-    `,
+</template>
+<script>
+import { t } from 'ttag';
 
+export default {
+    name: 'UriInput',
     props: {
         el: {
             type: HTMLInputElement,
+            default: null,
+        },
+        isValid: {
+            type: Boolean,
+            default: false,
         },
-        isValid: false
     },
 
     async mounted() {
@@ -73,3 +78,4 @@ export default {
         }
     }
 };
+</script>
diff --git a/resources/js/app/pages/modules/view.vue b/resources/js/app/pages/modules/view.vue
index a76daee3b..382f077fe 100644
--- a/resources/js/app/pages/modules/view.vue
+++ b/resources/js/app/pages/modules/view.vue
@@ -1,10 +1,11 @@
 <script>
-import { AjaxLogin } from '../../components/ajax-login/ajax-login.js';
+import { AjaxLogin } from '../../components/ajax-login/ajax-login.vue';
 import Vue from 'vue';
 import { t } from 'ttag';
 
 export default {
     components: {
+        AjaxLogin,
         CoordinatesView: () => import(/* webpackChunkName: "coordinates-view" */'app/components/coordinates-view'),
         TagPicker: () => import(/* webpackChunkName: "tag-picker" */'app/components/tag-picker/tag-picker'),
         PropertyView: () => import(/* webpackChunkName: "property-view" */'app/components/property-view/property-view'),
diff --git a/templates/Element/Panel/panel.scss b/templates/Element/Panel/panel.scss
index 854f58090..6c997b9c3 100644
--- a/templates/Element/Panel/panel.scss
+++ b/templates/Element/Panel/panel.scss
@@ -3,6 +3,7 @@
     top: 0; right: 0;
     min-width: 20 * $gutter;
     width: 100%;
+    overflow: auto;
     @media screen and (min-width: 768px) {
         width: 60%;
     }
diff --git a/templates/Pages/Dashboard/index.twig b/templates/Pages/Dashboard/index.twig
index 597f62f22..258bee32c 100644
--- a/templates/Pages/Dashboard/index.twig
+++ b/templates/Pages/Dashboard/index.twig
@@ -1,92 +1,68 @@
 {% do _view.assign('title', __('Dashboard')) %}
 {% do _view.assign('bodyViewClass', 'view-dashboard') %}
 
-<dashboard q="{{ _view.getRequest().getSession().read('objects.filter.q') }}" inline-template>
-    <div class="dashboard">
-        <section class="dashboard-section">
-            <div class="dashboard-items">
-            {% for name, module in modules %}
-                {{ Layout.dashboardModuleLink(name, module)|raw }}
-            {% endfor %}
-            </div>
-        </section>
-
-        <section class="dashboard-section">
-
-            <header>
-                <h2>{{ __('Preferences and Tools') }}</h2>
-            </header>
+<div class="dashboard">
+    <section class="dashboard-section">
+        <div class="dashboard-items">
+        {% for name, module in modules %}
+            {{ Layout.dashboardModuleLink(name, module)|raw }}
+        {% endfor %}
+        </div>
+    </section>
 
-            <div class="dashboard-items">
+    <section class="dashboard-section">
 
-                {% if modules.trash %}
-                    <a href="{{ Url.build({ '_name': 'trash:list' }) }}" title="{{ __('Trash') }}" class="dashboard-item has-background-black">
-                        <span>{{ __('Trash can') }}</span>
-                        {{ Layout.moduleCount('trash', 'has-background-black')|raw }}
-                        <app-icon icon="carbon:trash-can" :style="{ width: '28px', height: '28px' }"></app-icon>
-                    </a>
-                {% endif %}
+        <header>
+            <h2>{{ __('Preferences and Tools') }}</h2>
+        </header>
 
-                {% if modules.users %}
-                    <a href="{{ Url.build({'_name': 'modules:list', 'object_type': 'users'}) }}" title="{{ __('System users') }}" class="dashboard-item has-background-black">
-                        <span>{{ __('System users') }}</span>
-                        {% if Layout.showCounter('users') %}{{ Layout.moduleCount('users', 'has-background-black')|raw }}{% endif %}
-                        <app-icon icon="carbon:events-alt" :style="{ width: '28px', height: '28px' }"></app-icon>
-                    </a>
-                {% endif %}
+        <div class="dashboard-items">
 
-                <a href="{{ Url.build({'_name': 'user_profile:view'}) }}" title="{{ __('User Profile') }}" class="dashboard-item has-background-black">
-                    <span>{{ __('User Profile') }}</span>
-                    <app-icon icon="carbon:user-profile" :style="{ width: '28px', height: '28px' }"></app-icon>
+            {% if modules.trash %}
+                <a href="{{ Url.build({ '_name': 'trash:list' }) }}" title="{{ __('Trash') }}" class="dashboard-item has-background-black">
+                    <span>{{ __('Trash can') }}</span>
+                    {{ Layout.moduleCount('trash', 'has-background-black')|raw }}
+                    <app-icon icon="carbon:trash-can" :style="{ width: '28px', height: '28px' }"></app-icon>
                 </a>
+            {% endif %}
 
-                {% if config('Filters.import') and ('POST' in jobsAllow or 'GET' in jobsAllow) %}
-                    <a href="{{ Url.build({'_name': 'import:index'}) }}" title="{{ __('Import') }}" class="dashboard-item has-background-black">
-                        <span>{{ __('Import') }}</span>
-                        <app-icon icon="carbon:download" :style="{ width: '28px', height: '28px' }"></app-icon>
-                    </a>
-                {% endif %}
-
-                {% if in_array('admin', user.roles) %}
-                    <a href="{{ Url.build({'_name': 'admin:list:appearance'}) }}" title="{{ __('Administration') }}" class="dashboard-item has-background-black">
-                        <span>{{ __('Administration') }}</span>
-                        <app-icon icon="carbon:settings" :style="{ width: '28px', height: '28px' }"></app-icon>
-                    </a>
-                    <a href="{{ Url.build({'_name': 'model:list:object_types'}) }}" title="{{ __('Data modeling') }}" class="dashboard-item has-background-black">
-                        <span>{{ __('Data modeling') }}</span>
-                        <app-icon icon="carbon:concept" :style="{ width: '28px', height: '28px' }"></app-icon>
-                    </a>
-                {% endif %}
-            </div>
-        </section>
-
-        <section class="dashboard-section">
-            <header>
-                <h2>{{ __('Search') }}</h2>
-            </header>
-
-            <div role="search">
-                <div role="textsearch">
-                    <input type="text" v-model="searchString" v-on:keydown.stop="captureKeys">
-                    <button ref="searchSubmit" :disabled="!searchString || searchString.length < 3" v-on:click="searchObjects">
-                        <app-icon icon="carbon:search"></app-icon>
-                        {{ __('Search') }}
-                    </button>
-                </div>
-                <div role="idsearch">
-                    <input type="text" placeholder="{{ __('ID or uname') }}" v-model="searchId">
-                    <button @click.prevent="goToID()" :disabled="!searchId">
-                        {{ __('ID') }}
-                    </button>
-                </div>
-            </div>
-        </section>
+            {% if modules.users %}
+                <a href="{{ Url.build({'_name': 'modules:list', 'object_type': 'users'}) }}" title="{{ __('System users') }}" class="dashboard-item has-background-black">
+                    <span>{{ __('System users') }}</span>
+                    {% if Layout.showCounter('users') %}{{ Layout.moduleCount('users', 'has-background-black')|raw }}{% endif %}
+                    <app-icon icon="carbon:events-alt" :style="{ width: '28px', height: '28px' }"></app-icon>
+                </a>
+            {% endif %}
 
-        <div class="dashboard-area">
+            <a href="{{ Url.build({'_name': 'user_profile:view'}) }}" title="{{ __('User Profile') }}" class="dashboard-item has-background-black">
+                <span>{{ __('User Profile') }}</span>
+                <app-icon icon="carbon:user-profile" :style="{ width: '28px', height: '28px' }"></app-icon>
+            </a>
 
-            <recent-activity :page-sizes={{ config('Pagination.sizeAvailable')|json_encode|escape('html_attr') }} :user-id={{ user.id }}></recent-activity>
+            {% if config('Filters.import') and ('POST' in jobsAllow or 'GET' in jobsAllow) %}
+                <a href="{{ Url.build({'_name': 'import:index'}) }}" title="{{ __('Import') }}" class="dashboard-item has-background-black">
+                    <span>{{ __('Import') }}</span>
+                    <app-icon icon="carbon:download" :style="{ width: '28px', height: '28px' }"></app-icon>
+                </a>
+            {% endif %}
 
+            {% if in_array('admin', user.roles) %}
+                <a href="{{ Url.build({'_name': 'admin:list:appearance'}) }}" title="{{ __('Administration') }}" class="dashboard-item has-background-black">
+                    <span>{{ __('Administration') }}</span>
+                    <app-icon icon="carbon:settings" :style="{ width: '28px', height: '28px' }"></app-icon>
+                </a>
+                <a href="{{ Url.build({'_name': 'model:list:object_types'}) }}" title="{{ __('Data modeling') }}" class="dashboard-item has-background-black">
+                    <span>{{ __('Data modeling') }}</span>
+                    <app-icon icon="carbon:concept" :style="{ width: '28px', height: '28px' }"></app-icon>
+                </a>
+            {% endif %}
         </div>
+    </section>
+
+    <dashboard-search :q="{{ _view.getRequest().getSession().read('objects.filter.q')|json_encode }}"></dashboard-search>
 
+    <div class="dashboard-area">
+        <recent-activity :page-sizes={{ config('Pagination.sizeAvailable')|json_encode|escape('html_attr') }} :user-id={{ user.id }}></recent-activity>
     </div>
-</dashboard>
+
+</div>