Publishing my first-ever npm packages

I'm continuing to work on a few different Nuxt projects after creating this website, but I quickly hit a point where I was tempted to copy code that I had already created, so I paused my projects and returned to my website with the goal of compartmentalizing those useful bits for reuse. After all, this is why the JavaScript ecosystem has npm!

I extrapolated the structured data component that I previously created into a Vue component called structured-data (published on npm as a scoped package: @andrewzigler/structured-data). To achieve this, I stripped out a lot of my customized code for my own website and create an interface to actually accept this data instead. Then I passed this data back in from the individual website. This challenged me to make my own utility more universal and resilient, and also forced me to clean everything up for its own independent publishing. Getting this package on npm proved to be a huge endeavor, as it was not only my first-ever package, but I also had to configure Babel to transpile the exported Vue component. It ended up being a challenging task but I learned a lot about publishing modern JavaScript and single-file components in the process.

Then I looked at how I was assembling page metadata and realized that reusing that recently-researched, 2019-compliant code would be really beneficial to my future projects and their SEO. If anything, it would allow me to easily update and maintain that code over time. I moved all of those functions into their own framework-agnostic library called head-helper and published it on npm as my second scoped package: @andrewzigler/head-helper. This was a lot easier, as I decided not to transpile and simply export an ES6 class with static functions (JavaScript's equivalent of class methods). When I added it back to Nuxt, I configured the project to transpile the library before using it, and then easily slotted the library back in where it was before.

After a little testing, I had this website back to full functionality but with all of its custom SEO functionality imported from newly-externalized libraries. Now I'm turning back to my other Nuxt projects and easily importing all of that hard work. It's great to find opportunities to reuse code I've created, and it shows I found a problem that needed addressing. I've grown rather obsessed with metadata and structured data, so it was fun to apply those interests and create reusable tools.