Architecture strategy for my app

Hello and happy new year,

I’m new to VueJS and I have a question before going too far in my project. It’s simple: it’s an application to help citizens of my town to fill official forms, these ones being too complicated for some of them (elders, etc.).
To get to the form-filling helper, you first have to select the case that applies to you, by clicking on different buttons. For example, you have a first choice of 3 buttons, then 2 (the former 3 having disappeared), then you’ve got your form-filling helper (the 2 previous buttons having disappeared). The goal is to have a really user-friendly UI, with big buttons at the beginning.

At first, I thought of using vue-router inside a “Button.vue” component, with a succession of links (/choice1-2/ then /choice1-2/choice2-2/, etc.), but then I thought it was more convenient to use a store to refresh the buttons. Actually, if I use a store, it doesn’t seem I can change the URL (and the history). Moreover, it seems tricky to get access to a store from a sub-component (I didn’t find the doc, for the moment, but it should exist somewhere).

I’d like the user to be able to get back to the previous step at every moment and displaying the good buttons or the good form-filling helper when the user enters the correct URL.

My question is: am I in the good direction? What would be better (regarding the quality of the code).

Thanks a lot :slight_smile:

Use the store, you can access store at anytime via this.$store

The store is indeed useful. Nevertheless, I’d like to save the different steps. When I use “previous” and “next” of my browser, the store doesn’t get back.

If you link all your component data to store values, then when you change views to the various components the data will be restored?

I’d like to, yes.