Get Front-Matter Content

[heychazza]

Hi all,

I've started tinkering with the new v2 version for Nuxt 3, and it's working fantastic, but I'm wondering how I can fetch additional blog content (from my markdown files).

const { data: navigation } = await useAsyncData('navigation', () => {
  return fetchContentNavigation()
})

This returns the title and slug, but what about additional content that is entered into my markdown file? If this doesn't exist, is it possible somehow we can specify our "schema", as I want to specify author, images etc.

Thanks

[nozomuikuta]

@heychazza

I've not yet tried Nuxt Content v2 deeply, but here are some information for you based on my source code reading.
I hope this helps you somehow.

First, Nuxt Content v2 seems to have content.navigation.fields option that let you define what fields of documents to fetch when it creates navigation items to fetch.

content/src/module.ts

Lines 138 to 145 in bc67b77

	/**
	* Enable/Disable navigation.
	*
	* @defaul {}
	*/
	navigation: false | {
	fields: Array<string>
	}

content/src/runtime/server/navigation.ts

Lines 9 to 29 in bc67b77

	export function createNav (contents: ParsedContentMeta[], configs: Record<string, ParsedContentMeta>) {
	const { navigation } = useRuntimeConfig().content
	const pickNavigationFields = pick(['title', ...navigation.fields])
	const nav = contents
	.sort((a, b) => a.slug.localeCompare(b.slug))
	.reduce((nav, content) => {
	const parts = content.slug.substring(1).split('/')
	const idParts = content.id.split(':').slice(1)
	const isIndex = !!idParts[idParts.length - 1].match(/([1-9][0-9]*\.)?index.md/g)
	const getNavItem = (content: ParsedContentMeta) => {
	return {
	id: content.id,
	title: content.title,
	slug: content.slug,
	path: content.path,
	children: [],
	...pickNavigationFields(content),
	...(content.draft ? { draft: true } : {})
	}
	}

Second, it also seems that you can pass queryBuilder to fetchContentNavigation function as when you fetch contents (if I'm correct, fetching content navigation is actually a pattern of fetching with predefined queries and some dedicated logic).

content/src/runtime/composables/navigation.ts

Lines 6 to 24 in bc67b77

	export const fetchContentNavigation = (queryBuilder?: QueryBuilder) => {
	const params = queryBuilder?.params()
	const path = withContentBase(`/navigation/${hash(params)}`)
	if (process.server) {
	useHead({
	link: [
	{ rel: 'prefetch', href: path }
	]
	})
	}
	return $fetch<Array<NavItem>>(path, {
	method: 'GET',
	responseType: 'json',
	params: {
	params: JSON.stringify(params)
	}
	})
	}

Third, although I'm not sure, you might be able to extend interface NavItem as you like, because otherwise fetchContentNavigation always returns an array of objects whose type is hard-corded and unchangeable.
@Tahul will know better about this point.

content/src/runtime/types.d.ts

Lines 193 to 201 in bc67b77

	export interface NavItem {
	title: string
	slug: string
	id?: string
	draft?: boolean
	children?: NavItem[]
	[key: string]: any
	}

[heychazza]

@heychazza

I've not yet tried Nuxt Content v2 deeply, but here are some information for you based on my source code reading. I hope this helps you somehow.

First, Nuxt Content v2 seems to have content.navigation.fields option that let you define what fields of documents to fetch when it creates navigation items to fetch.

content/src/module.ts

Lines 138 to 145 in bc67b77

	/**
	* Enable/Disable navigation.
	*
	* @defaul {}
	*/
	navigation: false | {
	fields: Array<string>
	}

content/src/runtime/server/navigation.ts

Lines 9 to 29 in bc67b77

	export function createNav (contents: ParsedContentMeta[], configs: Record<string, ParsedContentMeta>) {
	const { navigation } = useRuntimeConfig().content
	const pickNavigationFields = pick(['title', ...navigation.fields])
	const nav = contents
	.sort((a, b) => a.slug.localeCompare(b.slug))
	.reduce((nav, content) => {
	const parts = content.slug.substring(1).split('/')
	const idParts = content.id.split(':').slice(1)
	const isIndex = !!idParts[idParts.length - 1].match(/([1-9][0-9]*\.)?index.md/g)
	const getNavItem = (content: ParsedContentMeta) => {
	return {
	id: content.id,
	title: content.title,
	slug: content.slug,
	path: content.path,
	children: [],
	...pickNavigationFields(content),
	...(content.draft ? { draft: true } : {})
	}
	}

Second, it also seems that you can pass queryBuilder to fetchContentNavigation function as when you fetch contents (if I'm correct, fetching content navigation is actually a pattern of fetching with predefined queries and some dedicated logic).

content/src/runtime/composables/navigation.ts

Lines 6 to 24 in bc67b77

	export const fetchContentNavigation = (queryBuilder?: QueryBuilder) => {
	const params = queryBuilder?.params()
	const path = withContentBase(`/navigation/${hash(params)}`)
	if (process.server) {
	useHead({
	link: [
	{ rel: 'prefetch', href: path }
	]
	})
	}
	return $fetch<Array<NavItem>>(path, {
	method: 'GET',
	responseType: 'json',
	params: {
	params: JSON.stringify(params)
	}
	})
	}

Third, although I'm not sure, you might be able to extend interface NavItem as you like, because otherwise fetchContentNavigation always returns an array of objects whose type is hard-corded and unchangeable. @Tahul will know better about this point.

content/src/runtime/types.d.ts

Lines 193 to 201 in bc67b77

	export interface NavItem {
	title: string
	slug: string
	id?: string
	draft?: boolean
	children?: NavItem[]
	[key: string]: any
	}

Awesome, this worked! Thank you.

Only last issue I've found, when clicking to go to a blog I get a white page until I refresh, wasn't sure if this was a dev thing.

[nozomuikuta]

Oh, I should have been more precise.

The NavItem is an interface and not a type, so $fetch<Array<NavItem>>(...) itself is totally fine in terms of type-safety.
What I talked about is "when we want to specify the part of [key: string]: any of the interface."