Indexing a Vue SPA for Search?

[saintsGrad15]

Has anyone had any success setting up search functionality in a Vue3 SPA?

To start, I know there are tools for actually conducting the search. Algolia is one.

What I'm looking for is how to crawl my site and build a searchable index.

The challenge is that in my raw source files, the finalized content is not visible. For instance, on any given "page" (a Vue SFC) I may use other components that will supply their own content somehow (even just a header, etc) or may display the content I give it via props.

As such, the content on any given page can seemingly only be realized once the Vue application has been bootstrapped and each page's components have been mounted.

I've considered using testing frameworks in order to run the site in a headless runtime. That way, I can at least "visit" each page and scrape them for content. Cypress doesn't seem to present me with any way to persist what I would find during that workflow. I can't see how to gain access to my local filesystem during a Cypress test. Understandable because it is running in "browser land" so Node packages aren't available.

I've not taken the opportunity to try Vitest, as an alternative. I'm choosing to ask ya'll first, before I continue down the path of reinventing this wheel.

Once I can "index" my site, I don't really expect searching to be too difficult. It's not a big site so I'm not concerned about performance.

Oh, one final hurdle to consider: The site is being served by GitHub Pages (in a private GHE instance, so I can't provide a link) so I have no backend. For the sake of searching, moving the deployment to have a backend is not out of the question. GH Pages was just an easy environment to use for an internal site.

TIA for your wisdom and experience!