[Docs] Examples idea

[benjamincanac]

An initiative was made in #4834 to create a "Blocks" or "Examples" section with real-life use-cases of Nuxt UI components but we still have to make the actual examples.

I could see in this page examples that doesn't fit inside specific component pages or components that are too custom to be built-in in Nuxt UI like:

• Auth pages with AuthForm
• Linear Filters feat: add Filters component #5434
• Event Calendar Event Calendar Component #5533

Feel free to comment if you have some ideas.

[dosstx]

The pain point for me is not having easily and readily available "layouts" to use. I know there are templates, but I don't think I've used any because they often contain things I don't need (and it takes time to reverse engineer and extract what I do need). For example, I would like battle tested layouts (especially on mobile) I can easily copy that is a layout that contains a sidebar , footer, and header. I know I can build it out using the available components, but that takes time and too much mental friction.

[KazimirPodolski]

@dosstx this combination works okey for me and on mobile too:

<UHeader>...my header...</UHeader>

<UMain>
  <UPage>
    <template #left>
      <UPageAside>
        ...my sidebar...
      </UPageAside>
    </template>
  </UPage>

  <RouterView/>
</UMain>

<UFooter>...my footer...</UFooter>

I had to extract and share my UNavigationMenu between UHeader and the sidebar because on mobile UPageAside disappears and a nav button in UHeader appears (just try switching it in devtools, you'll see).

[abhishek-junghare]

Agreed. Everything inside the Page and Dashboard sections of the components list consists of larger components made out of smaller components, so they’re technically viewed as blocks.