2. Nuxt Usage

Nuxt

JAMStart uses Nuxt.js as the front-end framework. Nuxt is a framework built on top of Vue.js that provides static site generation, server-side rendering, and powerful routing capabilities out of the box. It simplifies the development of Vue.js applications by providing a structured way to organize your code and handle common tasks.

JAMStart leverages Nuxt static site generation feature to create a site that is fast, SEO-friendly, author friendly, and easy to maintain. By design, JAMStart does not use the server or server-side features of Nuxt which allows you to host the website statically and cheaply. If you need the Nuxt server or server-side features, you can always add them later.

The use of Nuxt Content module allows for seamless authoring of blog posts and/or articles in Markdown. Each blog, article, or page is authored in a single Markdown file (with .md extension) and stored in the /content directory. Each Markdown file can include front-matter YAML metadata for titles, descriptions, thumbnails, dates, tags, and other custom data for SEO and social media sharing. The Markdown files are automatically converted into HTML pages with site CSS by Nuxt Content in the static generation phase. This adheres to the separation of content and presentation principle of web design.

Example Markdown Page

---
title: Hello World
description: When I first learned to code, I was told that I should always write a 'Hello, World!' module first.
dateCreated: 2024-05-03
author: John Pennock
keywords: [c_language, hello_world]
isManualImage: true
image: /images/blog/C_KandR.jpg
imageAlt: Front cover of "The C Programming Language" by Kernighan and Ritchie
---
Hello, World!

```c
#include <stdio.h>

int main()
{
    printf("Hello World");

    return 0;
}
```

Nuxt 3 Directory Structure

Nuxt 4 has been released. JAMStart used Nuxt 3 but chooses to use the Nuxt 4 with minimal changes needed.

Key Files and Directories

Nuxt 4 Compatibility

Nuxt 4 is imminent and the current Nuxt 3 has a mode that will allow you to future proof the directory structure. Opt-in to the v4 directory structure which means they are going to move the client code from the root to the app folder. You can enable Nuxt 4 compatibility adding the future key in the nuxt.config.ts file.

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  }
})

Nuxt 4 Changes

Nuxt 4 Unchanged

Nuxt Routing

• A route is created automatically for each page in the pages directory. A subdirectory will add a level to the route parameter.
• Use <NuxtPage /> where you want to pages to appear based on route. Typically, this is in the app.vue file, within the <NuxtLayout /> element
• Add a routing page with a parameter you add [] to the filename!
• Add the parameter name inside the brackets like [...slug].vue
• slug means where spaces are dash characters - blog post short name

Nuxt Modules

You can browse Nuxt modules here. You install a Nuxt specific package according to the instructions.

Component Names

When a component has a compound name you can either name the file as either

• compound-name.vue or
• CompoundName.vue (my preferred) In either case, when coding the component in the <template></template> section of a page the reference would be <CompoundName></CompoundName>

Data fetching

Nuxt has three built in data fetching methods

1. useFetch composable
2. useAsyncData composable
3. $fetch

NPM Dependencies

After cloning, you should examine the NPM dependencies and:

• understand what the role of each dependency is in the project and where the documentation is for it
• update any dependencies, at least the minor and patch updates.
• optionally, remove any dependencies you do not need for your project
• get for security updates

Understand the Dependencies

You can do this by using npm outdated'. editing the package.jsonfile and changing the version numbers to the latest versions, or you can use a tool likenpm-check-updates` to automatically update the versions for you.

Key Files and Folders

Files

Content Pages

at /content

NuxtContent Controls

at /app/components/content

Vue Controls

at /app/components

Dependencies

from /package.json

  "dependencies": {
    "@nuxt/content": "^3.1.1",
    "@stefanobartoletti/nuxt-social-share": "^1.2.0",
    "nuxt": "^3.6.0",
    "nuxt-cloudflare-analytics": "^1.0.8",
    "remark-unwrap-images": "^4.0.0",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@nuxt/devtools": "^0.0.1",
    "@nuxtjs/color-mode": "^3.3.3",
    "@nuxtjs/tailwindcss": "^6.11.4",
    "@tailwindcss/typography": "^0.5.13"
  }
}

Essentially, the dependencies are:

1. Nuxt.js v3
2. Nuxt Content v3
3. Nuxt Devtools - (for debugging)
4. Nuxt Color Mode - (for dark modes)
5. Nuxt Tailwind CSS - style
6. Tailwind Prose and Typography - Content Readability
7. Nuxt Social Share buttons
8. Nuxt CloudFlare Analytics - Cookie-free CloudFlare Analytics for static site