test(settings): add test cases for empty setting value return value

Added a store to cache the settings configuration. The getSetting
function from useSettings is now synchronous and uses this cache.
The settings cache is set when loading the settings initially
(asnychronously).

src/App.vue

@@ -19,36 +19,33 @@ import Navbar from './features/nav/components/Navbar.vue';
 import Footer from './features/footer/components/Footer.vue';
 
 import { updatePageTitle } from './router';
-import { useSettings } from './features/settings/composables/useSettings.js';
-import { computed, watch, watchEffect } from 'vue';
+import { useColorScheme } from './features/colorScheme/composables/useColorScheme';
+import { ref, provide, watch, watchEffect } from 'vue';
 import { useRoute } from 'vue-router';
 
 const route = useRoute();
 
-const { getSetting } = useSettings();
-const colorScheme = computed(() => getSetting(['appearance', 'colorScheme']));
-
-const updateColorScheme = function updateColorScheme (newColorScheme) {
+const { getColorScheme, updateColorScheme } = useColorScheme();
+const colorScheme = ref(getColorScheme());
+provide('colorScheme', colorScheme);
+watch(colorScheme, (newValue) => {
+    updateColorScheme(newValue);
     document.body.style.setProperty(colorScheme, {
         auto: 'normal',
         dark: 'dark',
         light: 'light'
     });
-    if (newColorScheme === 'dark') {
+    if (newValue === 'dark') {
         document.body.classList.add('dark');
     } else {
         document.body.classList.remove('dark');
     }
-    if (newColorScheme === 'auto') {
+    if (newValue === 'auto') {
         document.body.classList.add('color-scheme-auto');
     } else {
         document.body.classList.remove('color-scheme-auto');
     }
-}
-watch(colorScheme, (newColorScheme) => {
-    updateColorScheme(newColorScheme);
 });
-updateColorScheme(colorScheme.value);
 
 watchEffect(() => updatePageTitle(route));
 </script>

src/features/colorScheme/components/ColorSchemeButton.vue

@@ -17,14 +17,12 @@ limitations under the License.
 <script setup>
 import Icon from '@/features/icons/components/Icon.vue';
 
-import { useSettings } from '@/features/settings/composables/useSettings';
-import { computed } from 'vue';
+import { inject } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
-const { getSetting, setSetting } = useSettings();
 
-const colorScheme = computed(() => getSetting(['appearance', 'colorScheme']));
+const colorScheme = inject('colorScheme');
 
 const colorSchemeNextMapper = {
     'light': 'dark',
@@ -41,15 +39,11 @@ const colorSchemeIconMapper = {
 const getTooltipTranslation = function (colorScheme) {
     return t(`preferences.colorScheme.switch.${colorSchemeNextMapper[colorScheme]}`);
 };
-
-const setColorScheme = function setColorScheme (newColorScheme) {
-    setSetting(['appearance', 'colorScheme'], newColorScheme);
-};
 </script>
 
 <template>
     <button class="color-scheme-button"
-        @click="setColorScheme(colorSchemeNextMapper[colorScheme])"
+        @click="colorScheme = colorSchemeNextMapper[colorScheme]"
         :aria-label="getTooltipTranslation(colorScheme)"
         :title="getTooltipTranslation(colorScheme)"
     >

src/features/colorScheme/components/__tests__/ColorSchemeButton.test.js

@@ -1,47 +0,0 @@
-/*
-Copyright 2026 Seekra
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import ColorSchemeButton from '../ColorSchemeButton.vue';
-import { useSettings } from '@/features/settings/composables/useSettings.js';
-import { mountComponent } from '@/test-utils/mountComponent';
-import { describe, expect, test } from 'vitest';
-
-const { getSetting } = useSettings();
-
-const colorSchemeSettingPath = ['appearance', 'colorScheme']
-
-const getWrapper = function getWrapper () {
-    return mountComponent(ColorSchemeButton);
-};
-
-describe('ColorSchemeButton', () => {
-    test('sets color scheme setting', async () => {
-        const wrapper = getWrapper();
-
-        expect(getSetting(colorSchemeSettingPath)).toBe('auto');
-        
-        const colorSchemeButton = wrapper.find('button');
-
-        await colorSchemeButton.trigger('click');
-        expect(getSetting(colorSchemeSettingPath)).toBe('light');
-
-        await colorSchemeButton.trigger('click');
-        expect(getSetting(colorSchemeSettingPath)).toBe('dark');
-
-        await colorSchemeButton.trigger('click');
-        expect(getSetting(colorSchemeSettingPath)).toBe('auto');
-    });
-});

src/features/colorScheme/composables/useColorScheme.js

@@ -0,0 +1,39 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export const useColorScheme = function () {
+    const getColorScheme = function () {
+        let colorScheme = localStorage.getItem('colorScheme') || 'auto';
+        if (!(colorScheme === 'dark' || colorScheme === 'light' || colorScheme === 'auto')) {
+            colorScheme = 'auto';
+        };
+        return colorScheme;
+    };
+
+    const updateColorScheme = function (newScheme) {
+        let actualNewScheme = newScheme;
+        if (!(actualNewScheme === 'dark' || actualNewScheme === 'light' || actualNewScheme === 'auto')) {
+            actualNewScheme = 'auto';
+        };
+
+        localStorage.setItem('colorScheme', actualNewScheme);
+    };
+
+    return {
+        getColorScheme,
+        updateColorScheme
+    };
+};

src/features/settings/components/Selection.vue

@@ -54,9 +54,10 @@ const props = defineProps({
 const store = useSettingsStore();
 
 const optionType = computed(() => props.setting.allowMultiple ? 'checkbox' : 'radio');
-const selected = computed({
-    get: () => normalizeSelectedValue(store.get(props.path) ?? props.setting.default),
-    set: (value) => store.set(props.path, value)
+const selected = ref(normalizeSelectedValue(store.get(props.path) ?? props.setting.default));
+
+watch(selected, (newValue) => {
+    store.set(props.path, newValue);
 });
 
 const labelId = useId();

src/features/settings/components/__tests__/Selection.test.js

@@ -90,32 +90,6 @@ describe('Selection', () => {
         expect(inputsChecked).toStrictEqual([false, true, false]);
     });
 
-    test('reacts on store change', async () => {
-        const wrapper = getWrapper({
-            options: exampleOptions,
-            piniaOptions: {
-                setupStores: () => {
-                    const store = useSettingsStore();
-                    store.set('selection', 'o1');
-                }
-            }
-        });
-        const settings = useSettingsStore();
-
-        {
-            const inputs = wrapper.findAll('input');
-            const inputsChecked = getChecked(inputs);
-            expect(inputsChecked).toStrictEqual([false, true, false]);
-        }
-        {
-            settings.set('selection', 'o2');
-            await nextTick();
-            const inputs = wrapper.findAll('input');
-            const inputsChecked = getChecked(inputs);
-            expect(inputsChecked).toStrictEqual([false, false, true]);
-        }
-    });
-
     test('shows multiple values from store', () => {
         const wrapper = getWrapper({
             options: exampleOptions,

src/features/settings/composables/__tests__/useSettings.test.js

@@ -14,16 +14,63 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { useSettingsConfigCacheStore } from '../../stores/settingsConfigCacheStore';
+import { useSettingsStore } from '../../stores/settingsStore';
 import { useSettings } from '../useSettings';
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 
-const settingDefaultValue = vi.hoisted(() => 42);
+const settingDefaultValue = 42;
 const settingPath = ['test', 'number'];
 
-vi.mock('../../settings.json', () => ({
-    default: {
+describe('useSettings', () => {
+    describe('getSetting', () => {
+        test('returns stored value', () => {
+            const { getSetting } = useSettings();
+            const settings = useSettingsStore();
+
+            const key = 'setting';
+            const value = 42;
+
+            settings.set(key, value);
+
+            expect(getSetting(key)).toBe(value);
+        });
+
+        test('returns default value', () => {
+            const { getSetting } = useSettings();
+            expect(getSetting(settingPath)).toBe(settingDefaultValue);
+        });
+
+        test('returns stored value instead of default value', () => {
+            const { getSetting } = useSettings();
+            const settings = useSettingsStore();
+
+            const value = 43;
+
+            expect(getSetting(settingPath)).toBe(settingDefaultValue);
+
+            settings.set(settingPath, value);
+            expect(getSetting(settingPath)).toBe(value);
+        });
+
+        test('returns undefined if there is no value', () => {
+            const { getSetting } = useSettings();
+            expect(getSetting(['test', 'bool'])).toBeUndefined();
+        });
+    });
+});
+
+beforeEach(() => {
+    setActivePinia(
+        createTestingPinia({
+            createSpy: vi.fn,
+            stubActions: false
+        })
+    );
+    const settingsConfigCache = useSettingsConfigCacheStore();
+    settingsConfigCache.set({
         contents: [
             {
                 name: 'test',
@@ -43,49 +90,5 @@ vi.mock('../../settings.json', () => ({
                 ]
             }
         ]
-    }
-}));
-
-describe('useSettings', () => {
-    describe('getSetting', () => {
-        test('returns stored value', () => {
-            const { getSetting, setSetting } = useSettings();
-
-            const key = ['setting'];
-            const value = 42;
-
-            setSetting(key, value);
-            expect(getSetting(key)).toBe(value);
-        });
-
-        test('returns default value', () => {
-            const { getSetting, setSetting } = useSettings();
-            expect(getSetting(settingPath)).toBe(settingDefaultValue);
-        });
-
-        test('returns stored value instead of default value', () => {
-            const { getSetting, setSetting } = useSettings();
-
-            const value = 43;
-
-            expect(getSetting(settingPath)).toBe(settingDefaultValue);
-
-            setSetting(settingPath, value);
-            expect(getSetting(settingPath)).toBe(value);
-        });
-
-        test('returns undefined if there is no value', () => {
-            const { getSetting } = useSettings();
-            expect(getSetting(['test', 'bool'])).toBeUndefined();
-        });
     });
 });
-
-beforeEach(() => {
-    setActivePinia(
-        createTestingPinia({
-            createSpy: vi.fn,
-            stubActions: false
-        })
-    );
-});

src/features/settings/composables/useSettings.js

@@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import settings from '../settings.json';
+import { useSettingsConfigCacheStore } from '../stores/settingsConfigCacheStore';
 import { useSettingsStore } from '../stores/settingsStore';
 import { getSettingRecursively } from '../utils/getSetting';
+import { loadSettingsConfig } from '../utils/settingsParser';
 
 /**
  * Provides access to the stored settings.
@@ -30,23 +31,14 @@ export const useSettings = function useSettings () {
     const getSetting = function getSetting (key) {
         const settingsStore = useSettingsStore();
 
+        const settings = useSettingsConfigCacheStore().get();
         return (
-            settingsStore.get(key.join('.')) ??
+            settingsStore.get(key) ??
             getSettingRecursively(
                 key, settings.contents ?? []
             )?.default
         );
     };
 
-    /**
-     * Sets the value of a specific setting.
-     * @param {string[]} key - The setting key.
-     * @param value - The new value for the setting.
-     */
-    const setSetting = function setSetting (key, value) {
-        const settingsStore = useSettingsStore();
-        settingsStore.set(key.join('.'), value);
-    };
-
-    return { getSetting, setSetting };
+    return { getSetting };
 };

src/features/settings/composables/useSettingsConfig.js

@@ -0,0 +1,48 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { ref, readonly } from 'vue';
+import { loadSettingsConfig } from '../utils/settingsParser.js';
+
+const config  = ref(null);
+const error   = ref(null);
+const loading = ref(false);
+
+/**
+ * Provides reactive access to the parsed settings configuration.
+ * The config is loaded once and shared across all consumers.
+ */
+export function useSettingsConfig() {
+    async function load() {
+        loading.value = true;
+        error.value   = null;
+        try {
+            config.value = await loadSettingsConfig();
+        } catch (e) {
+            error.value  = e.message;
+            config.value = null;
+        } finally {
+            loading.value = false;
+        }
+    }
+
+    return {
+        config:  readonly(config),
+        error:   readonly(error),
+        loading: readonly(loading),
+        load,
+    };
+}

src/features/settings/settings.json

@@ -1,30 +1,3 @@
 {
-    "contents": [
-        {
-            "name": "appearance",
-            "i18n": "settings.settings.appearance.title",
-            "content": [
-                {
-                    "name": "colorScheme",
-                    "type": "selection",
-                    "i18n": "settings.settings.appearance.contents.colorScheme.title",
-                    "default": "auto",
-                    "options": [
-                        {
-                            "name": "auto",
-                            "i18n": "settings.settings.appearance.contents.colorScheme.options.auto"
-                        },
-                        {
-                            "name": "light",
-                            "i18n": "settings.settings.appearance.contents.colorScheme.options.light"
-                        },
-                        {
-                            "name": "dark",
-                            "i18n": "settings.settings.appearance.contents.colorScheme.options.dark"
-                        }
-                    ]
-                }
-            ]
-        }
-    ]
-}
+    "contents": []
+}

src/features/settings/stores/settingsConfigCacheStore.js

@@ -0,0 +1,31 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { defineStore } from 'pinia';
+
+export const useSettingsConfigCacheStore = defineStore('settingsConfigCache', () => {
+    let settingsConfig = undefined;
+
+    const set = function set (value) {
+        settingsConfig = value;
+    };
+
+    const get = function get () {
+        return settingsConfig;
+    };
+
+    return { set, get };
+});

src/features/settings/utils/__tests__/settingsValidator.test.js

@@ -20,10 +20,18 @@ import { validateSettingsConfig, validateEntry, validateSelectionOptions, assert
 describe('settingsValidator', () => {
     describe('validateSettingsConfig', () => {
         test.for([
-            { settings: {
+            { raw: false, expected: false },
+            { raw: true, expected: false },
+            { raw: 0, expected: false },
+            { raw: 42, expected: false },
+            { raw: '', expected: false },
+            { raw: ' ', expected: false },
+            { raw: 'a', expected: false },
+            { raw: {}, expected: false },
+            { raw: {
                 contents: []
-            } },
-            { settings: {
+            }, expected: true },
+            { raw: {
                 contents: [
                     {
                         name: 'general',
@@ -37,8 +45,8 @@ describe('settingsValidator', () => {
                         ]
                     }
                 ]
-            } },
-            { settings: {
+            }, expected: true },
+            { raw: {
                 contents: [
                     {
                         name: 'general',
@@ -63,8 +71,8 @@ describe('settingsValidator', () => {
                         ]
                     },
                 ]
-            } },
-            { settings: {
+            }, expected: true },
+            { raw: {
                 contents: [
                     {
                         name: 'general',
@@ -120,12 +128,12 @@ describe('settingsValidator', () => {
                                         default: 'str'
                                     }
                                 ]
-                            }
+                            },
                         ]
-                    }
+                    },
                 ]
-            } },
-            { settings: {
+            }, expected: true },
+            { raw: {
                 contents: [
                     {
                         name: 'general',
@@ -182,283 +190,12 @@ describe('settingsValidator', () => {
                                         default: 'str'
                                     }
                                 ]
-                            }
+                            },
                         ]
-                    }
+                    },
                 ]
-            } }
-        ])('does not throw an error and returns input', ({ settings }) => {
-            validateSettingsConfig(settings);
-        });
-
-        test.for([
-            { settings: false },
-            { settings: true },
-            { settings: 0 },
-            { settings: 42 },
-            { settings: '' },
-            { settings: ' ' },
-            { settings: 'a' },
-            { settings: {} },
-            { settings: {
-                content: [
-                    {
-                        type: 'sectio',
-                        name: 'general',
-                        i18n: 'settings.settings.general',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'copyOfGeneral',
-                        i18n: 'settings.settings.copyOfGeneral',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                default: false,
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'aSection',
-                        i18n: 'settings.settings.aSection',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 43',
-                                i18n: 'settings.settings.aSection.enableFeature43'
-                            },
-                            {
-                                type: 'selection',
-                                name: 'language',
-                                i18n: 'settings.settings.aSection.language.label',
-                                default: 'en',
-                                allowMultiple: 'false',
-                                options: [
-                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
-                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
-                                ]
-                            },
-                            {
-                                type: 'section',
-                                name: 'section2',
-                                i18n: 'settings.settings.aSection.section2.label',
-                                content: [
-                                    {
-                                        type: 'string',
-                                        name: 'string',
-                                        i18n: 'settings.settings.aSection.sections.string',
-                                        default: 'str'
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            } },
-            { settings: {
-                content: [
-                    {
-                        type: 'sectio',
-                        name: 'general',
-                        i18n: 'settings.settings.general',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'copyOfGeneral',
-                        i18n: 'settings.settings.copyOfGeneral',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                default: false,
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'aSection',
-                        i18n: 'settings.settings.aSection',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 43',
-                                i18n: 'settings.settings.aSection.enableFeature43'
-                            },
-                            {
-                                type: 'selection',
-                                name: 'language',
-                                i18n: 'settings.settings.aSection.language.label',
-                                default: 'en',
-                                options: [
-                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
-                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
-                                ]
-                            },
-                            {
-                                type: 'section',
-                                name: 'section2',
-                                i18n: 'settings.settings.aSection.section2.label',
-                                content: [
-                                    {
-                                        type: 'string',
-                                        name: 'string',
-                                        i18n: 'settings.settings.aSection.sections.string',
-                                        default: 'str'
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            } },
-            { settings: {
-                content: [
-                    {
-                        type: 'section',
-                        name: 'general',
-                        i18n: 'settings.settings.general',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'copyOfGeneral',
-                        i18n: 'settings.settings.copyOfGeneral',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                default: false,
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'aSection',
-                        i18n: 'settings.settings.aSection',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 43',
-                                i18n: 'settings.settings.aSection.enableFeature43'
-                            },
-                            {
-                                type: 'selection',
-                                name: 'language',
-                                i18n: 'settings.settings.aSection.language.label',
-                                default: 'en',
-                                options: [
-                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
-                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
-                                ]
-                            },
-                            {
-                                type: 'section',
-                                name: 'section2',
-                                i18n: 'settings.settings.aSection.section2.label',
-                                content: [
-                                    {
-                                        type: 'string',
-                                        name: 'string',
-                                        i18n: 'settings.settings.aSection.sections.string',
-                                        default: 'str'
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            } },
-            { settings: {
-                contents: [
-                    {
-                        type: 'section',
-                        name: 'general',
-                        i18n: 'settings.settings.general',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'copyOfGeneral',
-                        i18n: 'settings.settings.copyOfGeneral',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                default: false,
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'aSection',
-                        i18n: 'settings.settings.aSection',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 43',
-                                i18n: 'settings.settings.aSection.enableFeature43',
-                                default: 'true'
-                            },
-                            {
-                                type: 'selection',
-                                name: 'language',
-                                i18n: 'settings.settings.aSection.language.label',
-                                default: 'en',
-                                options: [
-                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
-                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
-                                ]
-                            },
-                            {
-                                type: 'section',
-                                name: 'section2',
-                                i18n: 'settings.settings.aSection.section2.label',
-                                content: [
-                                    {
-                                        type: 'string',
-                                        name: 'string',
-                                        i18n: 'settings.settings.aSection.sections.string',
-                                        default: 42
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            } },
-            { settings: {
+            }, expected: true },
+            { raw: {
                 contents: [
                     {
                         type: 'bool',
@@ -521,14 +258,276 @@ describe('settingsValidator', () => {
                                         default: 'str'
                                     }
                                 ]
+                            },
+                        ]
+                    },
+                ]
+            }, expected: false },
+            { raw: {
+                contents: [
+                    {
+                        type: 'section',
+                        name: 'general',
+                        i18n: 'settings.settings.general',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                i18n: 'settings.settings.general.enableFeature42'
                             }
                         ]
-                    }
+                    },
+                    {
+                        type: 'section',
+                        name: 'copyOfGeneral',
+                        i18n: 'settings.settings.copyOfGeneral',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                default: false,
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'aSection',
+                        i18n: 'settings.settings.aSection',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 43',
+                                i18n: 'settings.settings.aSection.enableFeature43',
+                                default: 'true'
+                            },
+                            {
+                                type: 'selection',
+                                name: 'language',
+                                i18n: 'settings.settings.aSection.language.label',
+                                default: 'en',
+                                options: [
+                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
+                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
+                                ]
+                            },
+                            {
+                                type: 'section',
+                                name: 'section2',
+                                i18n: 'settings.settings.aSection.section2.label',
+                                content: [
+                                    {
+                                        type: 'string',
+                                        name: 'string',
+                                        i18n: 'settings.settings.aSection.sections.string',
+                                        default: 42
+                                    }
+                                ]
+                            },
+                        ]
+                    },
                 ]
-            } }
-        ])('throws error', ({ settings }) => {
-            expect(() => validateSettingsConfig(settings)).toThrow(Error)
-        })
+            }, expected: false },
+            { raw: {
+                content: [
+                    {
+                        type: 'section',
+                        name: 'general',
+                        i18n: 'settings.settings.general',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'copyOfGeneral',
+                        i18n: 'settings.settings.copyOfGeneral',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                default: false,
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'aSection',
+                        i18n: 'settings.settings.aSection',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 43',
+                                i18n: 'settings.settings.aSection.enableFeature43'
+                            },
+                            {
+                                type: 'selection',
+                                name: 'language',
+                                i18n: 'settings.settings.aSection.language.label',
+                                default: 'en',
+                                options: [
+                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
+                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
+                                ]
+                            },
+                            {
+                                type: 'section',
+                                name: 'section2',
+                                i18n: 'settings.settings.aSection.section2.label',
+                                content: [
+                                    {
+                                        type: 'string',
+                                        name: 'string',
+                                        i18n: 'settings.settings.aSection.sections.string',
+                                        default: 'str'
+                                    }
+                                ]
+                            },
+                        ]
+                    },
+                ]
+            }, expected: false },
+            { raw: {
+                content: [
+                    {
+                        type: 'sectio',
+                        name: 'general',
+                        i18n: 'settings.settings.general',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'copyOfGeneral',
+                        i18n: 'settings.settings.copyOfGeneral',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                default: false,
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'aSection',
+                        i18n: 'settings.settings.aSection',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 43',
+                                i18n: 'settings.settings.aSection.enableFeature43'
+                            },
+                            {
+                                type: 'selection',
+                                name: 'language',
+                                i18n: 'settings.settings.aSection.language.label',
+                                default: 'en',
+                                options: [
+                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
+                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
+                                ]
+                            },
+                            {
+                                type: 'section',
+                                name: 'section2',
+                                i18n: 'settings.settings.aSection.section2.label',
+                                content: [
+                                    {
+                                        type: 'string',
+                                        name: 'string',
+                                        i18n: 'settings.settings.aSection.sections.string',
+                                        default: 'str'
+                                    }
+                                ]
+                            },
+                        ]
+                    },
+                ]
+            }, expected: false },
+            { raw: {
+                content: [
+                    {
+                        type: 'sectio',
+                        name: 'general',
+                        i18n: 'settings.settings.general',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'copyOfGeneral',
+                        i18n: 'settings.settings.copyOfGeneral',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                default: false,
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'aSection',
+                        i18n: 'settings.settings.aSection',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 43',
+                                i18n: 'settings.settings.aSection.enableFeature43'
+                            },
+                            {
+                                type: 'selection',
+                                name: 'language',
+                                i18n: 'settings.settings.aSection.language.label',
+                                default: 'en',
+                                allowMultiple: 'false',
+                                options: [
+                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
+                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
+                                ]
+                            },
+                            {
+                                type: 'section',
+                                name: 'section2',
+                                i18n: 'settings.settings.aSection.section2.label',
+                                content: [
+                                    {
+                                        type: 'string',
+                                        name: 'string',
+                                        i18n: 'settings.settings.aSection.sections.string',
+                                        default: 'str'
+                                    }
+                                ]
+                            },
+                        ]
+                    },
+                ]
+            }, expected: false }
+        ])('returns valid: $expected', ({ raw, expected }) => {
+            const result = validateSettingsConfig(raw);
+            if (!result.valid) {
+                console.error('Error message:', result.error);
+            };
+            expect(result.valid).toBe(expected);
+        });
     });
 
     describe('validateEntry', () => {

src/features/settings/utils/settingsParser.js

@@ -0,0 +1,41 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { useSettingsConfigCacheStore } from '../stores/settingsConfigCacheStore';
+import { validateSettingsConfig } from './settingsValidator.js';
+
+/**
+ * Loads and parses the settings configuration via dynamic import.
+ * @returns {Promise<import('../types/settingsConfig').SettingsConfig>}
+ */
+export async function loadSettingsConfig() {
+    const settingsConfigCache = useSettingsConfigCacheStore();
+    let raw;
+
+    try {
+        raw = (await import('../settings.json')).default;
+        settingsConfigCache.set(raw);
+    } catch (e) {
+        throw new Error(`[settings] Failed to load settings.json: ${e.message}`);
+    }
+
+    const result = validateSettingsConfig(raw);
+    if (!result.valid) {
+        throw new Error(result.error);
+    }
+
+    return result.config;
+}

src/features/settings/utils/settingsValidator.js

@@ -117,13 +117,18 @@ export const validateFirstLevelSection = function validateFirstLevelSection (sec
  * @returns {{ valid: true, config: import('../types/settingsConfig').SettingsConfig } | { valid: false, error: string }}
  */
 export function validateSettingsConfig(raw) {
-    if (!raw || typeof raw !== 'object') {
-        throw new Error('[settings] Config must be an object');
+    try {
+        if (!raw || typeof raw !== 'object') {
+            throw new Error('[settings] Config must be an object');
+        }
+        if (!Array.isArray(raw.contents)) {
+            throw new Error('[settings] "contents" must be an array');
+        }
+        raw.contents.forEach((entry, i) =>
+            validateFirstLevelSection(entry, `contents[${i}]`)
+        );
+        return { valid: true, config: raw };
+    } catch (e) {
+        return { valid: false, error: e.message };
     }
-    if (!Array.isArray(raw.contents)) {
-        throw new Error('[settings] "contents" must be an array');
-    }
-    raw.contents.forEach((entry, i) =>
-        validateFirstLevelSection(entry, `contents[${i}]`)
-    );
 }

src/features/settings/views/SettingsView.vue

@@ -18,9 +18,9 @@ limitations under the License.
 import LeftSidebarLayout from '@/layouts/LeftSidebarLayout.vue';
 import SettingsPage from '../components/SettingsPage.vue';
 
-import settingsConfiguration from '../settings.json';
 import { getSettingRecursively } from '../utils/getSetting.js';
-import { computed, onMounted, ref, watch } from 'vue';
+import { loadSettingsConfig } from '../utils/settingsParser';
+import { onMounted, ref, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
@@ -28,27 +28,39 @@ const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 
-const settings = settingsConfiguration.contents;
+const settingsLoaded = ref(false)
+const settings = ref([]);
+const activeSectionContent = ref({});
+const activeSection = ref(null);
 
-const activePath = computed(() => {
+watchEffect(() => {
     const segments = route.path
         .split('/')
         .filter(Boolean);
 
-    return segments.slice(1, segments.length);
+    activeSection.value = segments.slice(1, segments.length).join('.');
 });
 
-const activeSection = ref(null);
-const updateSettings = async function updateSettings () {
-    const setting = getSettingRecursively(activePath.value, settings);
-    if (setting) {
-        activeSection.value = setting;
+const updateSettings = function updateSettings () {
+    if (activeSection.value) {
+        const setting = getSettingRecursively(activeSection.value.split('.'), settings.value);
+        if (!setting) {
+            router.push('/settings');
+        } else {
+            activeSectionContent.value = setting;
+        };
     } else {
-        await router.push('/settings');
-    }
+        activeSectionContent.value = { content: [] };
+    };
 };
-watch(route, (newRoute) => updateSettings(newRoute));
-onMounted(updateSettings);
+
+onMounted(async () => {
+    settings.value = (await loadSettingsConfig()).contents;
+    watchEffect(() => {
+        updateSettings();
+    });
+    settingsLoaded.value = true;
+});
 
 const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSidebarFunction) {
     if (matchMedia('(max-width: 48rem)').matches) toggleSidebarFunction();
@@ -69,7 +81,7 @@ const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSi
                         <RouterLink
                             :to="`/settings/${section.name}`"
                             class="button button-link link sidebar-section"
-                            :class="{ active: activeSection && activeSection.name === section.name }"
+                            :class="{ active: activeSection === section.name }"
                             @click="toggleSidebarIfSmallScreen(toggleSidebar)"
                         >
                             {{ t(section.i18n) }}
@@ -77,9 +89,12 @@ const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSi
                     </li>
                 </ul>
             </template>
-            <div v-if="activeSection">
+            <div v-if="!settingsLoaded" class="main-content--loading">
+                {{ t('loading') }}
+            </div>
+            <div v-else-if="activeSection" class="main-content--loaded">
                 <div class="settings-main-content">
-                    <SettingsPage :setting="activeSection" :path="activePath" />
+                    <SettingsPage :setting="activeSectionContent" :path="activeSection" />
                 </div>
             </div>
             <div v-else class="main-content--no-section">

src/features/settings/views/__tests__/SettingsView.test.js

@@ -16,8 +16,8 @@ limitations under the License.
 
 import SettingsView from '../SettingsView.vue';
 import { mountComponent } from '@/test-utils/mountComponent.js';
+import { flushPromises } from '@vue/test-utils';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
-import { nextTick } from 'vue';
 
 const settingsHoisted = vi.hoisted(() => [
     {
@@ -197,8 +197,10 @@ const settings = settingsHoisted.values();
 const originalCurrentSection = 's0';
 let currentSection = originalCurrentSection;
 
-vi.mock('../../settings.json', () => ({
-    default: { contents: settingsHoisted }
+vi.mock('../../utils/settingsParser', () => ({
+    loadSettingsConfig: vi.fn().mockResolvedValue({
+        contents: settingsHoisted
+    })
 }));
 
 vi.mock('vue-router', async (importOriginal) => {
@@ -233,7 +235,9 @@ describe('SettingsView', () => {
     describe('sidebar', () => {
         test('shows all top-level sections', async () => {
             const wrapper = getWrapper();
-            await nextTick();
+
+            await flushPromises();
+            await wrapper.vm.$nextTick();
 
             const sidebarItems = wrapper.findAll('.sidebar-sections-list > li');
             settings.forEach((setting, index) => {
@@ -250,27 +254,47 @@ describe('SettingsView', () => {
 
     describe('main', () => {
         describe('correct element', () => {
+            test('shows that it is loading', () => {
+                const wrapper = getWrapper();
+
+                const mainContentLoading = wrapper.find('.main-content--loading');
+                const mainContentLoaded = wrapper.find('.main-content--loaded');
+                const mainContentNoSection = wrapper.find('.main-content--no-section');
+
+                expect(mainContentLoading.exists()).toBe(true);
+                expect(mainContentLoaded.exists()).toBe(false);
+                expect(mainContentNoSection.exists()).toBe(false);
+            });
+
             test('shows that no section is selected', async () => {
                 currentSection = '';
 
                 const wrapper = getWrapper();
-                await nextTick();
 
-                const mainContent = wrapper.find('.settings-main-content');
+                await flushPromises();
+                await wrapper.vm.$nextTick();
+
+                const mainContentLoading = wrapper.find('.main-content--loading');
+                const mainContentLoaded = wrapper.find('.main-content--loaded');
                 const mainContentNoSection = wrapper.find('.main-content--no-section');
 
-                expect(mainContent.exists()).toBe(false);
+                expect(mainContentLoading.exists()).toBe(false);
+                expect(mainContentLoaded.exists()).toBe(false);
                 expect(mainContentNoSection.exists()).toBe(true);
             });
 
             test('shows main content', async () => {
                 const wrapper = getWrapper();
-                await nextTick();
 
-                const mainContent = wrapper.find('.settings-main-content');
+                await flushPromises();
+                await wrapper.vm.$nextTick();
+
+                const mainContentLoading = wrapper.find('.main-content--loading');
+                const mainContentLoaded = wrapper.find('.main-content--loaded');
                 const mainContentNoSection = wrapper.find('.main-content--no-section');
 
-                expect(mainContent.exists()).toBe(true);
+                expect(mainContentLoading.exists()).toBe(false);
+                expect(mainContentLoaded.exists()).toBe(true);
                 expect(mainContentNoSection.exists()).toBe(false);
             });
         });

src/locales/de.json

@@ -60,21 +60,6 @@
             "option": {
                 "ariaLabel": "Wählt die Option {option} aus"
             }
-        },
-        "settings": {
-            "appearance": {
-                "title": "Erscheinungsbild",
-                "contents": {
-                    "colorScheme": {
-                        "title": "Farbschema",
-                        "options": {
-                            "auto": "An Systemfarbschema anpassen",
-                            "light": "Hell",
-                            "dark": "Dunkel"
-                        }
-                    }
-                }
-            }
         }
     }
 }

src/locales/en.json

@@ -60,21 +60,6 @@
             "option": {
                 "ariaLabel": "Selects option {option}"
             }
-        },
-        "settings": {
-            "appearance": {
-                "title": "Appearance",
-                "contents": {
-                    "colorScheme": {
-                        "title": "Color Scheme",
-                        "options": {
-                            "auto": "Adapt to system color scheme",
-                            "light": "Light",
-                            "dark": "Dark"
-                        }
-                    }
-                }
-            }
         }
     }
 }

src/main.js

@@ -30,9 +30,6 @@ import rawFonts from './styles/fonts.json';
 import './styles/common.css';
 import './styles/variables/colors.css';
 
-import settings from './features/settings/settings.json';
-import { validateSettingsConfig } from './features/settings/utils/settingsValidator';
-
 (async () => {
     const fonts = rawFonts.map((font) => new FontFace(
         font.family ?? '',
@@ -57,8 +54,6 @@ import { validateSettingsConfig } from './features/settings/utils/settingsValida
     
     const pinia = createPinia();
     pinia.use(piniaPluginPersistedstate);
-
-    validateSettingsConfig(settings);
     
     createApp(App)
         .use(router)