The script follows conventional Laravel + Vue.js directory structure. The directories & files are grouped and placed in desired location. Here is the directory structure of Laravel application.



All the directories except "node_modules" are part of Laravel application. When you run 'npm install' to install npm dependencies, you get a directory called "node_modules" in your script.


We are assuming that you already have the knowledge of Laravel therefore we are not providing any details of its directory structure. If you want to know more about it you can click here.


Here is the detailed directory structure of resource directory where all the Vue components, assets (Images, Javascript, Stylesheets & Plugins are placed).



The script uses only single Laravel blade file which is placed under resources/views/home.blade.php, which actually hosts the Vue components and other assets.


Here are details of all the directories inside resources directory.


Images:

This includes all the images that are referred in any style sheet or js file. Make sure you put those images in this directory only. During compilation, you will get all these files processed at public/images directory.


Js:

This directory is basically the most important container for this script. As all the Vue components are basically Javascript file therefore they are placed under this directory. This includes three sub directories:


Api:

API functions grouped according to their prefix into several files.


Components:

These are small snippets which can be put inside any Vue script or components. For details visit here.


Core:

These are bunch of components, configurations, directives, plugins and utility files grouped into a core directory to be used in any future applications.


Mixins:

Vue mixins to make some scripts reusable to multiple components.


Router:

It is used to define the Vue router path and the component it will render for the page. It is like routes.php or web.php file in Laravel. It also has the routing guards for the frontend of the app. For details visit here.


Service Worker:

These are the service worker files to register service worker and implement cache, offline functionality and push notification in the app.


Store:

It is used to define Vuex store. It consists store files divided according to their modules and use. For details visit here.


Views:

These are pages which will be rendered when you navigate to a certain page. For example, If you navigate to {your_domain}/login, the file resources/js/views/auth/login.vue is rendered. All the files are grouped by modules.


Here are details of files available in resources/js


app.js:

This is entry point of all the Javascript files. It is also a place where you define new Vue app.


bootstrap.js:

It is default Javascript file where you can import various dependencies including various plugins like Axios, Vue-Router, Vuex etc.


event-bus.js:

This is Vue event-bus file to pass event from one component to another.


var.js:

Variables used and required throughout the vue application.


Lang:

This directory contains all the locale directories with module wise locale translations.


Public:

This directory contains all the static Assets which are not included anywhere in Vue components.


Saas:

This directory contains all the SCSS files required for the home.blade.php. Head tag includes single style sheet called style.css which includes all the styles for the root structure of the app. 


Var:

This directory contains all the Variables used and required throughout the application.


Views:

As mentioned earlier this directory has the blade template file home.blade.php to host the Vue components.


When you deploy your application in live server, you need not to upload contents of "node_modules" directory. During compilation all the required files are bundled and placed at public directory.


If you have an query regarding this directory structure, please raise a ticket at https://support.kodemint.in