mktcms

MktCMS

A file based CMS for self-hosted Nuxt apps.

This is my personal, minimalist alternative to @nuxt/content and Studio, which are fantastic projects, but sometimes lacking the kind of complete documentation I’m looking for. Over time I will maybe migrate more and more (MDC already supported), and just keep the website template and the server utility. If you find this useful, feel free to use it and contribute to it.

• ✨  Release Notes

Features

• Simple Admin UI with Git integration to manage content
• Composables to use the content in your Nuxt app
• sendMail utility to send emails via SMTP
• MDC support

Setup

npx nuxi module add mktcms

The module also applies a small set of app defaults that you can still override in your own nuxt.config.ts:

• router.options.scrollBehaviorType = 'smooth'
• default German app.head language, title, description, and favicon
• mdc.headings.anchorLinks = false
• includes and configures @nuxtjs/robots with admin route disallow rules
• includes and configures @nuxt/fonts with default font weights
• includes and configures @nuxtjs/plausible with proxy = true and autoPageviews = false
• default frontmatter schema for Seiten/Startseite.md and Seiten/**/*.md

Example override:

export default defineNuxtConfig({
  app: {
    head: {
      title: 'Meine Website',
    },
  },
  mktcms: {
    frontmatter: {
      'Seiten/**/*.md': {
        seoTitle: { type: 'string', label: 'Eigener SEO-Titel' },
      },
    },
  },
})

NUXT_PUBLIC_MKTCMS_SITE_URL="http://localhost:3000"
NUXT_PUBLIC_MKTCMS_SHOW_VERSIONING=false

NUXT_MKTCMS_ADMIN_AUTH_KEY="your-admin-auth-key"
NUXT_MKTCMS_AUTH_COOKIE_MAX_AGE_SECONDS=604800
NUXT_MKTCMS_AUTH_COOKIE_PATH="/"
NUXT_MKTCMS_AUTH_COOKIE_SAME_SITE="lax"
NUXT_MKTCMS_AUTH_COOKIE_SECURE=true
NUXT_MKTCMS_LOGIN_RATE_LIMIT_MAX_ATTEMPTS=5
NUXT_MKTCMS_LOGIN_RATE_LIMIT_WINDOW_SECONDS=300
NUXT_MKTCMS_LOGIN_RATE_LIMIT_BLOCK_SECONDS=600
NUXT_MKTCMS_UPLOAD_MAX_BYTES=52428800

NUXT_MKTCMS_SMTP_HOST="your-smtp-host"
NUXT_MKTCMS_SMTP_PORT=465
NUXT_MKTCMS_SMTP_SECURE=true
NUXT_MKTCMS_SMTP_USER="your-smtp-user"
NUXT_MKTCMS_SMTP_PASS="your-smtp-pass"
NUXT_MKTCMS_MAILER_FROM="your-mailer-from-address"
NUXT_MKTCMS_MAILER_TO="your-mailer-to-address"

NUXT_MKTCMS_GIT_USER="your-github-username"
NUXT_MKTCMS_GIT_REPO="owner/repository.git"
NUXT_MKTCMS_GIT_TOKEN="your-github-personal-access-token"

NUXT_PUBLIC_PLAUSIBLE_API_HOST="https://plausible.yourdomain.com"
NUXT_PLAUSIBLE_API_KEY="your-plausible-api-key"

Note: To generate a GitHub Personal Access Token, go to GitHub Settings → Developer settings → Personal access tokens → Tokens (classic) → Generate new token. Grant it repo scope for full repository access.

Usage

.storage/
  Home.md
  Articles/
    Article 1.md
    Article 2.md

<!-- Home.md -->
---
title: Home
---
Welcome to **MKT CMS**!

::alert
Your alert component.
::

<script setup lang="ts">
const home = await useMdContent<{ title: string }>('Home.md')
const articles = await useMdContents('Articles')
</script>

<template>
  <h1>{{ home.title }}</h1>
  <MDC :value="home.markdown" />
  <article v-for="article in articles" :key="article.key">
    <MDC :value="article.markdown" />
  </article>
</template>

Mailer

await sendMail({
  subject: 'Notification from MKT CMS',
  fields: {
    Name: 'Jane Smith',
    Message: 'Hello, this is a test message.',
  },
  replyTo: 'jane.smith@example.com',
})

Contribution

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release