In one of the recent projects there was this requirement to create a FAQ page for a small application. The change was not planned and came up during the final stages of the project.

I took it in the same spirit as what I do for a home page. I did not plan to use SSR or a static-site generator, but rather leaned back on the excellent ‘prerender-spa-plugin’.

prerender-spa-plugin will take care of pre-rendering the content, and I don’t need to worry on the performance or the SEO side of things.

(PS: I have not used Nuxt in my real-world project yet. Though I sometimes wonder why. This would have been far simpler.)

The next problem was to create FAQs in a page.

The ideal solution was to have FAQs sitting as static content (e.g. a CSV file) processed during render (or, during generation of the static page). Or, FAQs coming in from a database table that can be changed by an admin using the ‘admin’ application.

With the given time constraint and considering the fact that FAQ will not change for months at end, I decided on a far simpler but not-quite-scalable approach - included the static FAQs within a component and threw in custom CSS to format the FAQs.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<template>
  <div>
    <v-container grid-list-md class="mt-5">
      <v-layout row wrap>
        <v-flex xs12>
          <div class="amber--text display-2">FAQ</div>
        </v-flex>

        <ol class="ml-3 mt-5">
          <template v-for="(item, index) in faqs">
            <div :key="index" class="body-2 mt-4">
              <li>
                <span>{{item['question']}}</span>
                <br />
                <br />
                <span class="body-1" v-html="item['answer']"></span>
              </li>
            </div>
          </template>
        </ol>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
  import { mapState, mapActions } from "vuex";

  export default {
    data() {
      return {
        faqs: [
          {
            question: "What is the answer to life?",
            answer: "42",
          },
        ],
      };
    },
  };
</script>

Does the solution work? Yes.

Was the client happy? Yes.

Am I proud of what I did? Not quite.