Vocabulary: [Vue] Header Component and general component style discussion

[zackkrida]

Edit: Please create a component for the header as outlined in Example A.

Background Info

Time to talk vue components! First up is the header. There are some changes to the header design coming soon, but it's one of our more complex components so I think it is a useful one to discuss first. The main thing I'd like to with this ticket is determine our _code style_ for vue, and the overall api design for components we'd like to follow. I was a longtime Vue user, then a longtime React user, and now back to Vue, so I like paradigms from _both_ ecosystems.

Here are some examples. I think the main difference is whether we favor many sub-components, or a prop-heavier approach. I'd also like to decide a _naming convention_ for our components. Vue now recommends PascalCase for component names in non-dom templates (so MyComponent instead of my-component), and I wonder if we want to prefix/namespace component names, something like VocabularyButton or VocabularyCard but obviously shorter and cleaner.

Reference Image

Example A (This version wins!)

  <Header size="compact">
    <template v-slot:logo>
      <CCSearchLogoSVG /> <!-- This could be an imported SVG for example -->
    </template>
    <template v-slot:menu-items>
      <MenuItem is="a" href="/whatever" label="Item One" /> <!-- is will be 'a' by default -->
      <MenuItem href="/whatever" label="Item Two" />
      <MenuDropdown label="Item Three">
        <MenuItem href="/whatever" label="Item A One" />
        <MenuItem href="/whatever" label="Item A Two" />
      </MenuDropdown>
    </template>
  </Header>

Example B

<VHeader :logo="CCSearchLogoSVG" :menu-items="menuItems" size="big" />

let menuItems = [
  { href: "/page-one", label: "Page One" },
  {
    label: "Dropdown Page",
    children: [
      { href: "/page-three", label: "Page Three" },
      { href: "/page-four", label: "Page Four" },
    ],
  },
];

I would say Example B is simpler, but much stricter, while example A is more flexible but more convoluted. I tend to personally write things in the "B" style, but am _really_ open to either!

[dhruvkb]

I love subcomponents, they're so much more composable and customisable, compared to props. Just say one day, you have to add an external link in the header and want an icon indicating the external link alongside the text. The benefits of subcomponents become instantly clear. One of my all time favourite UI libraries, Semantic UI does this in their React components and it is so elegant.

As for the prefix, I think we should not prefix anything in our Vue Components at the library level and allow the application using our library to determine their own prefix by passing an argument to the install function. Or if we absolutely must, I think 'V' or 'Vocab' would be some good choices.