Nuxt.js: Middleware ignored during static generation?

[NateTheGreatt]

I currently have a middleware parsing .md files for the respective route being accessed. This works well in dev mode, however when I run the generate command the pages do not contain the parsed .md data (component data is still there).

Is this intended? If so, is it possible to run middleware during static generation?

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

[pi0]

@NateTheGreatt I was doing same thing past week, Suggest you using markdown loaders for this.
working example.
nuxt.config.js
nuxt project src

BTW about your situation i think you are parsing it using a directive or mounted() entry point which is not happening on SSR/Static generation

[NateTheGreatt]

Thanks for the suggestion @pi0 !

This is my component for displaying pages:

<template>
  <section class="container" v-html="html"></section>
</template>
<script>

export default {
  data (context) {
    return { route: context.route, html: context.html }
  },
  head () {
    return {
      title: this.route.name
    }
  }
}
</script>

context.html is generated by the middleware.

Unless there is a way to make this work, I will implement your method of generation. Thanks again for the examples!

[pi0]

Would you please also share your middle-ware implementation ?

[NateTheGreatt]

Whoops, meant to but while editing I accidentally removed it

import axios from 'axios'
import marked from 'marked'

var baseUrl = 'http://localhost:3000'

export default function (context, next) {
  var route = context.route
  if (route.name) {
    var url = baseUrl

    if (route.name === 'log') url += '/posts/'
    else url += '/pages/'

    url += `${route.name}.md`

    axios.get(url)
      .then((res) => {
        context.html = marked(res.data)
        next()
      })
      .catch((e) => {
        next()
      })
  } else next()
}

More context: I store my .md files in the /static folder so I am able to fetch them from the middleware. In my project there exists separate but respective vue component pages for displaying these files.

[Atinux]

Hi @NateTheGreatt

The middleware is called on the static generation, but you have to know that the server is not listening, so http://localhost:3000 will be 404.

You should open 2 tabs in your terminal with:

1. nuxt dev
2. nuxt generate

[NateTheGreatt]

Ah, of course -_-. Thanks for pointing that out!

[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.