A Nuxt module for displaying confessions, catechisms, and creeds
Vue components for websites displaying symbolics—creeds, confessions, and
catechisms of the Christian faith.
npm install --save nuxt-symbolics
nuxt.config.ts:
``typescripthyperlink
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 .`
// default: ""
cssPrefix: "symbolics-",
siteName: "The Baptist Confession",
siteEmail: "info@example.com",
},
});
content/confession/chapters/01.yaml
`yaml`
id: "1"
title: Of The Holy Scriptures
num_paragraphs: 10
`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
`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
Consider using this in app.vue.
`vue`
`vue/navigation/${id}
:units="paragraphs"
:level="2"
:to="(id: string) => "
table-of-contents
/>
`
`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.
Consider using this in layouts/default.vue.
`vue`
baptistconfession.org
`vue`
`vue`
This will display the configured siteDomain as a link.
`vue`
This will display the configured siteEmail as a link.
` Email us! vue`
Consider using SymbolicsError in error.vue.
` Feel free to contact the webmaster about this error.vue
`
Since the SymbolicsLayout includes settings to turn on ESV proof text@nuxt/content
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.
copyright.md
`markdown
Copyright Information
---
:EsvCopyrightStatement
`
copyright.md
`markdown
Copyright Information
:SymbolicsCreativeCommonsZero{author="Mr. Author"}
`
`typescript`
import type {
CatechismUnit,
ConfessionUnit,
SymbolicsPart,
SymbolicsUnit,
} from "#symbolics";
`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.
`typescript
import { isCatechismUnit } from "#symbolics";
if (isCatechism(unit)) {
// eslint-disable-next-line no-console
console.log(unit.question);
}
`
`typescript
import { firstString } from "#symbolics";
const route = useRoute();
const id = firstString(route.params.id);
`
`typescript
import { padParts } from "#symbolics";
const fileName = ${padParts("1.1", 2)}.yml; // "01_01.yml"`
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";
`vue`
`vue
This is justified text.