Enrich your new Nuxt 3 site with headless CMS content
We’ve been waiting for this ever since Vue 3 was released. Nuxt 3 is in public beta! What are the greatest improvements, and how can we use Nuxt 3 with a headless CMS?
Published on Nov 3, 2021
We’ve been waiting for this ever since Vue 3 was released. Nuxt 3 is in public beta! What are the greatest improvements, and how can we use Nuxt 3 with a headless CMS?
Published on Nov 3, 2021
In this article, I’ll introduce the most interesting new features of Nuxt 3, show how to fetch content from Kontent.ai, and provide you with a list of useful resources.
Nuxt used to be a static site generator for Vue.js. Now, they call it the hybrid Vue framework, as it does much more than just generate a few static files. It lets you implement a full-featured client/server app and decide on the rendering strategy for each page.
The new version has been available since October 12 and, among other features, brings these great improvements:
Are you excited enough to try Nuxt 3 for yourself? Then I have two pieces of good news for you 🤓.
deliveryClient
available in all pages and components.First, let’s create the Nuxt app with the Nuxt 3 CLI:
Then, install the Kontent.ai Nuxt3 module:
Next, add the kontent-nuxt3-module
as a build module in the nuxt.config.js
configuration file:
And define the projectId
(and other details of your project) in the same file under publicRuntimeConfig
:
Note: You see I’m using .env
file to store the app secrets, but you can also define them as string literals directly in the config file.
And you’re done! :-)
You can now use the deliveryClient
and fluent API in your pages and components with nuxtApp
:
It’s always easier to start with a template that has all the common features implemented. So if you want some inspiration, take a look at our Nuxt 3 sample app that features:
You’ll find it on GitHub.
And as I promised at the beginning, you can find below a list of useful Nuxt 3 resources that helped me a lot with the implementation. I hope they’ll give you a head start too:
Nuxt 3 is still in beta, and you may stumble upon features that don’t work well or are not documented enough. But you can already enjoy the developer quality of life improvements and get a preview of what will soon be possible on production.
If you’re a Nuxt fan, join us on Discord and tell us what you like the most about Nuxt 3 🤗.
Listen to our new podcast for practical tips, tricks, and strategies to make your content shine. From AI’s magic touch to content management mastery and customer experience secrets, we’ll cover it all.