improve chunks, mobile, WC, lazyloading, prefetch

pages/Admin.vue

@@ -49,18 +49,19 @@
 </template>
 <script>
 import { mapState } from 'vuex'
-import Users from '../components/admin/Users'
-import Events from '../components/admin/Events'
-import Places from '../components/admin/Places'
-import Settings from '../components/admin/Settings'
-import Federation from '../components/admin/Federation'
-import Moderation from '../components/admin/Moderation'
-import Announcement from '../components/admin/Announcement'
-import Theme from '../components/admin/Theme'
 
 export default {
   name: 'Admin',
-  components: { Users, Events, Places, Settings, Federation, Moderation, Announcement, Theme },
+  components: { 
+    Users:  () => import(/* webpackChunkName: "admin" */'../components/admin/Users'),
+    Events: () => import(/* webpackChunkName: "admin" */'../components/admin/Events'),
+    Places: () => import(/* webpackChunkName: "admin" */'../components/admin/Places'),
+    Settings: () => import(/* webpackChunkName: "admin" */'../components/admin/Settings'),
+    Federation: () => import(/* webpackChunkName: "admin" */'../components/admin/Federation.vue'),
+    Moderation: () => import(/* webpackChunkName: "admin" */'../components/admin/Moderation.vue'),
+    Announcement: () => import(/* webpackChunkName: "admin" */'../components/admin/Announcement.vue'),
+    Theme: () => import(/* webpackChunkName: "admin" */'../components/admin/Theme.vue')
+  },
   middleware: ['auth'],
   async asyncData ({ $axios, params, store }) {
     try {

pages/Login.vue

@@ -1,7 +1,7 @@
 <template lang='pug'>
-  v-container
-    v-row.mt-5(align='center' justify='center')
-      v-col(cols='12' md="6" lg="5" xl="4")
+  v-container.pa-0.pa-md-3
+    v-row.mt-md-5.ma-0(align='center' justify='center')
+      v-col.pa-0.pa-md-3(cols='12' md="6" lg="5" xl="4")
         v-form(v-model='valid' ref='form' lazy-validation @submit.prevent='submit')
           v-card
             v-card-title {{$t('common.login')}}
@@ -57,7 +57,6 @@ export default {
   methods: {
     async forgot () {
       if (!this.email) {
-      //   this.$root.$message({ message: this.$t('login.insert_email'), color: 'error' })
         this.$refs.email.focus()
         return
       }

pages/Register.vue

@@ -1,7 +1,7 @@
 <template lang='pug'>
-v-container
-  v-row.mt-5(align='center' justify='center')
-    v-col(cols='12' md="6" lg="5" xl="4")
+v-container.pa-0.pa-md-3
+  v-row.mt-md-5.ma-0(align='center' justify='center')
+    v-col.pa-0.pa-md-3(cols='12' md="6" lg="5" xl="4")
 
       v-card
         v-card-title {{$t('common.register')}}
@@ -28,17 +28,19 @@ v-container
           v-btn(@click='register'
             :disabled='!valid || loading' :loading='loading'
             color='primary') {{$t('common.send')}}
-            v-icon mdi-chevron-right
+            v-icon(v-text='mdiChevronRight')
 </template>
 
 <script>
 import { mapState } from 'vuex'
 import get from 'lodash/get'
+import { mdiChevronRight } from '@mdi/js'
 
 export default {
   name: 'Register',
   data () {
     return {
+      mdiChevronRight,
       loading: false,
       user: {},
       valid: true

pages/add/_edit.vue

@@ -51,7 +51,7 @@
                 v-combobox(v-model='event.tags'
                   :prepend-icon="mdiTagMultiple"
                   chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
-                  :delimiters="[',', ' ']"
+                  :delimiters="[',', ';']"
                   :items="tags.map(t => t.tag)"
                   :label="$t('common.tags')")
 
@@ -69,7 +69,14 @@ import { mdiFileImport, mdiFormatTitle, mdiTagMultiple } from '@mdi/js'
 
 export default {
   name: 'NewEvent',
-  components: { List, Editor, ImportDialog, MediaInput, WhereInput, DateInput },
+  components: {
+    List: () => import(/* webpackChunkName: "add" */'@/components/List'),
+    Editor: () => import(/* webpackChunkName: "add" */'@/components/Editor'), 
+    ImportDialog: () => import(/* webpackChunkName: "add" */'./ImportDialog.vue'),
+    MediaInput: () => import(/* webpackChunkName: "add" */'./MediaInput.vue'),
+    WhereInput: () => import(/* webpackChunkName: "add" */'./WhereInput.vue'),
+    DateInput: () => import(/* webpackChunkName: "add" */'./DateInput.vue')
+  },
   validate ({ store }) {
     return (store.state.auth.loggedIn || store.state.settings.allow_anon_event)
   },

pages/event/_slug.vue

@@ -132,7 +132,6 @@ v-container#event.pa-0.pa-sm-2
 </template>
 <script>
 import { mapState } from 'vuex'
-import EventAdmin from './eventAdmin'
 import get from 'lodash/get'
 import moment from 'dayjs'
 import clipboard from '../../assets/clipboard'
@@ -145,7 +144,10 @@ import { mdiArrowLeft, mdiArrowRight, mdiDotsVertical, mdiCodeTags, mdiClose,
 export default {
   name: 'Event',
   mixins: [clipboard],
-  components: { EventAdmin, EmbedEvent },
+  components: {
+    EventAdmin: () => import(/* webpackChunkName: "event" */'./eventAdmin'),
+    EmbedEvent: () => import(/* webpackChunkName: "event" */'./embedEvent'),
+  },
   async asyncData ({ $axios, params, error, store }) {
     try {
       const event = await $axios.$get(`/event/${params.slug}`)
@@ -184,7 +186,6 @@ export default {
 
     return {
       title: `${this.settings.title} - ${this.event.title}`,
-      script: [{ src: '/gancio-events.es.js', async: true, body: true }],
       meta: [
         // hid is used as unique identifier. Do not use `vmid` for it as it will not work
         {

pages/export.vue

@@ -120,7 +120,6 @@ export default {
   head () {
     return {
       title: `${this.settings.title} - ${this.$t('common.export')}`,
-      script: [{ src: '/gancio-events.es.js', async: true, body: true }],
     }
   },
   computed: {