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:

``typescript
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",
siteEmail: "info@example.com",
},
});
`

Data

$3

content/confession/chapters/01.yaml

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

$3

`yaml
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
`

$3

`yaml
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

$3

Consider using this in app.vue.

`vue

`

$3

`vue



`

$3

`vue



`

We recommend wrapping this in a
" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">https://vuejs.org/guide/built-ins/suspense tag.

$3

Consider using this in layouts/default.vue.

`vue

`

$3

`vue




`

$3

`vue

`

$3

This will display the configured siteDomain as a link.

`vue

`

$3

This will display the configured siteEmail as a link.

`vue

`

$3

Consider using SymbolicsError in error.vue.

`vue



`

$3

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

`markdown
Copyright Information

---

:EsvCopyrightStatement
`

$3

copyright.md

`markdown
Copyright Information

:SymbolicsCreativeCommonsZero{author="Mr. Author"}
`

Types

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

Composables

$3

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

This works much like queryCollection 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

$3

`typescript
import { isCatechismUnit } from "#symbolics";

if (isCatechism(unit)) {
// eslint-disable-next-line no-console
console.log(unit.question);
}
`

$3

`typescript
import { firstString } from "#symbolics";

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

$3

`typescript
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.

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

CSS classes

$3

`vue

`

$3

`vue



This is justified text.



``