Yesterday I published my first module onto NPM, and it’s a plugin for Tailwind
CSS to be used alongside Vue.js.
The plugin adds classes for showing and hiding elements in different display
variations in combination with Vue's
v-cloak directive, which I originally saw
in the first 'Building Kitetail' video.
These are useful for when you want an element to be visible whilst Vue is
compiling, and hidden afterwards.
Here is the compiled CSS that is added by the plugin:
The v-cloak directive exists on an element until Vue finishes compiling, after
which it is removed. Therefore adding a v-cloak-block class to an element will
make it display: block whilst Vue is compiling and the element is cloaked, and
display: none afterwards when the Vue markup is compiled and rendered.
In my base.html.twig template, I’ve added v-cloak to the wrapper div within
the body.
Within my navbar.html.twig partial, I have a placeholder div that also
contains the site name, which is instantly visible but has the v-cloak-block
class so it’s hidden once Vue has compiled and the Navbar Vue component is
visible instead.
I was originally surprised that these classes weren’t included as part of
Tailwind or as part of an existing plugin, but as I’ve already used these styles
on several projects that include Vue.js with Symfony or Sculpin, it made sense
to extract it into a plugin and make it available as a npm package which I can
easily add to any project - as well as making it easier to maintain if I need to
add additional variations at a later point.
I'm an Acquia-certified Drupal Triple Expert with 17 years of experience, an open-source software maintainer and Drupal core contributor, public speaker, live streamer, and host of the Beyond Blocks podcast.