5 blog posts tagged Nuxt

Generated Excerpts for Nuxt3 Content

  • đź“…
  • đź“ť 377
  • đź•™ 2
  • 📦 Development

Nuxt3 has been my stack of choice for a while now and it was time to port my site over from Nuxt2 — an exercise in itself I should blog about — but more concretely is the idea of excerpts.

Basically when you have a list of articles you want to show a short snippet of the article to entice the reader to click on it. This can either be the description if it’s a simple one-liner used in a card for example, or it can be the start of the article itself. Nuxt’s Content v2 supports generating excerpts for you by taking the content up to the <!--more--><!--more--> marker in the text as the excerpt.

Nuxt Content v1 content.db database & file size

I’ve been using NuxtJS successfully for a number of client sites, and this one, for quite a while. One of my clients, MKG Marketing, has produced a lot more content than the others with over 200 podcast episodes most containing a full transcript. It’s been going very well with them maintaining all the markdown content in CloudCannon and the site itself being built and published with CloudFlare pages.

MKG, like DamienG.com, is a Nuxt 2 site I haven’t upgraded yet — the upgrade Nuxt guide is a bit daunting and there’s some Nuxt Content specific migration guidance to go through as well.

Email form sender with Nuxt3, Cloudflare, Brevo & reCAPTCHA

I’ve been using Nuxt quite extensively on the static sites I work on and host and use Cloudflare Pages to host them. It’s a great combination of power, flexibility, performance and cost (free).

While one of the sites I manage uses ActiveCampaign successfully for both their newsletters and contact forms, this latest customer just wanted plain emails ideally with no subscription involved.

Rendering content with Nuxt3

  • đź“…
  • đź“ť 749
  • đź•™ 4
  • 📦 Development

I’ve been a big fan of Nuxt2 and Nuxt3 is definitely a learning curve and I have to admit the documentation is a bit lacking — lots of small fragments and many different ways to do things.

I basically wanted a simple example or page that looks at the slug, finds the markdown content for it and renders it unless it’s missing in which case returns a 404. Oh, and I want to use Typescript.

Adding reading time to Nuxt3 content

  • đź“…
  • đź“ť 452
  • đź•™ 3
  • 📦 Development

I’ve been using Nuxt2 quite a bit for my sites (including this one) and am now starting to use Nuxt3 for a few new ones and am finding the docs lacking in many places or confusing in others so hope to post a few more tips in the coming weeks.

Today we have the “reading time” popularised by sites like Medium.