How would you build a ... search page?
hey guys, what would be the right approach on building a search page with nuxt?
the system i'm building has a 3rd party server that serves the whole data (including search functionality) and the requirements are:
- have the ability to send some filter params to the server (categories, tags etc) & sort them (asc/desc, by relevance, date, title whatnot)
- keep the state of the filters in the URL
- on initial page load, get the filtered results according to the URL filters
- display the results in a certain page (e.g.
/search)
- hide the actual api call on the frontend
my initial idea was „hey, i'm gonna use a regular form and send the filters as GET”, but things are... not ideal, as this requires a page reload and have all kind of odd effects (and i can't use nuxt-link for a form lol :D)
what i've done instead is:
- used form actions https://form-actions-nuxt.pages.dev/usage/form-actions module
- keep the filter state in a query = reactive({}) object
- update stuff in router: router.replace({ query })
- on page load, i initialize the query = reactive({...params from useRoute().query })
Now, this do work, it's all good. BUT this feels a bit ... hacky? or that's the way to go?
thanks!2 Replies
Curious to know why you feel it feels hacky? What are you doing that doesn’t seem right? What have you seen or read that questions your existing implementation?
can't really pin-point, it's just a gut feeling 😄
(i'm new to nuxt)
for example, one the fact that i have to serialize the query on both client (for router updates) and on server action (to send to api) feels ... odd