Feature: Namespace separator

[7architect]

What about namespace separator?

Example:

components
| - Dialog
|---- Dialog.vue
|---- Window.vue
|---- Header.vue
|---- Footer.vue

Page.vue

<Dialog> <!-- this mathes to a component named as the directory in which it is located -->
    <Dialog.window>
        <Dialog.window.header>  <!-- ... -->  </Dialog.window.header>
        <Dialog.window.Content> <!-- ... -->  </Dialog.window.content>
        <Dialog.window.footer>  <!-- ... -->  </Dialog.window.footer>
    </Dialog.Window>

[chasegiunta]

I used a custom resolver to accomplish this on my end, it does require aliasing @ to your /src directory (which most folks do):

(componentName) => {
  if (componentName.includes(".")) {
    const componentDirectory = "components";
    const componentPath = path.join(
      componentDirectory,
      componentName.replace(/\./g, "/"),
    );
    const from = `@/${componentPath}.vue`;
    return { name: "default", from: from };
  }
},