Pig Naughty Sauces is a small family business that sells small batch BBQ sauce out of their home and at a handful of stores in Pensacola, FL. They wanted a website to sell their sauce from online rather than relying on facebook. Check out the site I built for them here: Pig Naughty Sauces
I built the Pig Naughty site with Vue.js and Nuxt.js for the frontend, Bulma and Sass for styling, Nuxtent for the blog portion of the site, and Snipcart and Stripe to handle ecommerce.
This is the first time I have used a lot of these tools, and I have thoughts about all of them. I probably invested the most time getting to know Vue.js. Initial impression: It’s awesome and I will build many more applications using it. Coming from an Angular background and moving to Vue is pretty easy. It feels like writing react-y type of code in a sort of angular-y way. Specific things that I like about using Vue is single file components, dead simple component reuasability, and one way data binding.
Nuxt.js is a framework for server-side rendered Vue.js applications. However, it also has a nifty trick that allows you to generate a static version of your site, which you can use for JAMstack sites. I decided to use this approach for Pig Naughty because the speed, security,and reduced hosting costs fit my client’s needs. Moreover, Nuxt makes routing an after thought which is a huge plus!
I opted to use Bulma instead of bootstrap because I like how customizable the framework is. You can set the Sass variables very easily after you install bulma, and after that it is really easy to create an attractive and responsive UI using the framework. Also, it does not rely on jQuery - which does mean a little extra work for the developer, but also means you don’t have to include jQuery in the project and in my case can rely on Vue to do the heavy lifting.
My clients primary need was to have ecommerce capability for their site. I helped them achieve this with Snipcart and Stripe. Snipcart is a developer and JAMstack friendly cart that allows you to sell items easily from your page. Best part is you can set up the cart with HTML and CSS. Huge plus, and awesome service.
In addition to ecommerce, it was also important that my clients be able to blog. I used a nuxt extension called Nuxtent that allows writing content in markdown and pulling it onto the page via a simple API. You can follow the repository for this package here. It’s pretty new and there are obviously some bugs being worked out, but ultimately it helped me achieve my client’s goal.
In summary, I am proud of this site and amazed at all the new things I learned building it. If you like BBQ definitely check out Pig Naughty Sauces. Great people with a great and honest product - you can’t beat that. Vue and Nuxt are gamechangers for me, and I am working on a tutorial for building a simple blog with Nuxt and Nuxtent for an upcoming post. Thanks for reading, and stay tuned!
I also did some design work with Affinity Designer, including some flat icons that did not make the final cut on the site so I will include them here. Contact me if you have a use you’d like to use them for.