I have user settings in my Inertia & Vue app which can potentially change how any view is rendered. I'm having trouble getting them to load automatically on every page, and at the right time. I've managed to inject getUserSetting() into every view without too much difficulty.

In userSettings.ts, getUserSetting() is called from the loading page before initialiseUserSettings() is which means the data it's looking for isn't set yet. Also, I had to get the data in a weird way. At the time that mounted() is triggered in app.ts, props.auth is (still?) undefined, so I had to use props.initialPage.props.auth instead.

How can I fix these issues?

userSettings.ts

import {DefaultUserSettings, UserSettings} from "@/types/userSettings";
import {reactive} from "vue";

let defaultUserSettings: DefaultUserSettings;

const userSettings = reactive<UserSettings>({});

export function getUserSetting(key: keyof DefaultUserSettings): any {
  return userSettings[key] ?? defaultUserSettings?.[key];
}

export function initialiseUserSettings(defaultSettings: DefaultUserSettings, user: any) {
  defaultUserSettings = defaultSettings;

  if (user.settings) {
    Object.assign(userSettings, user.settings);
  }
}

const saveUserSettings = () => {
  localStorage.setItem("user_settings", JSON.stringify(userSettings));
};

export {userSettings, defaultUserSettings, saveUserSettings};

app.ts

import './bootstrap';
import '../css/app.css';

import { createApp, h, DefineComponent } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from 'ziggy-js';
import { initialiseUserSettings } from '@/store/userSettings';
import { onMounted } from 'vue';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob<DefineComponent>('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        const RootComponent = {
            render() {
                return h(App, props);
            },
            mounted() {
                if (props.initialPage.props.auth && props.initialPage.props.auth.user) {
                    initialiseUserSettings(props.initialPage.props.defaultUserSettingsFlattened, props.initialPage.props.auth.user);
                }
            },
        };
  
        createApp(RootComponent)
            .use(plugin)
            .use(ZiggyVue)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

const storedDarkMode = localStorage.getItem('dark-mode');
if (storedDarkMode === 'enabled') {
  document.documentElement.classList.add('dark');
}