Changing Component defaults globally?

[summerset-zz]

is there any way to set certain component initial prop globally, like, changing size prop of every NCard to small, or changing initial NButton prop secondary to true?

[07akioni]

It would add many runtime overhead and doesn't provide much irreplaceable ability so we won't consider add the feature.

[mitya33]

Right, but at the same time it's far from ideal to have to do the following, for example, in 100 places in your project:

<n-image src='...' width='24' />
                          ^^

Obviously one can read the value from a store, but it still feels a little wasteful having to specify the same prop/value over and over.

[summerset-zz]

Hi @mitya33 :
After I opened the discussion I use another comp to wrap it. for example in your reply:

<!-- the comp NImageWrapper-->
<template>
    <NImage v-bind="NImagePropWithDefaults" />
</template>

<script setup lang="ts">
import { NImage } from 'naive-ui';
import { PropType, computed } from 'vue';
const props = defineProps<{
    nImageProps?: Partial<PropType<typeof NImage>>;
}>();
const NImageDefaults: Partial<PropType<typeof NImage>> = {
    width: 24, // your defaults goes here
};
const NImagePropWithDefaults = computed(() => {
    return {
        ...NImageDefaults,
        ...(props.nImageProps ?? {}),
    };
});
</script>


<!-- the call-->
<template>
    <div class="debugview-wrapper">
        <NImageWrapper
            :n-image-props="{
                src: './static/wargame/icons/AP.png',
            }"
        />
    </div>
</template>
<script setup lang="ts">
import NImageWrapper from './NImageWrapper.vue';
</script>

there should be better ways but this will work :)

[mitya33]

Yeah that's pretty cool, but still feels like it should be unnecessary. Other component frameworks support default props so it would be dope if Naive found a (performative) way to achieve this. Nice workaround, though.