Headless CMS for small websites with Nuxt Content

Sunscrapers Emblem

Bartosz Chronowski

22 March 2022, 8 min read

thumbnail post

What's inside

  1. Problem
  2. Solution
  3. How To
  4. Conclusion


Nowadays small companies struggle with the necessity of having a website that is easy to maintain, doesn't cost a fortune and is easily editable. Considering the above requirements, the first solution that comes to everyone's mind is Wordpress. It's one of the most popular content management systems, which is free. Secondly with, in many cases, paid themes and extensions, users can create a website without coding knowledge just by dragging and dropping blocks around. 

There are also many companies specializing in Wordpress development, since it's been around for almost a decade now, so there is no problem with creating a tailored solution if the user does not have time or skills.

However I do find Wordpress not as user-friendly as most would think and not solving all the challenges in modern web development and UX. Its extremely heavy codebase and overwhelming amount of plugins and settings, makes my common sense tingling. Another challenge is the security issue - Wordpress is exposed to a large number of hacker attacks, since it's so popular, and if you're not careful with software updates you may end up with a server crash or an infected website.

So how can we deal with that?


For a couple years now I've been developing applications in Vue. It's a lightweight framework that doesn't feel that heavy as Angular, and (for me) is more approachable than React where everything is a function (personally I don't like that).

There is a framework that works on top of Vue called Nuxt, that gives us a tool of SSR (Server-Side Rendering), and dev-friendly solutions with like routing. Believe me, once your theme is poorly configured or you install too many plugins on your Wordpress website it may be even too heavy to load on the newest devices with fiber-optic internet..

At this point you are probably still weighing pros and cons of both platforms. I bet that simple content management is on your requirements list.
Great news! What also comes with Nuxt is a Nuxt Content - a brilliant module that acts like a headless CMS. Basically it fetches files in yaml, md, json (you name it) through a MongoDB like api, and creates a 'fake' backend which would usually take time (and money!) to make.

Having that in mind I came up with an idea. What if I create an application:

  • that is a static Nuxt application

  • where end-user (client) will make their changes in easy to learn md/yaml files

  • that is hosted on a basic server

  • where repository is kept on Github

  • where push to repository updates files on FTP server

I believe that it could be a perfect solution for a small company (e.g. restaurant where only editable elements could be menu or contact), and it would require only one (frontend) developer to create one.

How To

First of all I'd recommend creating new repository on Github. It will be so much easier to clone existing repository, rather than creating a local one and connecting to github.
All you've got to do is login to your github (or create a new account), navigate to your repositories, and click a "new" button like so:

and create new repository:

Since there is no .gitignore template for Vue projects, let's skip that step.

After that we can simply clone repository and copy our project or set new remote.


First of all we have to generate a new Nuxt project:

>> yarn create nuxt-app headless-cms

with options presented below:

Now let's break it down:

  • Project name - it will be prefilled

  • Programming language - personally I only code in static typed languages such as Typescript, however application is meant to be super small and we have no backend integration, therefore I do not anticipate any complicated nor useful interfaces

  • Package manager - your choice. I do however choose Yarn for its deterministic nature

  • UI Framework - for quite some time I've had ambivalent experience with Tailwind. However I can't deny it's main purpose (dev speed) so let's stick with it.

  • Nuxt.js modules - Content obviously.

  • Linting tools - One could argue that for such a small project linters would be simply annoying, but it's engineering so let's keep it for good measure

  • Testing framework - Since our app is readonly i find unit tests useless here. And I'm pretty sure that client won't have budget for good quality e2e tests :)

  • Rendering mode, deployment target - it's a static website, no server.

  • Deployment tools - we have an option to include github actions here, but we will configure that manually

  • Continuous Integration - none.

  • VCS - Git obviously.

After that our app will be installed and we can simply start our application with

>> yarn dev

Now let's configure our content.


First of all let's get rid of Tutorial component


And then we can delete its declaration in starting page. 

Please do however insert an empty div for example, otherwise you will end up with linter error ​​"The template requires child element ".






export default {

 name: 'IndexPage',



Thanks to our previous configuration we have a content folder and sample file which we can test like so:



<nuxt-content :document="hello"></nuxt-content>




export default {

 name: 'IndexPage',

async asyncData({ $content, params, error }) {

   const hello = await $content('hello')


     .catch(() => {

error({ statusCode: 404 })


   return { hello }




All we had to do is add

After that you should end up with something like this:

That means that our content module is working indeed. Please make some changes in hello.md file just to make sure that your content is editable.

After that commit and push your changes to remote.


Now here comes the magic part.

First of all we have to use FTP-Deploy-Action by SamKirkland https://github.com/SamKirkland/FTP-Deploy-Action

It's very easy to configure. Note that v 4.1.0 had a bug with files synchronization, therefore you can use version 4.0.0. or 4.3.0 (I personally use v 4.0.0)

now all we have to do is create file main.yml in direction /.github/workflows/main.yml

and place following code which I will break down:

on: push

name: 🚀 Deploy website on push



   name: 🎉 Deploy

   runs-on: ubuntu-latest


- name: 🚚 Get latest code

       uses: actions/checkout@v2

- name: Use Node.js 12

       uses: actions/setup-node@v2-beta


         node-version: '12'

     - name: 🔨 Build Project

       run: |

         yarn install

         yarn generate

- name: 📂 Sync files

       uses: SamKirkland/FTP-Deploy-Action@4.0.0

         server: server1234.123demo.com

         username: test@server1234.123demo.com

         password: he4dle$$123

         server-dir: /headless-cms/

on - it says which git command triggers our action

name - description which will be shown in our action

jobs - its a list of all the things happening during the deploy process

runs-on - machine that do all the jobs mentioned above. Ubuntu is chosen by default.


  1. It gets the code from master/main

  2. Setups machine with Node.

  3. Builds project with yarn install and yarn generate  (important)

  4. Sync our files with FTP Deploy Action (here you can also configure its version). Here you also configure your FTP access.

And that's basically all there is to it.

Now we commit this file and push to the remote.

Right after that we should see an action happening.

It's a success!

Now you can go to the url connected with your FTP server.


Github comes with its own IDE so its very simple to edit content right like so.

First we click on the file we want to edit and then we click on the pencil icon

And then we make our desired changes.

After that all you have to do is commit this change, and action should happen immediately.


Nuxt content with github FTP action should feel like a right choice. There is however a downside where client do have to be trained with markdown and yaml editing.
I do find that much easier then Wordpress usage though.

One word of advice - make sure that client is willing to learn yaml and markdown. Mistakes can happen but code won't be deployed with any error (thanks to our Github action). 

From my experience - it takes one to two short training sessions to get it right.

Subscribe to Sunscrapers Newsletter to find more Vue articles. There is more to come from me!

Sunscrapers Emblem

Bartosz Chronowski

Frontend Developer




Recent posts

See all blog posts

Are you ready for your next project?

Whether you need a full product, consulting, tech investment or an extended team, our experts will help you find the best solutions.

Hi there, we use cookies to provide you with an amazing experience on our site. If you continue without changing the settings, we’ll assume that you’re happy to receive all cookies on Sunscrapers website. You can change your cookie settings at any time.