Nuxt.js: Using markdown as articles?

[EmmanuelBeziat]

Hi,
I'm using a custom-made vue static blog and I wish to migrate to nuxt to get a full static html generation.

The key is all the posts are made with markdown files, with some metadatas. And I’d like to avoid manually making vue files for each post.

How hard would it be to implement? For now I guess I must add a parser as a middleware and add a custom webpack directive to catch md files, am I right?

Thanks for your help!

_{This question is available on Nuxt.js community (#c341)}

[Atinux]

Hi @EmmanuelBeziat

There is plenty of solutions, hard to say which one is the best.

For nuxtjs.org, I chose to use a microservice which parse all the .md files an create a REST API which serve the HTML directly, for example: https://docs.api.nuxtjs.org/en/guide/commands
See https://github.com/nuxt/docs

You can also store your mardown files to the static folder, use axios to fetch them and use some library to parse the mardown and render the html via the v-html directive.

If you need help don't hesitate :)

[EmmanuelBeziat]

Thanks. I know what to do now.

I’m currently mergin all my stuff into Nuxt; it’s fairly simple and powerful. I just tried with some dummy content API for the moment, but I’ll check later how to get my own content.

For the moment, I’m trying to find every answer to my (many) questions in the docs. I’ll let you know if anything bugs me.

Thanks again!

[muhajirdev]

Hi @EmmanuelBeziat , did you solve this?

I am trying to achieve the same thing too. Would be nice if you can share the solution with me 😁

[EmmanuelBeziat]

@muhajirframe hi

I did exactly what @Atinux did: I created a rest api in nodejs (here it is if you want)

Then I call the result with axios (example)

[heejongahn]

Hello @Atinux, I'm trying to achieve fairly same thing to use Nuxt.js for my blog. While figuring out the way to use markdown, I found this issue.

While reading the thread I was wondering: why implement API at all anyway, when we can just include all markdown files into generated outcome and let file system do the job?

In other words, what is, if any, the shortcoming of letting page directly read & parse markdown file by its own compared to making implement API doing just that and call the endpoint instead?

I thought it would be better if I can notice and dodge some pitfalls with this approach before I actually start implementing 😅

[Atinux]

Hi @heejongahn

It's a good point, I decided to create an API for multiple points:

• Not include libraries to parse Markdown and to highlight the code = Smaller JS bundles sizes (look at this MD page and its result from the API)
• The API is synchronised with the Github repository (every commit refresh the content of the API) = No need to rebuild my Nuxt application everytime I update a page.
• No markdown parsing on client-side = Faster rendering on client-side
• Custom logic to translate the website: https://docs.api.nuxtjs.org/lang (it's a mix a every lang.json from every folder)
• I only need to scale my API if I have more traffic, and also use some caching until a new commit comes

Some pitfalls:

• I have to start 2 servers (Nuxt.js application + API)
• I need to include axios to make API call (but it still lighter that a mardkown parser + hightlight.js)

[heejongahn]

@Atinux

Thanks for the detailed answer! I'm still not sure which route I'll take (as I would be happier if I can keep nuxt generate + gh-pages = zero server` scheme), but all the points you've made looks perfectly valid to me.

Thank you again for helping out, have a nice day 😇

[pi0]

@heejongahn For exact reason and simplification next releases will include a new option serverMiddleware so there won't needed using an extra API, both benefits of flexibility from dynamic serving and zero server in one place :)

[heejongahn]

@pi0 That sounds great, can't wait! Thanks for the heads up 👍

[phivk]

I came across this issue whilst looking for a similar solution as @EmmanuelBeziat's original post.

I have also found https://github.com/nuxt-community/nuxtent-module which seems very attractive for this use case. I am wondering:

• what is the status of serverMiddleware mentioned by @pi0
• would people recommend using nuxtent-module?

many thanks!

[getDanArias]

I am also interested on @phivk questions. I have not been able to get nuxtent to work. Thanks for any insight! I'd love to create a solid blog with Nuxt that uses local markdown files :)

[joostdecock]

+1 to this. Nuxtent is currently broken as it's not updated to the new hooks system (issue here, but it seems stale).

The nuxt generate option is very exciting for people (like me) who are looking to port an existing Jekyll site to nuxt. However, existing sites come with a bunch of markdown files and converting them all to vue files is not exactly fun. Furthermore, it raises the bar for non-technical people to contribute fixes to your site's content.

In addition, running a server-side API is goes against the idea of having a statically generated site in the first place.

Is there documentation on what it would take to port nuxtend to the new hooks system? I'm a bit of a noob when it comes to JS development, but I wouldn't mind putting in the effort as I think this is really a missing piece of the puzzle for me, and many others in a similar situation.

[thenickname]

@pi0 I know this thread is pretty old. But could you further explain how serverMiddleware can help achieving a fully static (no api) site in Nuxt?

I mean how could it help avoiding a separate microservice when, say, you are using nuxt generate? Could it be used to somehow preprocess all markdown files and make them accessible as html in static folder?

I also wonder, how to create compound pages? Like a blog post overview page containing a list of the summaries of all posts?

My guess is that as of right now, Nuxt generate is not a good fit for something like that. Because it would involve reading all markdown files at build time and create some kind of data structure (json file?) containing a list of all "posts" to be consumed during generate or during spa mode...

[joostdecock]

@thenickname Nuxtent now works with the new hooks system and does what you want: https://github.com/nuxt-community/nuxtent-module

I have a fork called nuxtdown that has some more experimental stuff in it: https://github.com/joostdecock/nuxtdown-module

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.