Including Vuejs in adonis

Please how can i structure vuejs for my frontend within an adonis project?

I think there are many ways of doing this. If you want an pure SPA or maybe you will go with the hybride way like i do.

With a SPA you use Adonis only to deal with server stuff and all views and all client stuff like routing is done in Vue. I haven’t gone down that road yet because i think the js file gets so big if it should contain the whole site.

I use Adonis to navigate between my separated and isolated Vue SPA’s and load them dynamically on specific Adonis pages where i need the reactivity and it is mostly in the admin “backend” part. Some parts in the “front” where the guests/users are managing their profile and so on i use Vue but just to list som blogs, show some page content i think Vue is overkill and Adonis does it fine.

This way i have all my functions regarding let say product in one mini Vue SPA and once Adonis has loaded the product page im in my Vue SPA called product. Now i use Vue completely as an Vue SPA where Adonis only serve the database stuff by using Axios in Vue to call an Adonis API controller witch then does the db stuff using an repo. All client side stuff like navigation within this product SPA i done by Vue router, all states are handled by Vuex.

The structure om my resources/assets/js/product:

As you see in components i have a general folder for the page structure that is used in every part of the product SPA and for now it only has product component but there will be suppliers, manufacturers and so on. Each on these will also have it’s own router and Vuex store module.

For now it seems to work but i might end up with just one big Vue component time will tell.

Please give me some input on this approach and how you would do it instead.

Hey, I was thinking of doing something similar to this. But i currently have some problems with making vue work inside edge. Here’s a link to my problem: Edge + vue partially works :-/

Maybe you can help :slight_smile:

Hi,
Well, i have a different setup now. My project is three different parts:

  1. www.domain.com - Quasar
  2. admin.domain.com - Quasar
  3. api.domain.com - Adonis API only

Both www and admin uses api. I used Nuxt.js (Vue framework) and Vuetify (Material design framwork for Vue) in SSR mode before but with Quasar v1.0 now supporting SSR i use Quasar framework that is like a combination of Nuxt and Vuetify but soo much more.

Its really fast and besides a ton of ad ons you can use the same codebase to build desktop apps for Mac and Windows and iOS and Android apps.