Building a menu tree using VueJs, TailwindCSS and HeadlessUI

What should I cover next? Leave a comment bellow!

In this video we'll build a menu tree component using VueJs, TailwindCSS, and HeadlessUI.

▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬

00:00 - Intro / focus
00:24 - HTML sidebar
01:21 - Style sidebar
02:24 - Turn nav HTML tree into an array of objects
05:10 - Create NavItem component
06:58 - Add HeadlessUI disclosures
08:28 - Add menu icons
09:49 - Default menu styles
11:07 - Hover menu styles
12:29 - Style disclosure OPEN state
14:14 - Style menu item ACTIVE state
15:22 - Open disclosures containing an active item

[jondoe]

Your videos are clean precise and right to the point, super easy to understand. 👍

[jameswong]

This is so helpfull, pls come out with more content like this :)

[almeralmazan]

Wow finally, this is what I'm waiting for, thank you @Constantin

[raymondmichael]

Your teaching makes me need to learn vuejs, such intuitive syntax, just few key strokes needed.
Please extend this into a blog or something, would like to see authentication, states and api integration.
You got 1+ sub

Greetings from Tanzania 🇹🇿

[billcawley]

Clear, concise and very useful indeed - thanks.

[Stockton]

Extra clear explanation! you've won my subscription! super underrated chanell, you need 100x more views!

[floresrosalinojr.]

great vid! i wonder how you'd persist the disclosure in a way that it won't close as you go to another child item page

[JamesWolfisz]

Any chance you could make a follow up adding transitions to the disclosures? 😊

[coding-in]

can you grouping all vue & tailwind content to playlist?

[danielohling]

How would you toggle the active state in this example with vue-router ?

[MrKarmaya]

Can you do a tutorial for building draggable nested lists like the WordPress menu builder?

[rahman]

what code editor are you using? i see it's not like vscode