Suppose you are just starting off with your latest side project. Vue enabled you to turn your idea into reality. And now you want the search engines to start crawling your brand new site. Of course the landing page is also built with Vue. For regular visitors this page loads fast and responds snappy, thanks to the optimized bundle webpack created for you. Only the web crawlers tend to prefer raw html and don't care what the page looks like visually.

Not willing to spend ages of your precious spare time on a full fledged SSR solution like nuxt or an almost even invasive prerenderer. Why not try to reuse the templates your end user is presented with a touch of NGINX magic added to the mix.

Render static HTML from Vue templates

Include Vue templates

First of all we need to teach Handlebars how to include external files

const handlebars = require('handlebars')
const fs = require('fs')
const path = require('path')

handlebars.registerHelper('importVueTemplate', (relativePath) => {
  const absolutePath = path.join(__dirname, relativePath)
  const source = fs.readFileSync(absolutePath, 'UTF-8')

  // Peel out the template content
  const regex = /^<template>([^]*)<\/template>/

  let matches = regex.exec(source)

  return matches[1]
})

Render markdown content

const handlebars = require('handlebars')
const fs = require('fs')
const path = require('path')
const marked = require('marked')

handlebars.registerHelper('renderMdFile', (relativePath) => {
  const absolutePath = path.join(__dirname, relativePath)
  const source = fs.readFileSync(absolutePath, 'UTF-8')

  return marked(source, {
    sanitize: true,
    breaks: true,
    gfm: true,
    tables: true
  })
})

Handlebars template

<!DOCTYPE html>
<html>
  <head>
    <title>dochub - share the knowledge</title>
    {{! put all of your SEO tags here }}
  </head>
  <body>

    <header>
      {{#importVueTemplate '../src/components/LandingHeader.vue'}}{{/importVueTemplate}}
    </header>

    <main>
      {{#importVueTemplate '../src/components/LandingPage.vue'}}{{/importVueTemplate}}
    </main>
  </body>
</html>

Compile to html in a build step

let source = fs.readFileSync(path.join(__dirname, `/index.hbs`), 'UTF-8')
let template = handlebars.compile(source)

fs.writeFileSync(path.join(__dirname, '../dist/crawlers/index.html'), template({}))

Serve static HTML to web spiders

Now we have to intercept web crawler traffic and redirect this to the static page we just created.

location / {

  root /usr/share/nginx/html;

  # Enable history mode for Vue Router
  try_files $uri $uri/ /index.html;

  # Checking for top 8 web crawlers (see https://www.keycdn.com/blog/web-crawlers)
  if ($http_user_agent ~* (googlebot|bingbot|slurp|duckduckbot|baiduspider|yandexbot|sogou|exabot)) {
      root /usr/share/nginx/html/crawlers;
  }
}

Posted earlier on my own blog: https://boplicity.nl/knowledgebase/Vue/A+Poor+Mans+Vue-SEO+Solution.html

Blog

A Poor Man's Vue-SEO Solution

Kees de Kooter