| position | 2 |
|---|
You can create pages under .theme/app/pages/.
A content page is a page that uses the <ContentRenderer /> component to render
the given markdown content as HTML. It is located in
.theme/app/pages/[...content-page].vue and renders the page retrieved with
queryCollection based on the current route.
Collections gather content from paths specified in content.config.ts and
create collections under the given names. Then, we can access these collections
using queryCollection with the defined names. By giving type to collections,
you can create page or data type. With source information you can specify
the location of the data to be collected, with schema you can specify the
schema with which they will be saved.
Note
You should use ZOD when specifying schema.
See content.config.ts to see our example.
See Nuxt Content Collection Definition to see more detail.
We needed to retrieve all markdown content from a collection. To achieve this,
we used queryCollection, allowing us to display the collection content on the
page using ContentRenderer.
Note
The all and first methods return a promise, so you need to use await.
Demo is available at /demo/query-collection.
You can visit Routing to learn how to create custom pages for different types of routes.
We used layout to seperate header and sidebar components from pages. For nuxt
to recognize layouts, they should be implemented in .theme/app/layout folder.
To create a layout create a default.vue in the layout folder. Our
implementation is at .theme/app/layout/default.vue. For layout to be used in
every page it needs to be added to app.vue as shown in .theme/app/app.vue.
To serve static assets in a theme like .css or .png files simply put any
file under .theme/public folder. It will be served at the root path. E.g.
.theme/public/logo.png will be at /logo.png.
Demo is at /demo/public-assets.
Note
.png from content images or generated diagrams should be served under
.theme/public but they shouldn't be included in git. To preserve the
default behaviour while solving this problem, we change public assets folder
from .theme/public to .theme/.public via dir.public in
.theme/nuxt.config.ts and copy public assets, content images and generated
diagrams into .public during preprocessing.
When the requested route does not have corresponding markdown content, we fetch
the content from not-found.md and render it on the screen.
Demo is available at /demo/error/non-existent-content.