Comoonity Website

The Nuxt big thing!

Whilst researching the latest in software development, I came across Nuxt3 which had undergone some changes and upgrades over the past few months. Version 3.0.0 had been released back in November 2022 and as of January 2023, Nuxt 3 now has a consistent release cycle and is stable. Having built the Barerooms website (learn more) in Nuxt v2, I decided to learn the new version.

I completed Nuxt's official tutorial which explained their key concepts and with ample documentation available, I was able to learn all I needed to build an optimised website. However, I think there is no better way to learn and to demonstrate your newly gained skill then through a project.

I had done plenty of work for Comoonity and upon inspecting their website, I thought I could try my hand at making a smoother and quicker website whilst maintaining its SEO capabilities. This was also the first website which was entirely designed by myself.

The current website

The current website is built in Laravel, is the top result on searching Comoonity and is highly customisable through a Django admin CMS. This was built by another experienced developer who also as it happens was mentor for DevOps.

The website itself was highly customisable thanks to it being connected to a Django application using its built in admin interface. Django is a powerful framework built in Python which hosts a plethora of features that empower it for web development. The key one is this project was its admin interface.

Defining models in a database which then defined the content on the website like:

• Pages

• Links

• Modules

• Assets

The interface would automatically provide a UI that was simple enough to customise these models which would be reflected in the Laravel application as the actual website. This was a great product that has been used by other companies due to how robust it is. Below is a screenshot of the home page for this version of the website.

The website worked great but having learnt Nuxt, Gatsby, Gridsome and a bit of Next.js, these types of multipage websites just don't compare when it comes to UI/UX. Using these libraries/frameworks which offer all the advantages of single page apps without sacrificing the SEO functionalities, I decided to remake this website as a test for Nuxt3.

No designer? No problem

Creating a website isn't just about functionality. Arguably the most important part is how the website looks. The fastest, smoothest, most SEO perfect website is useless if it looks bad. And as I'm not a designer or very artistic I would've been in a bit of a pickle.

Fortunately, with a bit of luck and research I found https://tailwindui.com. Tailwind CSS is my go to choice for a CSS framework. The sheer scale of classes available, all of which are customisable thanks to a config file and easily responsive to screen size and dark mode is why I use it almost all the time. It is also optimised for production thanks to:

• Tailwind has lots of classes but will purge any unused classes for production

• Removing any whitespace and comments to reduce file size and improve load times

• Prefixing vendor specific CSS so it works cross browser and only generating when needed

• Concatenating any split CSS files so all styles are available on 1 http request

• Only generate the responsive classes that are need

Back to TailwindUI. This website offers "beautifully crafted UI components" written with tailwind CSS and offers the code in either: Pure HTML, React or Vue code. Handy! Using the free components they offer, I was able to create a website that looked good. See screenshot of homepage below:

It took me about a 2 days to build all the websites pages, both light and dark mode varients and content written with help from ChatGPT. That being said, I still wasn't quite done yet.

The block for their story

The website would remain fairly static but there was a section which would be edited and added to constantly which was the blog.

The idea was to allow non developers to easily add blog posts to the website and publish them without the need for me. My usual choice for a headless CMS would be Contentful but upon doing some research there wasn't much about connecting it to Nuxt. However there was plenty on connecting it to another CMS called Storyblok.

Storyblok is a powerful headless content management system (CMS) that enables developers and content creators to collaborate seamlessly. One of the standout features of Storyblok is its structured content approach which allows users to create custom content types. This flexibility enables developers to design components that perfectly fits their application's needs, while content creators can easily manage the content. Additionally, Storyblok offers a visual editor that enables non-technical users to make changes directly on the website.

With Storyblok connected, I created a content type called Article and added all the fields for the non technical staff to fill in. I was then able to create an Article component in Vue which would take all these plus the rich text content and display it on screen. Best part, the visual editor would show a live preview letting the user see how it look before its even published. See screenshot below (using local host as don't want to show stage env):

Additionally, Storyblok have 2 types of access keys which show all content and only published content. Meaning I could deploy a stage environment which shows the draft articles while the live website would only show the published ones.

This was a great discovery for me as it meant I could offer website that could be customised by the client themselves rather than needing me for everything. Which would save both of us time and increases the value of the website itself.

Optimised for SEO

The last essential goal I wanted to accomplish with this website was to make it optimised for SEO. One of the main reasons I was using Nuxt and not just vanilla Vue was for its effectiveness in SEO.

Nuxt is good for SEO because it offers built-in server-side rendering (SSR), which allows search engines to crawl and index the fully rendered HTML of each page. This ensures that search engines can easily discover and understand the content of your website, leading to better visibility in search results. Nuxt also provides automatic generation of meta tags, dynamic routing, and SEO-friendly URLs, making it convenient to optimize page titles, descriptions, and other essential SEO elements.

A simple improvement was the useSeoMeta composable which let you define the page's meta tags. I specifically used the useServerSeoMeta as I want the meta tags to be served on the server which is what is crawled by the search engines. Below is what the landing page's looks like:

useServerSeoMeta({ title: 'Comoonity', ogTitle: 'Comoonity', description: 'Local people helping local businesses', ogDescription: 'Local people helping local businesses' });

This was easy with the static pages but the blog and author pages that would change dynamically required something different. As it was being fetched from Storyblok, I installed an app titled SEO which added meta fields to the content-types and allowed me to dynamically write the tags for each story. I was then able to populate this in Nuxt using the following:

useServerSeoMeta({ title: () => story.value.content.metafields.title, ogTitle: () => story.value.content.metafields.title, description: () => story.value.content.metafields.description, ogDescription: () => story.value.content.metafields.description });

---

Nuxt also has an SEO kit which came with a lot of useful tools but one of my favorites was nuxt-og-image. This would generate a og:image which what is used when sharing links on social media to generate a preview or card image. I was able to build a Vue component which would be displayed when shared on social media. See screenshot below:

Final Touches

One of the final changes was to make the website work once deployed and only show published content whilst allowing users to make changes and see them in the visual editor. Also the website was a static web application, meaning anytime new content was published, nuxt generate needed to be ran and the dist folder deployed.

First I updated the pages so that it would only fetch published content, but if certain parameters were added which specifies that its the Storyblok editor, fetch even a draft version. This meant the changes would be reflected and previewed in the editor without effecting the live site.

The stage env for the website would use a preview access token which would allow both published and draft content could be shown and edited. However, the live site would use a public token which could only fetch published content.

As for automating the deployments, Storyblok already offered webhook integrations which could trigger whenever:

• Content was saved - Updating the Stage/Preview environment

• Content was published - Updating the live site

I love how this project ended up. It gave me some confidence in my design skill, taught me a new framework, added more tools to my SEO tool belt and introduced me to Storyblok. I am now able to make a website clients can update themselves and in real time see the effects