- Issue created by @fago
- 🇺🇸United States glynster
@fago, is there a bare minimum you’d like to see here? For example, here are a few suggestions:
- Base theme with Nuxt UI (Tailwind).
- Admin menu.
- Sticky main navigation.
- Footer.
- Light/dark mode toggle.
The components might be tricky since they depend on the Drupal setup. For instance, we use Paragraph Layouts.
I’d love to help—just need a solid plan to get started.
- 🇦🇹Austria fago Vienna
I agree, this would be a great option to have as an option. I guess it would make sense to build it already using the new nuxt-ui alpha version.
However, before we do that, let's clarify how do we build this starter-kits?
Questions I'm wondering about:
* Should it work like a starter-kit, or like a nuxt-module, so you can update later on? I guess starter kits.
* Should it be a nuxt-layer you pull in once? Or just a another repo like the nuxt3 demo which has a couple of components added? The repo seems great, but had the disadvantage that we need to keep it maintained and pull in nuxt updates etc for people to have updated components still..
* Where should we host them? github vs drupal gitlab. I think it would be preferable to keep it on drupal,org, but until ✨ Allow GPL-Compatible Licensing for Non-Derivative Code and Drupal.org General Projects Active is fixed, I think we cannot really use drupal gitlab. Thus github and some sort of of maintained registry page (at our doc website) like it's done for nuxt modules would probably work also. - 🇦🇹Austria fago Vienna
I guess best would be a nuxt-layer, since it would take care of dependencies + registering the components with a low-prio OR providing some-sort of install hooks the copies over components automatically during install. thoughts?
- 🇺🇸United States glynster
@fago, here is what I have generated for a Nuxt layer:
https://github.com/StirStudios/stir_nuxt_base
At the moment, it is suited to our project needs, though it may include more than necessary. Here’s what it does currently:
- Wraps Lupus CE and other checks into a composable.
- Checks for user roles and session, returning an admin editing menu. I didn’t see the need to include the full Drupal admin menu—just the editing tabs.
- Adds a Vite hook so Nuxt dev tools work locally with DDEV.
- Nuxt 4 compatibility.
- Smooth scroll.
- Page transition.
- Turnstile for forms (currently webform, with CSRF token fetching).
- Robots.
- Sitemap (we generated an API on the Drupal end).
- Nuxt UI (as the base for ease of theming).
- Heavily integrated with Paragraphs, as you’ll see.
- Paragraph entity edit links
This is my first time working with layers, and it made sense to start with Nuxt 4 compatibility. The webform is quite flexible, allowing for many options, and basic validation is handled via Nuxt UI and Yup. I’ve also implemented basic theming for user login forms, though there’s less flexibility since we don’t have the same control over theming as we do with webforms.
- 🇦🇹Austria fago Vienna
@glynster - wow, that's amazing!!
a few questions and thoughts:
- What dependencies / requirements does it have for testing it? Could it be just run with the gitpod demo link and it mostly would work?
- component style - I wonder why you are moving the types out of the components. Wouldn't it be easier to see what's going on if all is within the component, as in https://github.com/drunomics/lupus-decoupled-nuxt3-demo/blob/main/compon...
- we recently moved the best-practice suggestion to just stay with kebap-case for custom elements, so the 1:1 mapping is easier to see. e.g. see https://github.com/drunomics/lupus-decoupled-nuxt3-demo/blob/main/compon.... Any thoughts/concerns on adopting this?
- sitemap, interesting - we just use simple_sitemap module with a suitingly configured base-url + proxy it through on the frontend. Any thoughts on pros/cons of both approaches? I guess we should open a dedicated issue for it!
- the paragraphs seem great! I guess it would be ideal to pair it with a drupal-recipe which adds the necessary paragraph types. For a theme, that seems a bit out of scope though. So maybe the theme would instead just provide a set of optional components, what in the end, they are. So maybe it's a matter of simply documenting which components are there for optional use and maybe have a way to preview them?> Adds a Vite hook so Nuxt dev tools work locally with DDEV.
I guess we should add this to the nux3 demo also! - 🇦🇹Austria fago Vienna
added sub-issue 📌 Document ways of creating sitemaps Active
- 🇦🇹Austria fago Vienna
added two new "themes", simply as alternating demo starters. That way we can have multiple gitpod URLs for testing all of them.
Until we have anything better, let's use this.See https://lupus-decoupled.org/get-started/play-online for a list of frontends, there is one nuxt with shadcn and one nextjs starter.
@glynster: I would love to add https://github.com/StirStudios/stir_nuxt_base there as well. Is it a layer or a full repo now? If a layer, I guess we could just add a small wrapper demo-repo to make it work witih gitpod? I'm opening a dedicated sub-issue for it!
- 🇺🇸United States glynster
@fago, it is a Nuxt layer and intended as a solid base. The issue is the customizations (Paragraphs, Layouts). How about I setup a branch that is more streamlined and more basic like what you have with your other 2 options? I have also utilized the app.config for theming overrides. Then you can see how to integrate this? The idea is to add the git via the package and then extend from within the Nuxt config. Very little friction. Let me know your thoughts.
- Status changed to Fixed
4 months ago 5:29pm 7 December 2024 Automatically closed - issue fixed for 2 weeks with no activity.