started working with tailwind css, at first it really seemed impossible to code responsive menu with hierarchy in nuxtjs. NextJs has lots of nice template but nuxt seems behind , cruip sells templates for vue but not for nuxt 3, not yet though , and I finally found a nuxt2 template , which has been out there for more than 2 years (github). Quick research on available tailwind snippets brought no more than partial answers.
- nice dropdown effect here but not responsive
https://tailwindcomponents.com/component/navbar-using-css-only/landing - responsivness quite common in tailwind
https://www.tailwindtoolbox.com/templates/responsive-header
therefore i decide to rewrite all from scratch. here is the process, and you can download the first version of a NUXT3 tailwind template on github
pnpm dlx nuxi@latest init nuxtwavetailwind
note : on default nuxt install when I generate I get a strange error, solution here : pnpm add unstorage, still generates warnings but does generate
Error: Could not load /opt/homebrew/lib/node_modules/@nuxt/devtools/node_modules/unstorage/drivers/fs-lite.mjs
next command : npx nuxi@latest module add tailwindcss
then npx tailwindcss init
then pnpm i -D aos, etc...
Features
- WaveIcon.vue custom component for minimal set of icons : after trying serveral nuxt modules for icons (icons-tw and nuxt-mdi), I encountered many problems (vite problems for the first one and html rendering issues for the second one) and decided to write my own component, taking svg from heroicon website
- Aos animations : Aos is a good library for starting to play with html element animations, but again as above I had to stay away from the official nuxt aos implementation and use my own plugin definition
Changelog
- introducing page mode : full ( overlapping transparent fixed menu) or pad ( standard fixed menu, opaque)
Alternatives
alternatives to my tailwind starter can be found on https://nuxt.com/templates