Structuring js files vue cli project

Question

How should I structure my Vue CLI project? I am unable to find any proper documentation regarding this. Basically I have around 10 modules and each module has a js file associated with it.

Currently, I am putting all the pages written in my router.js in views directory and all the components in the components directory. I want to know where should I keep mine js files?

1. All the js api calls associated with every module

2. JS files containing all the constants related to every module??

Answer 1

Q1: Usually API calls are stored under a respective store if you are using Vuex. If not you can use define them as mixins and use where necessary. The mixins are the parts of the javascript code that are reused in different components. In a mixin you can put any component's methods from Vue.js they will be merged with the ones of the component that uses it.

Q2: This can definitely go under mixins.

You can also have a util folder (optional) where it contains the functions that you use in components, such as regex value testing, constants, or filters.

Refer to this boilerplate if your project is mid-scale or large-scale.

Answer 2

create a service folder,create service.js -api call goes here(now all you need is to call it when ever you need it) you have a store folder with store.js(index.js) inside store folder create modules folder with you modules. inside store.js create modules:[user,event...] basically that's it. edit your modules files event.js user.js. you can add getters,mutations,state,actions. just dont forget export const namespaced = true so it`ll go to the global namespace