smadeira's avatar

Vue.js Code Structure

I am building an app with a Vue front-end and Laravel backend. In terms of code structure I see two options.

  1. create the Vue app in the resources folder for the Laravel project.

  2. Create a separate Vue project for the front-end and the Laravel project would only consist of the back-end code. They would have separate github repositories.

My concern is ongoing code development and deployment. If I make a change to the Vue side, I don't want to redeploy the whole code base to the server. If they are separate applications in separate Git repositories, there is built-in separation where front/back end developers aren't messing with the back/front end. Perhpas I am overthinking this and I'll admit that ongoing deployment isn't my strong suit. Any insight and opinions are welcome.

0 likes
3 replies
bugsysha's avatar

Depends what do you need. In my opinion both approaches are valid.

No need to redeploy backend if you changed frontend. Put backend on api.example.com and frontend on example.com.

TheRealHyveMind's avatar

Personally, I do option 2.

It allows me to deploy a single section of my site without needing / risking changes being made elsewhere, and it also helps keep the code more focused.

Having two projects isn't any harder to manage, but much easier to work on. I used to find myself being distracted with UI elements or design stuff while trying to focus on the API.

I use Laravel, Vue & Nuxt to do this, and it works really well.

bugsysha's avatar

So number two (like Bono - South Park reference) 🤣

Please or to participate in this conversation.