I’m slightly chuffed by this, I was doing something and build Vue.js based search from a statically created index.
The fun part was storing/passing a “category” variable from the page’s HTML to the Vue app, and only slightly problematic by using Pelican to generate the site.
Pelican uses {{}} for tempalte variables, same as Vue, so I had to reconfigure Vue’s delimiters (hence the || around item.message)
Passing the category from the static HTML to Vue
- The
searchmetaapp is defined in thediv#searchmetatag. - The
data-categoryattribute of thediv#searchmetatag is generated by Pelican. It’s used on the categories pages, so that search only shows the in-category ports. searchapp.getCategory()looks for the attribute and sets it tosearchapp.category
Generating the search data
I generate a list of the pages, like [ "tcp/1", "udp/53" ] etc, and it’s stored as a static JSON file in the Pelican theme. In this case as /theme/searchdata.json.

