NetliftyCMS prerender folders

products.vue

<template>
  ...
</template>

<script>
export default {
  data() {
    return {
      product: Object
    }
  },
  created() {
    try {
      this.product = require(`@/../content/products/${this.$route.params.slug}.json`);
    } catch (e) {
      console.log('Product missing'); // TODO redirect to 404
    }
  }
}
</script>

router.js

import Vue from 'vue'
import Router from 'vue-router'

import index from './views/index.vue'
import products from './views/products'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  scrollBehavior: () => ({ y: 0 }),
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    },
    {
      path: '/products/:slug',
      name: 'products',
      component: products
    },
  ]
})

vue.config.js

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const fg = require('fast-glob');

/**
 * Glob is a library to get filenames in a folder.
 * To prerender all bike pages, all files in content/products/
 * are inserted.
 *
 * The product names are mapped because glob returns a full path
 * but rerenderer plugin requires url.
 * maps content/products/bike-name.json => /product/bike-name
 */
const pathEntries = fg.sync('./content/products/*.*')
  .map(entry => `/products/${entry.split('/').pop().replace('.json', '')}`);

module.exports = {
  devServer: {
    port: 3000
  },
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: [
          '/',
          '/search',
          '/katalog'
        ].concat(pathEntries)
      })
    ]
  },
  chainWebpack: config => {
    config
      .plugin('copy')
      .use(require('copy-webpack-plugin'), [[{
        from: 'public',
        ignore: ['./index.html', '.DS_Store']
      }]])
  }
}