How to Widget reactivity client side ?

[ezzle]

ApostropheCMS V3 : How to have a Selected item in one widget trigger reactively displayed content in another widget in the same page client-side

I have 2 widgets in a Page. The first widget displays a list of items names. The other widget displays details of the selected item in the first widget. Similar to filtering mecanism for piece-type. How can I implements this kind of reactivity of widgets client-side ?

[BoDonkey]

Not sure if I can give the best answer to this, but... What type of info is the second widget displaying and does it have to be two widgets? At first blush, I'm guessing you would have to use some front-end JS to listen to the one widget and then add data to the second widget.

[boutell]

Generally speaking, Apostrophe has very few opinions about frontend JavaScript. If you want to use a reactive library like Vue or React to implement widget players, you can do that, or you can write vanilla JavaScript.

One challenge is that two separate widgets occupy separate parts of the DOM so you can't just put them in the same Vue or React app. A solution to that is to use a reactive store library like Vuex or Redux, with a single instance shared by all apps in the page.

Another challenge is that, currently, there is a bug in vue-loader that makes it difficult to use Vue 2 and Vue 3 in the same project, even though in theory they should coexist. Since Apostrophe 3 uses Vue 2, we currently use Vue 2 for frontend code as well if choosing to use a frontend framework at all for a project.

The vanilla JavaScript solution might be easiest for your project though. Add appropriate data- attributes to your elements in widget A and query them from the player for widget B; be prepared for scenarios like "there isn't any" or "the user chose to add three different widgets of type A to the page."

[ezzle]

Thank you for. Actually I implemented some experiments using vanilla js. I would like to test with vuejs and vuex ou pinia. But I don't have any idea on how I can use vuejs to implement reactive widgets. Some tips or examples ? Really appreciated. As I am new in Apostrophecms community, I don't know how and where vuejs is or can be used client or server side. Is there documentation for that aspect? Best regards

[boutell]

If you need it for SEO reasons, server side Vue can be accomplished using our async components feature. You can use that to do Vue server side rendering.

As for browser side, currently you'd typically do that by using your own webpack build to handle compiling your Vue code. You would set your output target folder for webpack to the ui/public subdirectory of one of your modules, which would cause apostrophe to import that file as-is into your frontend build.

So in other words you'd do it exactly like you'd do it in any other Vue app based on webpack and not using the Vue CLI.

[boutell]

One issue you may encounter is that at the present time, projects must also use Vue 2 to avoid a package management bug in the Vue ecosystem which prevents Vue 2 and Vue 3 from being used in the same project. Apostrophe uses Vue 2 for its admin UI.

[ezzle]

Hi.

Any update ? #3913
Please help : Any documentation on how to use Vuejs instead of /with Nunjucks to implement custom widget ?

[boutell]

Apostrophe renders widgets on the server side using Nunjucks. If you wish, you can write an apostrophe async component that calls Vue server side rendering. Vue and Vue SSR are documented on the Vue website, so it's a bit out of scope for our documentation.