Global options

[VividLemon]

A requirement of the library is to have a mechanism for creating "global options". Such as setting the default for props.

How exactly this would work idk yet.

But for instance this could be applied to having the nuxt module convert BLinks to NuxtLink (instead of RouterLink) by default, and other Nuxt specific options

[VividLemon]

Related to #1569

[xvaara]

@VividLemon maybe we use provide/inject, so have can have:
app.provide(GlobalOptionsKey,{nuxtLink: true})
const options = inject(GlobalOptionsKey, defaultOptions)
You could also provide different options to a subset of component tree with this approach.

[VividLemon]

Inject would work well for orchestrating the defaults, but I'm not sure how you would get it to influence prop defaults.

The prop defaults needs to be an object literal. I don't think you're allowed to do some complex stuff.

Alternatively, merging the values at runtime could work. Though not super ideal as props have nice features like template unwrapping

[Kronhyx]

any update on this ?

[VividLemon]

Plan:

The system is inspired by https://vuetifyjs.com/en/features/global-configuration/#using-in-custom-components

The only con is that the default unwrapping of props in template is prevented. A minor nuisance, but unavoidable.

The way I believe this works is, the options from the configurator get placed in a provide(), the useDefaults accepts the components props & component name.

useDefaults is essentially

// Psuedo, there is a way to make the name and props object strongly typed. I assume all props would need to be ComponentProps.ts imported style, rather than some declared inline, and some not

export default (name: string, props: Record<string, unknown>) => {
  const injectedProps = inject('propsString')

  const mergeDefaults = computed(() => ({...injectedProps, ...props})) // Is props reactive?

  return mergeDefaults // Would reactive(mergeDefaults) be more straightforward to use?
}

Then each component would behave similarly to the steps shown in Vuetify

In addition, some research could be done into how Vuetfiy actually creates their "withDefaults" function, perhaps there's some better methods they use to take inspirations from. The nested defaults isn't addressed in the example I gave, but could be interesting