Using Headless UI (Vue) with Laravel

[rugaard]

Hi everyone,

So, I'm not sure if this is an issue or an intended thing, which is why I'm starting this discussion instead of creating an actual issue 🤷‍♂️

Background

I'm working on a heavy authorization/policy/acl Laravel project where I wanna utilize Headless UI with Vue for the frontend. And for starters everything worked like a charm. I import the components into my SFC's and it just works.

But then I thought I wanted to make my SFC's more flexible by using slots. And then in these slots, I would just use the same Headless UI components as in SFC and everything would be fine. Wrong.

The first obstacle was actually using the Headless UI components in .blade.php files. Since the @headlessui/vue package does not come with an actual Vue plugin file, the components is not being registered in Vue's root component.

I therefore created a plugin, where I imported all the Headless UI components and registered into the Vue app.

import { Dialog, DialogDescription, /* .. etc .. */ TransitionRoot, TransitionChild } from '@headlessui/vue';

export default {
  install: (app: App, options?: any) => {
    app.component('Dialog', Dialog)
      .component('DialogDescription', DialogDescription)
      // ..... etc .....
      .component('TransitionRoot', TransitionRoot)
      .component('TransitionChild', TransitionChild);
  }
}

And what do you know. The Headless UI components still works in my SFC's and even without the need of having to import them individually. But did that fix my problem in my .blade.php templates? No.

Because all Headless UI components are named and exported as PascalCase Vue can not render them in-DOM:

When defining a component with PascalCase, you can use either case when referencing its custom element. That means both and are acceptable. Note, however, that only kebab-case names are valid directly in the DOM (i.e. non-string templates).

Oh well. Then I'll just register them with kebab-case as recommended:

export default {
  install: (app: App, options?: any) => {
    app.component('dialog', Dialog)
      .component('dialog-description', DialogDescription)
      // ..... etc .....
      .component('transition-root', TransitionRoot)
      .component('transition-child', TransitionChild);
  }
}

And what do you know. Now the Headless UI components work in my .blade.php templates. But .. what is that?. Three [Vue warn] messages, that keep popping up in my console on every single request. What do you know .. I'm apparently doing something illegal.

[Vue warn]: Do not use built-in or reserved HTML elements as component id: dialog
[Vue warn]: Do not use built-in or reserved HTML elements as component id: menu
[Vue warn]: Do not use built-in or reserved HTML elements as component id: switch

By having renamed them to kebab-case I apparently made some of the components conflict with existing HTML elements, which Vue has marked as "reserved". I tried to disable the Vue warning handler, to avoid these messages for a while. But to no avail.

Apparently the Headless UI components which "belongs" together. I.e. Menu, MenuItems and MenuItem. They have some form of "context awareness" meaning, that you can only use MenuItem if it's inside a MenuItems element. And since I've renamed the components to kebab-case (menu-items) it could not locate the expected parent (MenuItems) and therefore it aborted with an error.

Ideas?! Help.

Soooo, I'm at a loss here. I've run out of ideas and workarounds to try out. I can't see any way, I'm suppose to make Headless UI work with a "hybrid" project, where the frontend is not 100% Vue on a node server.

I must admit I'm slightly annoyed that I've payed money for Tailwind UI with the purpose of using Headless UI and then the Vue package doesn't even follow the official guidelines for using components. And even more annoyed that they're "dictating/locking" the way I wanna use each component.

I know it says the project is for Vue 3 only. But that is what I'm using in my Laravel project. I don't see anywhere that headless UI is only for 100% JavaScript/Node projects 😞

Anyway, I wanted to hear if any one of you have managed to get it working in a "hybrid" project or have any ideas on how to make it work?