Supercharge your Nuxt site’s interactive elements with sound!

Recently, one of the most exciting things to happen to me was Sarah Drasner of Vue, Nuxt, SVG and animation fame tweeting about my website!

I’ve been really enjoying articles by @dparksdev, like this one about Nuxt Table of Contents with Active States. They’re well-explained, plus he has these nice touches on his site like little interactions you can play with! https://t.co/B34W0EztRFpic.twitter.com/llgCatwOTB - Sarah Drasner (@sarah_edo) November 16, 2020

It’s safe to say that was a crazy day. Out of all the kind words I received, the most frequent piece of feedback I received was about my sites interactions. It’s true that interactions like the battery under my table of contents or an interesting train add a sense of joy and intrigue to an otherwise bland site. It gets people to stick around and explore and in turn, read more of your content!

One excellent way to facilitate interesting interactions is by adding sounds.

I’ll admit it’s a bit jarring sometimes, so it’s important to allow the user to choose if they hear these sounds on your site, and then save their preference for subsequent page visits.

This article will teach you how to add sounds to your Nuxt site, and leverage localStorage to save their sound preference!

#nuxt #vue #vuejs #nuxtjs #javascript