Does importing usePage() repeatedly affect performance?

I've finalized setting up dark mode settings in my VILT project using useDark and useToggle from useVue Library in my layout template.

The problem is that I'm using many external components that applies dark mode using a boolean prop, so using tailwind's dark: property does not work, and passing isDark property from the main layout to the children component isn't feasible since I have many components. So I ended up importing useDark component on every page that contains these external components so that I can pass isDark parameter to apply dark mode.

My question is:

Is there a more practical and cleaner solution to this?
Per my understanding, importing 1 library repeatedly within the same project does not affect performance or project size after building, except that chatGPT told me it can have an effect. Is it true that this can have an impact on the project, especially that useVue is not a lightweight library?

jlrdw

2 years ago

Level 75

Read the chapter that covers how a request works, laravel starts all over every request anyway.

ahmedde

2 years ago

Level 2

@jlrdw Isn't this front-end related? Laravel is not involved in the process so far.

ahmedde

2 years ago

Level 2

I ended up making a composable to search if <html> contains dark class:

import {ref} from "vue";

export function useIsDark() {
    const mode = ref(document.documentElement.classList.contains('dark'));
    const darkModeObserver = new MutationObserver(() => {
        mode.value = document.documentElement.classList.contains('dark');
    });
    darkModeObserver.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ['class'],
    });
    return mode;
}

does the same job as useDark() but lighter.

Snapey

2 years ago

Level 122

why do components care? Dark mode is set at the page level?

ahmedde

2 years ago

Level 2

@Snapey I don't understand their reasoning for implementing it this way. It's Vue DatePicker Component, and they decided to enable dark mode by passing dark prop:

<VueDatePicker v-model="date" dark />

Perhaps they want it to be customizable on demand?

Please or to participate in this conversation.