How does Nuxt generate static html from markdown file?

Question

This is most solution I found:

/// nuxt.config.js

export default {
  ......
  generate: {
    routes: fs.readdirSync('markdownDir').map(filename => {
      return {
        route: `/articles/${path.basename(filename, '.md')}`,
        content: fs.readFileSync(path.resolve('markdownDir', filename))
      }
    })
  },
}

/// _articleDetail.vue

<template>
    <div>
        <div class='markdown' v-html='html'></div>
    </div>
</template>

<script>
export default {
......
  async asyncData({params, content}) {
    return {id: params.id, html: processMarkdown(content)}
  },
}
</script>

It will generate all Html with article id,but those Html file dosen't contains the real markdown content.It's just like:

......
<div class='markdown'>
(I need markdown content here,Not by js!)
</div>
<script src="/_nuxt/844cb81.js" defer></script>

/_nuxt/844cb81.js has the real markdown content! I think it's will be bad in SEO. So I want a solution that can directly generate html that contains origin markdown content.

Is your target set to static (default is server) and ssr set to true (default value) ? One solution to debug this is to disable JS and check the source code of the page, you will be sure if it's properly generated ! :D — kissu
@kissu Thinks,target is static,and try ssr bothtrue,false,don't work! — injoker1

injoker1 injoker1 · Accepted Answer · 2021-04-03T09:06:40

Figured out,I have made a mistake.

all NuxtLink that points to article-detail page must be wrote in static,that means you can't write them like:

// the `loading` default is true

<div v-if='loading'>
    loading...
</div>
<div v-else>
    <NuxtLink v-for='id in idList' :to="'/article/'+id"/>
</div>

Seems that Nuxt have compiled .vue file in generating static routes,and only invoked asyncData() function,use default data to compile.

How does Nuxt generate static html from markdown file?

1 Answers