index.vue as entrypoint

[Papipo]

Is it possible to have components whose entrypoint is /ComponentName/index.vue? and then use ComponentName in v-component?

Thanks!

[Valian]

Hi @Papipo!

LiveVue resolves component names based on components object you passed to the getHooks function.

To accomplish what you want, it should be enough to adjust components object a bit, from:

export default {
  // it might be slightly different in your case
  ...import.meta.glob('./**/*.vue', { eager: true }),
  ...import.meta.glob('../../lib/**/*.vue'),
}

to

const mapKeys = (object, cb) => Object.entries(object).reduce((acc, current) => {
    const newKey = cb(current[1], current[0], object);
    acc[newKey] = current[1];
    return acc;
  }, {});

const components = {
  // it might be slightly different in your case
  ...import.meta.glob('./**/*.vue', { eager: true }),
  ...import.meta.glob('../../lib/**/*.vue'),
}

export default mapKeys(components, (key) => key.replace("/index.vue", "")

Hopefully this solves your problem! Maybe I could do it by default in the library, it seems to make sense 👍

[Valian]

@Papipo released in 0.4.1. Please check, your use case should work out of the box 💜

[Papipo]

Oh my, amazing, thanks!! 🙇🏽