javascript – Structure of a vue application in a magento theme context (NOT STOREFRONT)

Unfortunately google really wants to tell me about Vue storefront whenever I search for it with magento but I only want to integrate vue as part of a regular frontend theme..
Primarily to work on a more modular basis, keep other magento elements that are already solid, benifit from 4rd party modules etc and still benifit from seo without having to consider ssr
Apologies for essentially posing 6 questions (but hopefully you can observe they’re all related and wouldnt nessacerily make sense standalone)

Shouts out to both @max-pronko and who are both providing some excellent content out there. (Currently trying to get Shurst’s docker image working stable on WSL2 but thats another story, fairly convinced this my stack approach and will be joining MAcademy once Ive got a stable setup and feel orientated) both of them contributed to this fairly solid answer on a simple implementation.

However – a single vue component wont cover the complexities of complete vue app.
My first inline vue app will likely be a more user-freindly approach at a complex bundled product which I wish to augment with step-wise forms to help breakdown the bundle configuration before adding it to the cart.

Essentially what I’m querying is a rcommended approach / structure to the above to compose a more complete Vue app.
I’m presuming I dont need to make a fresh magento module for every component of the app instance, including a vuex store etc?

Referring to mentioned link and the Imperative implementation..

could I have a full hierchy of vue components in folders under the directory “app/code/Macademy/JsFun/view/frontend/web/js/vue-test.js”
such as web/js/ui/button.js , web/js/store/actions.js, reducers.js etc etc

and then import these
into my vue app as

    define(('vue'), function(Vue) {
'use strict';
import Button from './ui/button';
import Store from './store/store';

return function(config, element) {
    return new Vue({
        el: '#' +,
components: ('Button', 'Store')
        data: {
            message: 'This is a test'
methods: ({onClick: () => {Store.commit('click')}}) /// or whatever


and then use those elements such as in the phtml template ?

Presumbly Ill also hit the case where by ill have a library of UI components for instance that ill want to re-use in multiple vue apps on different pages.
…in which case, can anyone recommend an approach to have a seperate re-useable library as one magento module which can then be pulled in in turn to route specific modules for usage?

(3) API or Page enhancement – any opinion on whether for the proposed “bundled product configurator app” in question I should approach a regular bundled product page and enhance it with vue or pull the entire product data required from Mageneto’s API to build my models from? Is magentos API viable for usage or will I have to extend it/build my own endpoints for what is needed?

(4) Compilation – any tips on a good development workflow? Presumbly requirejs takes care of the compilation aspect? so i dont need a webpack config or anything to compile everything down ? Or would you recommend compiling down to a single finished js file that can be imported into the mage theme?

(5) Would the approach work alongside existing knockoutjs components?
Can I add to the cart with vue js and refresh the knockoutjs standard magento theme cart all in one?

(6)Bonus query: Add to cart for instance, just curious as to some pointers on how Ill acheive this in the proposed bundled product app.
Can i assume if i grab the product data from Mages API, it will be in the right format ready to just post to some “add to cart” endpoint?

I’m considerably more confident with Angular – just wondering if I can use the same approach as the correct one for Vue if I decide to go down that route.

Are there any good theme boilerplates out there that I can build from / or demos to observe the right practice to organise a substaintial vue micro-application within the context of a Magento theme?

Thats enough questions I think to give a clear picture of what Im trying to acheive and some of the anxieties I have around the unknowns… any contributions that tackle elements of the above would be greatly appreciated!
Thanks, Bob