🔥 Use VueX store instead of props for router

src/components/Settings/ConfigLauncher.vue

@@ -71,10 +71,16 @@ export default {
     IconWorkspaceView,
     IconMinimalView,
   },
-  props: {
+  computed: {
-    sections: Array,
+    sections() {
-    pageInfo: Object,
+      return this.$store.getters.sections;
-    appConfig: Object,
+    },
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+    pageInfo() {
+      return this.$store.getters.pageInfo;
+    },
   },
   methods: {
     showEditor: function show() {

src/components/Settings/SettingsContainer.vue

@@ -11,8 +11,7 @@
           :confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
         <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
         <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
-        <ConfigLauncher :sections="sections" :pageInfo="pageInfo" :appConfig="appConfig"
+        <ConfigLauncher @modalChanged="modalChanged" />
-          @modalChanged="modalChanged" />
         <AuthButtons  v-if="userState != 'noone'" :userType="userState" />
       </div>
       <div :class="`show-hide-container ${settingsVisible? 'hide-btn' : 'show-btn'}`">

src/router.js

@@ -62,37 +62,30 @@ const router = new Router({
       path: '/',
       name: `landing-page-${getStartingView()}`,
       component: getStartingComponent(),
-      props: config,
       meta: makeMetaTags('Home Page'),
     },
     { // Default home page
       path: routePaths.home,
       name: 'home',
       component: Home,
-      props: config,
       meta: makeMetaTags('Home Page'),
     },
     { // Workspace view page
       path: routePaths.workspace,
       name: 'workspace',
       component: Workspace,
-      props: config,
       meta: makeMetaTags('Workspace'),
     },
     { // Minimal view page
       path: routePaths.minimal,
       name: 'minimal',
       component: Minimal,
-      props: config,
       meta: makeMetaTags('Start Page'),
     },
     { // The login page
       path: routePaths.login,
       name: 'login',
       component: Login,
-      props: {
-        appConfig: config.appConfig,
-      },
       beforeEnter: (to, from, next) => {
         // If the user already logged in + guest mode not enabled, then redirect home
         if (isAuthenticated() && !isGuestAccessEnabled()) router.push({ path: '/' });
@@ -109,7 +102,6 @@ const router = new Router({
       path: routePaths.download,
       name: 'download',
       component: () => import('./views/DownloadConfig.vue'),
-      props: config,
       meta: makeMetaTags('Download Config'),
     },
     { // Page not found, any non-defined routes will land here

src/views/DownloadConfig.vue

@@ -7,18 +7,13 @@ import JsonToYaml from '@/utils/JsonToYaml';
 
 export default {
   name: 'DownloadConfig',
-  props: {
+  computed: {
-    sections: Array,
+    config() {
-    appConfig: Object,
+      return this.$store.state.config;
-    pageInfo: Object,
+    },
   },
   data() {
     return {
-      config: {
-        appConfig: this.appConfig,
-        pageInfo: this.pageInfo,
-        sections: this.sections,
-      },
       jsonParser: JsonToYaml,
     };
   },

src/views/Home.vue

@@ -55,11 +55,6 @@ import Defaults, { localStorageKeys, iconCdns } from '@/utils/defaults';
 
 export default {
   name: 'home',
-  props: {
-    sections: Array, // Main site content
-    appConfig: Object, // Main site configuation (optional)
-    pageInfo: Object, // Page metadata (optional)
-  },
   components: {
     SettingsContainer,
     Section,
@@ -71,6 +66,15 @@ export default {
     modalOpen: false, // When true, keybindings are disabled
   }),
   computed: {
+    sections() {
+      return this.$store.getters.sections;
+    },
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+    pageInfo() {
+      return this.$store.getters.pageInfo;
+    },
     /* Get class for num columns, if specified by user */
     colCount() {
       let { colCount } = this.appConfig;

src/views/Login.vue

@@ -91,9 +91,6 @@ export default {
     Button,
     Input,
   },
-  props: {
-    appConfig: Object,
-  },
   data() {
     return {
       username: '',
@@ -104,6 +101,9 @@ export default {
     };
   },
   computed: {
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
     /* Data for timeout dropdown menu, translated label + value in ms */
     dropDownMenu() {
       return [

src/views/Minimal.vue

@@ -2,8 +2,7 @@
   <div class="minimal-home" :style="getBackgroundImage() + setColumnCount()">
     <!-- Buttons for config and home page -->
     <div class="minimal-buttons">
-      <ConfigLauncher :sections="sections" :pageInfo="pageInfo" :appConfig="appConfig"
+      <ConfigLauncher @modalChanged="modalChanged" class="config-launcher" />
-        @modalChanged="modalChanged" class="config-launcher" />
     </div>
     <!-- Page title and search bar -->
     <div class="title-and-search">
@@ -60,11 +59,6 @@ import ConfigLauncher from '@/components/Settings/ConfigLauncher';
 
 export default {
   name: 'home',
-  props: {
-    sections: Array, // Main site content
-    appConfig: Object, // Main site configuation (optional)
-    pageInfo: Object,
-  },
   components: {
     MinimalSection,
     MinimalHeading,
@@ -79,6 +73,17 @@ export default {
     tabbedView: true, // By default use tabs, when searching then show all instead
     theme: GetTheme(),
   }),
+  computed: {
+    sections() {
+      return this.$store.getters.sections;
+    },
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+    pageInfo() {
+      return this.$store.getters.pageInfo;
+    },
+  },
   watch: {
     /* When the theme changes, then call the update method */
     searchValue() {

src/views/Workspace.vue

@@ -16,10 +16,6 @@ import { GetTheme, ApplyLocalTheme, ApplyCustomVariables } from '@/utils/ThemeHe
 
 export default {
   name: 'Workspace',
-  props: {
-    sections: Array,
-    appConfig: Object,
-  },
   data: () => ({
     url: '',
     GetTheme,
@@ -27,6 +23,12 @@ export default {
     ApplyCustomVariables,
   }),
   computed: {
+    sections() {
+      return this.$store.getters.sections;
+    },
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
     isMultiTaskingEnabled() {
       return this.appConfig.enableMultiTasking || false;
     },