118 lines
3.1 KiB
Markdown
118 lines
3.1 KiB
Markdown
|
---
|
|||
|
|
title: Published my first NPM package
|
|||
|
|
date: 2018-12-16
|
|||
|
|
excerpt: Yesterday I published my first module onto NPM, and it’s a plugin for Tailwind CSS to be used alongside Vue.js.
|
|||
|
|
tags:
|
|||
|
|
- npm
|
|||
|
|
- tailwind-css
|
|||
|
|
- vuejs
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
Yesterday I published my first module onto NPM, and it’s a plugin for [Tailwind
|
|||
|
|
CSS][tailwind] to be used alongside [Vue.js](https://vuejs.org).
|
|||
|
|
|
|||
|
|
The plugin adds classes for showing and hiding elements in different display
|
|||
|
|
variations in combination with Vue's
|
|||
|
|
[v-cloak directive](https://vuejs.org/v2/api/#v-cloak), which I originally saw
|
|||
|
|
in [the first 'Building Kitetail' video](https://youtu.be/XUXpcbYQ_iQ?t=2360).
|
|||
|
|
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:
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
[v-cloak] .v-cloak-block {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[v-cloak] .v-cloak-flex {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[v-cloak] .v-cloak-hidden {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[v-cloak] .v-cloak-inline {
|
|||
|
|
display: inline;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[v-cloak] .v-cloak-inline-block {
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[v-cloak] .v-cloak-inline-flex {
|
|||
|
|
display: inline-flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
[v-cloak] .v-cloak-invisible {
|
|||
|
|
visibility: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.v-cloak-block,
|
|||
|
|
.v-cloak-flex,
|
|||
|
|
.v-cloak-inline,
|
|||
|
|
.v-cloak-inline-block,
|
|||
|
|
.v-cloak-inline-flex {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
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`.
|
|||
|
|
|
|||
|
|
<div v-pre markdown="1">
|
|||
|
|
|
|||
|
|
```twig
|
|||
|
|
<body class="font-sans leading-normal">
|
|||
|
|
<div id="app" v-cloak>
|
|||
|
|
{# ... #}
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
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.
|
|||
|
|
|
|||
|
|
<div v-pre markdown="1">
|
|||
|
|
|
|||
|
|
```twig
|
|||
|
|
<div class="mb-6 border-b border-gray-300 border-bottom">
|
|||
|
|
<div class="container mx-auto">
|
|||
|
|
<div class="block py-5 v-cloak-block">
|
|||
|
|
{{ site.title }}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<navbar
|
|||
|
|
site-name="{{ site.title }}"
|
|||
|
|
page-url="{{ page.url }}"
|
|||
|
|
></navbar>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
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.
|
|||
|
|
|
|||
|
|
**You can view [the package on npmjs.com][npm], and [the code repository on
|
|||
|
|
GitHub][github].**
|
|||
|
|
|
|||
|
|
[github]: https://github.com/opdavies/tailwindcss-vuejs
|
|||
|
|
[npm]: https://www.npmjs.com/package/tailwindcss-vuejs
|
|||
|
|
[tailwind]: https://tailwindcss.com
|