Nuxt Symbolics

Vue components for websites displaying symbolics—creeds, confessions, and catechisms of the Christian faith.

Importing

npm install --save nuxt-symbolics

nuxt.config.ts:

export default defineNuxtConfig({
  modules: ["nuxt-symbolics"],
  symbolics: {
    // A prefix to attach to component names.
    // default: "Symbolics"
    componentPrefix: "Sym",
    // A prefix to attach to custom css classes like `hyperlink`.
    // default: ""
    cssPrefix: "symbolics-",
    siteName: "The Baptist Confession",
  },
});

Data

SymbolicsParts

content/confession/chapters/01.yaml

id: "1"
title: Of The Holy Scriptures
num_paragraphs: 10

ConfessionUnits

id: "1.1"
next: "1.2"
parent: "1"
segments:
  - text: >-
      The Holy Scripture is the only sufficient, certain, and infallible rule
      of all saving knowledge, faith, and obedience.
    proofs: 2 Timothy 3:15–17; Isaiah 8:20; Luke 16:29, 31; Ephesians 2:20
  - text: >-
      Although the light of nature, and the works of creation and providence do
      so far manifest the goodness, wisdom, and power of God, as to leave men
      inexcusable; yet they are not sufficient to give that knowledge of God
      and His will which is necessary unto salvation.
    proofs: Romans 1:19–21; 2:14–15; Psalm 19:1–3
  - text: >-
      Therefore it pleased the Lord at sundry times and in divers manners
      to reveal Himself, and to declare that His will unto His church;
    proofs: Hebrews 1:1
  - text: >-
      and afterward for the better preserving and propagating of the truth, and
      for the more sure establishment and comfort of the church against the
      corruption of the flesh, and the malice of Satan, and of the world, to
      commit the same wholly unto writing; which maketh the Holy Scriptures to
      be most necessary, those former ways of God's revealing His will unto His
      people being now ceased.
    proofs: Proverbs 22:19–21; Romans 15:4; 2 Peter 1:19–20

CatechismUnits

id: "1"
question: Who is the first and chiefest being?
segments:
  - text: God is the first and chiefest being.
    proofs: Isaiah 44:6; 48:12; Psalm 97:9

Components

SymbolicsParts

<template>
  <SymbolicsParts
    :parts="chapters"
    :units="paragraphs"
    :level="2"
    :to="(id: string) => `/navigation/${id}`"
  />
</template>

<script setup lang="ts">
import type { SymbolicsPart, SymbolicsUnit } from "#symbolics";

const chapters = await queryContent<SymbolicsPart>(
  "confession",
  "chapters",
).find();
const paragraphs = await queryContent<SymbolicsUnit>(
  "confession",
  "paragraphs",
).find();
</script>

SymbolicsView

<template>
  <SymbolicsView unit="unit" docname="The Baptist Catechism" />
</template>

<script setup lang="ts">
const unit = await useSymbolicsUnit("catechism", "001");
</script>

This can also be specified by path.

<template>
  <SymbolicsView path="catechism/001" docname="The Baptist Catechism" />
</template>

<script setup lang="ts">
const unit = await useSymbolicsUnit("catechism", "001");
</script>

We recommend wrapping this in a https://vuejs.org/guide/built-ins/suspense tag.

SymbolicsLayout

Consider using this in layouts/default.vue.

<template>
  <SymbolicsLayout>
    <slot />
    <template #footer-left>baptistconfession.org</template>
    <template #footer-right>
      <NuxtLink to="/copyright" class="hyperlink">Copyright</NuxtLink>
    </template>
  </SymbolicsLayout>
</template>

SymbolicsPage

<SymbolicsPage size="lg" :title="My Page" subtitle="It's the Best Page">
  <template #introduction>
    <ContentDoc path="prose/lorem" />
  </template>
  <ContentDoc path="prose/ipsum" class="prose" />
</SymbolicsPage>

SymbolicsProseAccordion

<template>
  <SymbolicsPage class="prose" title="Prose Accordion">
    <SymbolicsProseAccordion :items="items" />
  </SymbolicsPage>
</template>

<script setup lang="ts">
const items = [
  {
    label: "Lorem",
    path: "prose/lorem",
  },
  {
    label: "Ipsum",
    path: "prose/ipsum",
  },
];
</script>

SymbolicsError

Consider using SymbolicsError in error.vue.

<template>
  <SymbolicsError :error="error" catechism>
    <p>Feel free to contact the webmaster about this error.</p>
  </SymbolicsError>
</template>

<script setup lang="ts">
defineProps<{
  error: {
    statusCode: number;
    stack?: string;
    message?: string;
  };
}>();
</script>

SymbolicsEsvCopyright

Since the SymbolicsLayout includes settings to turn on ESV proof text expansion, this component provides a simple way to include the ESV copyright statement. It is added to Nuxt globally, so it can be used from @nuxt/content.

copyright.md

Copyright Information

---

:EsvCopyrightStatement

SymbolicsCreativeCommonsZero

copyright.md

Copyright Information

:SymbolicsCreativeCommonsZero{author="Mr. Author"}

Types

import type {
  CatechismUnit,
  ConfessionUnit,
  SymbolicsPart,
  SymbolicsUnit,
} from "#symbolics";

Composables

useSymbolicsUnit

const unit = await useSymbolicsUnit("confession", "paragraphs", "01_01");

This works much like queryContent from @nuxt/content, but:

• performs a type assertion to SymbolicsUnit, and
• throws a fatal 404 if none is found.

The fatal 404 is necessary for proper 404 behavior when using SSG.

Utilities

isCatechismUnit

import { isCatechismUnit } from "#symbolics";

if (isCatechism(unit)) {
  console.log(unit.question);
}

firstString

import { firstString } from "#symbolics";

const route = useRoute();
const id = firstString(route.params.id);

padParts

import { padParts } from "#symbolics";

const fileName = `${padParts("1.1", 2)}.yml`; // "01_01.yml"

Other Imports

All other imports can be retrieved from the specific import path under #symbolics.

import LoadingSpinner from "#symbolics/components/LoadingSpinner.vue";
import useStaticPassage from "#symbolics/composables/use-symbolics-unit";
import { makeLink } from "#symbolics/utils/base";

CSS classes

hyperlink

<NuxtLink to="/path" class="hyperlink" />

prose

<p class="prose" />
  This is justified text.
</p>