@nhdegnebolig/folio-vue

Vue composables and a render component for @nhdegnebolig/folio.

Install

npm install @nhdegnebolig/folio @nhdegnebolig/folio-vue

Requires @nhdegnebolig/folio to be set up in your vite.config.ts — see core package docs.

API

useContentList(prefix)

Reactive list of all content entries under a path prefix.

const { entries, loading, error } = useContentList('/docs')

useContent(path)

Reactive single entry by exact path.

const { entry, loading, error } = useContent('/docs/getting-started')

<FolioContent>

Renders an entry's MDX body. Pass a components map to use custom Vue components inside .mdx files.

<FolioContent :entry="entry" :components="{ Button, InfoBox }">
  <template #loading>Loading…</template>
  <template #error>Failed to load.</template>
</FolioContent>

Example

<script setup>
import { computed } from 'vue'
import { useContentList, FolioContent } from '@nhdegnebolig/folio-vue'

const { entries, loading } = useContentList('/docs')
const pathname = window.location.pathname
const active = computed(() => entries.value.find(e => e.path === pathname) ?? null)
</script>

<template>
  <nav>
    <a v-for="e in entries" :key="e.path" :href="e.path">
      {{ e.frontmatter.title }}
    </a>
  </nav>
  <FolioContent v-if="active" :entry="active" />
</template>

License

MIT