content
content/ 디렉토리를 사용하여 애플리케이션을 위한 파일 기반 CMS를 만드세요.
Nuxt Content는 프로젝트의 content/ 디렉토리를 읽고 .md, .yml, .csv, .json 파일을 파싱하여 애플리케이션을 위한 파일 기반 CMS를 만듭니다.
- 내장 컴포넌트로 콘텐츠를 렌더링하세요.
- MongoDB와 유사한 API로 콘텐츠를 쿼리하세요.
- MDC 문법을 사용하여 Markdown 파일에서 Vue 컴포넌트를 사용하세요.
- 내비게이션을 자동으로 생성하세요.
Nuxt Content 활성화
프로젝트에 @nuxt/content 모듈을 설치하고, 아래 명령어 하나로 nuxt.config.ts에 추가하세요:
Terminal
npx nuxt module add content
콘텐츠 생성
content/ 디렉토리 안에 마크다운 파일을 배치하세요:
content/index.md
# Hello Content
모듈이 자동으로 파일을 불러오고 파싱합니다.
콘텐츠 렌더링
콘텐츠 페이지를 렌더링하려면, <ContentRenderer> 컴포넌트를 사용하여 catch-all 라우트를 추가하세요:
pages/[...slug].vue
<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
return queryCollection('content').path(route.path).first()
})
</script>
<template>
<div>
<header><!-- ... --></header>
<ContentRenderer v-if="page" :value="page" />
<footer><!-- ... --></footer>
</div>
</template>
문서
https://content.nuxt.com에서 쿼리 작성 방법, MDC 문법으로 Markdown 파일에서 Vue 컴포넌트 사용하는 방법 등 Content 모듈의 다양한 기능을 확인하세요.