Let's add some Markdown files and then import them into a dynamic Nuxt page where Nuxt/Content will then convert the Markdown to HTML and post to the page.
First, we need to add a new folder called content
to the project's root directory.
Nuxt/Content will look in this directory to find and grab Markdown files.
Within the content
directory, I am going to add another directory titled 'documentation'. The reason for this, is that it may be very possible that you have different types of files that you'll want to keep organized as well as include as different indices on your Algolia account.
For instance, with docs.cleavr.io, we have a documentation section and a guides section that we keep separate from each other as well as group separately within the search results.
Within the documentation
folder, I'll add the doc-example.md markdown file which contains some random content as well as YAML page meta data at the top.
In the pages
directory, we will add a dynamic page. Which is, a page template, more-or-less, that Nuxt creates dynamic routes based on.
I'll add a page titled _doc.vue to the pages
folder.
Notice that the page starts with and underscore, "_", character. This lets Nuxt know that this page's route will be dynamically generated.
We'll use this dynamic route feature to have Nuxt automatically create a page for each of our markdown content pages. This way, when we are adding or removing markdown files to content/documentation
, we don't have to worry about also creating html pages for the docs. It will dynamically be created for us using this method.
The contents of _doc.vue
is pretty simple.
<template>
<div>
<h1 class="text-3xl font-semibold text-gray-9000 pb-8">
{{ doc.title }}
</h1>
<NuxtContent :document="doc" />
</div>
</template>
<script>
export default {
async asyncData( { $content, params } ) {
const doc = await $content('documentation', params.doc ).fetch()
return { doc }
}
}
</script>
Notice the async
function.
async asyncData( { $content, params } ) {
const doc = await $content('documentation', params.doc ).fetch()
return { doc }
}
Here, we are calling the content module that will look at the documentation
directory for any files that match params.doc
- which is the route name that we are pulling based on the URI.
Such as, if the url is example.com/doc-example
, then the params.doc
value will equal doc-example
. Nuxt/content will then see if there is a file by that name in the content/documentation
directory. If there is, then the doc
data will be passed to the <NuxtContent :document="doc" />
component that is called in the <template>
section.
Nuxt/Content wraps some classes around the html that it generates from parsing the markdown file. But, by default, is nothing pretty to look at...
You can choose to tap into the applied classes and work your CSS magic.
Or, you can take the lazy approach and install Tailwind Typography to do the styling for you. Of course, this is the route I choose. 😉
In the package.json file, add in the following dependency:
"dependencies": {
"@tailwindcss/typography": "^0.2.0"
},
Then, in your terminal under your project's root directory, run the following command.
yarn install
This will install the dependency you just added.
On the project's root, add a new file tailwind.config.js.
Within the file, add
module.exports = {
purge: [],
darkMode: false,
theme: {
typography: {
default: {
css: {
'code::before': {
content: '""',
},
'code::after': {
content: '""',
},
},
},
},
extend: {},
},
variants: {
extend: {},
},
plugins: [
require(`@tailwindcss/typography`)
]
}
Notice we are requiring the plugin for @tailwindcss/typography
.
You may also be wondering about the code::before/after portion. This is for if you use back-ticks in markdown to display code snippets, to remove the back-ticks. You can remove this portion if you don't mind having the back-ticks.
To apply Tailwind Typography, we'll simply add the prose class to the NuxtContent
component on the _doc.vue
file.
<NuxtContent :document="doc" class="prose" />
Voila!
Our converted markdown has been pretty-fied! 😍
Sign up for a 5-day free trial of Cleavr Pro. No credit card required until you decide to subscribe.
Sign up for free