opdavies/oliverdavies.uk
1
0
Fork 0
Code Issues 1 Pull requests Projects 1 Releases Packages Wiki Activity Actions

Run prettier on all *.md files

Browse source 
```
prettier '{app,source}/**/**.md' --write
```
This commit is contained in:
Oliver Davies 2020-03-08 17:52:59 +00:00
parent a3ceeaf0f3
commit 85a10c545b
170 changed files with 5127 additions and 2282 deletions
Download patch file Download diff file Expand all files Collapse all files

48
source/_posts/published-my-first-npm-package.md
View file

@ -1,15 +1,24 @@
---
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.
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
- 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.
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:
@ -51,11 +60,16 @@ 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.
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`.
In my `base.html.twig` template, I’ve added `v-cloak` to the wrapper div within
the `body`.
{% verbatim %}<div v-pre markdown="1">
```twig
<body class="font-sans leading-normal">
<div id="app" v-cloak>
@ -63,11 +77,16 @@ In my `base.html.twig` template, I’ve added `v-cloak` to the wrapper div withi
</div>
</body>
```
</div>{% endverbatim %}
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.
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.
{% verbatim %}<div v-pre markdown="1">
```twig
<div class="border-bottom border-b border-gray-300 mb-6">
<div class="container mx-auto">
@ -82,11 +101,18 @@ Within my `navbar.html.twig` partial, I have a placeholder div that also contain
</div>
</div>
```
</div>{% endverbatim %}
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 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].**
**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