I have always struggled with new projects. Don’t get me wrong - we live in exciting times and all that. But, there is this thing called “conundrum of choice”. There are just too many ways to get things done and the “next shiny thing” syndrome rears its head each and every darn time.

I can safely say that I have never really achieved a standard flow to get things started. Why is that important did I hear you ask?

• Starting a project is what I find more difficult than putting in the hours in the app, or completing the project
• I explore available options far too deeply than what sane people do
• I lose valuable time in “starting things the right way” rather than focusing on value-adding activities that deliver the goods

So then, it is also safe to say I am forever searching for the one true framework/boiler plate for everything that a person needs to start a project. And that search, ladies and gentlemen, may have taken a big step towards conclusion.

Dramatic drumroll.. Nuxt.

Before I go into why I am rick-rolling(?) Nuxt in all this, let us consider what goes in a web app for low-mid complexity web app.

Structure of the Modern Web App

I roll out products by myself. These are sometimes SaaS products, a few of them paid, and a lot of them created for small & medium scale businesses that are not looking at rapid scaling by the end of the month.

My typical use case will consist of -

1. Creating the app itself (insert favourite server-side and client-side framework here). This will consist of user auth incl. login/signup pages, app pages, and associated paraphernalia
2. Create a website that sings hymns about the app. Include a somewhat agreeable home page, pricing, help pages, T&C pages etc.
3. Create a blog that can provide updates and do a dance or two for SEO

While this is straight forward enough, I had days & nights when I would have nightmares on what things go where, and how should I get stuff done quickly.

• SSR or Pre-render
• Consistent styling across website and app
• Easy to use, editor-friendly blogs
• SEO friendly

Meet My Solutions

As I made pretty clear multiple times till now, I don’t have a clear cookie-cutter solution. My go-to solution consisted of -

1. Using a single page app (always an SPA)
   • Connect to backend through RESTful APIs / use web sockets / sessions
   • Use pre-render for pages with lot of content
2. Use a static site generator for the larger site and blog
3. Go back and forth between components to get them all to work together

Obviously, I could (or should) have steered clear of this mess by using server-rendered pages using templates (think Laravel, or numerous Node frameworks), I somehow did not quite take a firm step in that direction.

My technologies of choice to get things going had been -

1. Vue - for SPA. Nuxt for added SSR effect
2. Hugo - for static sites and blog. (OR) Wordpress for sites & blog if I want to feel like living on the edge

I have gravitated towards using Gridsome or Saber for sites/blog since then. This makes it a lot easier to keep sites and the app consistent.

My New Favourite - Nuxt

You may have seen Nuxt in my choice of technologies. So, what changed and why this this big intro that may overshadow the entire post?

Two words - Nuxt content.

Nuxt has been my preferred tool when I need SSR, but I don’t quite like that experience a whole lot. I take issue with -

1. Increased hot-reload times during development. Yes, this matters for a person like me who makes far too many design mistakes
2. Added complexity of having to deal with server-side and client-side logic. Also a few libraries tend to become more ape-like with SSR (even with <client-only>)
3. Inconsistent, weird build behaviour - especially when I am using Vuetify/ Bootstrap-Vue. (Yes, I cannot reproduce those errors. Yes, I somehow manage to change config and make them go away)

But, more recently I have taken a liking to the “new life cycle of development”.

1. Nuxt for SPA
2. Nuxt for the entire site and blog

Now I have -

• consistent styling
• a common / consistent way of coding
• less maintenance work

What changed the game for me was the content module.

Why Content Module is awesome?

My first introduction to the content module was through this article on Nuxt blog - published last month. Like all content on Internet, I bookmarked it and moved on with life.

It was only much later that I started a “oh-so-cool” project, and I looked out for anything new that could help me be a bit more productive. Boy, was I in for a surprise.

Nuxt content does one awesome thing - it sources the content during build and creates the pages that are SEO-friendly, SSR-friendly and can be delivered to the client at the blink of an eye.

• Create a content folder and put in your markdown files, JSON, CSV or XML files in there
• Point Nuxt to content folder. Enable the module
• Fetch your content in relevant pages
• Sit back and start building

In other words the content module bestows “static site generation” powers to your Nuxt app without actually making it a static site (nothing wrong with a static site per se).

So, now I could -

1. Separate out content and presentation layers (greater reuse)
2. Use one framework for content heavy pages and my app
3. Choose SSR or SPA and do not make a fuss about overall site vs. app

Getting Started

Start your new nuxt project.

1

npx create-nuxt-app todo

Install content module.

1

npm install @nuxt/content

Add module to your nuxt.config file -

1
2
3
4
5

{
  //
  "modules": ["@nuxt/content"]
  //
}

You are now ready to unleash your content. Create a content folder in root - you can add any subfolder or files to this folder.

1
2
3
4
5

md content
cd content
md blog
cd blog
touch hello.md

Write in your awesome post in hello.md.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

---
title: Hello World
description: Here's an obligatory 'hello world' post
createdAt: 2020-01-01
slug: hello
tags:
  - test
  - another
---

# Hello World

I just came here to say that.

Create a template that can render this markdown. Create a folder called blog under the root pages directory.

Create a new file index.vue. This file will be the layout to display our main blog content (e.g. our list of posts) - I am using Vuetify here, but you can use any style library.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<template>
  <div class="posts">
    <v-card
      color="grey lighten-3"
      flat
      width="100%"
      height="150px"
      class="text-center pt-6 pb-6 mb-2"
    >
      <div class="text-h5 grey--text">Blog</div>
      <div class="grey--text caption mt-8">
        <nuxt-link to="/" class="grey--text">Home</nuxt-link> / Blog
      </div>
    </v-card>
    <v-container>
      <v-row>
        <v-col cols="12">
          <div v-for="post in posts" :key="post.dir">
            <div class="text-h4 font-weight-bold mb-6">{{ post.title }}</div>
            <div class="grey--text caption mb-4">
              <span v-if="post.createdAt">
                <v-icon small color="grey">mdi-calendar</v-icon>
                {{ post.createdAt.substr(0, 10) }}
              </span>
              | Tags:
              <span v-for="(tag, i) in post.tags" :key="i" justify="around">
                <v-chip dense small color="grey lighten-3" class="mr-1">
                  {{ tag }}
                </v-chip>
              </span>
            </div>

            <p>{{ post.description }}</p>

            <nuxt-link :to="`/blog/${post.slug}`" class="button"
              >Read more</nuxt-link
            >
          </div>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
  export default {
    async asyncData({ params, error, $content }) {
        const posts = await $content('blog', { deep: true }).fetch();
      }
    },
</script>

Your discerning mind would have noted a few things here -

1. We used asyncData in the page to retrieve content. This happens during build time. You are free to work your SEO magic here
2. You utilise the content read during asyncData like any other Vue variable
3. You did nothing additional other than a plan-ol’ Nuxt project - which is a good thing

After all that hard work, your Blog is ready to roll.

We did all this without leaving the framework that is also responsible for our app. So, the real question you should be asking now is “have I reached app starter nirvana?”.

Finis

What do you think? What will you do for your next big app!?