Client Structure

The Compiled Application

The public/ directory contains your compiled client application and static assets. This directory is updated when building the client application with npm run dev or with npm run prod.

public
├── css
├── data
├── favicon.ico
├── fonts
├── images
├── js
├── manifest.js
├── mix-manifest.json
└── vendor.js

JavaScript Resources

The resources/js/ directory contains your client application JavaScript and Vue components. The main entrypoint which loads the rest of the application is app.js

resources/js
├── Components
├── Jetstream
├── Layouts
├── Mixins
├── Pages
├── app.js
├── auth.js
├── bootstrap.js
├── http.js
├── i18n.js
├── locales
├── plugins
└── store

Layouts

The resources/js/Layouts/ directory contains your Application Layouts.

resources/js/Layouts
├── App.vue
├── AppLayout.vue
├── Blank.vue
├── Boxed.vue
├── Dynamic.vue
├── Fixed.vue
└── Sticky.vue

Pages

The resources/js/Pages/ directory contains your Application Views.

resources/js/Pages
├── API
├── Dashboard.vue
├── Demos
├── ForgotPassword.vue
├── Login.vue
├── Profile
└── Register.vue

Demos

The resources/js/Pages/Demos/ directory contains the demo Application Views. The pages here are mapped to dynamic layout routes from routes/web.php as :layout/:page which results in routes like http://luma-laravel.test/app/home which will set the layout to app and will load the page home

resources/js/Pages/Demos
├── billing-history.vue
├── billing-invoice.vue
├── billing-payment.vue
├── billing-upgrade.vue
├── billing.vue
└── ... many more

Components

The resources/js/Components/ directory contains your Vue.js Components.

resources/js/Components
├── Page.vue
├── RouterLink.vue
└── Settings.vue

Locales

The resources/js/locales/ directory contains localization files. Translations here are available globally in your Vue app.

resources/js/locales
├── en.json
└── ro.json

Mixins

The resources/js/Mixins/ directory contains Mixins, a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options. More information about the usage of mixins in the documentation.

resources/js/Mixins
├── InteractsWithErrorBags.js
├── layout-config.js
├── main-drawer.js
├── navbar-config.js
├── settings-config.js
├── sidebar-config.js
└── sub-layout.js

Plugins

The resources/js/plugins/ directory contains your Javascript plugins that you want to run before mounting the root Vue.js application. More information about the usage of this directory in the documentation.

resources/js/plugins
├── app.js
├── bootstrap-vue.js
├── bv-form-image-group.js
├── fmv-avatar.js
├── fmv-charts.js
├── fmv-highlight.js
├── fmv-input-group-merge.js
├── fmv-layout.js
├── vue-luma.js
├── vue-meta.js
└── vue-quill-editor.js

Vuex Store

The resources/js/store/ directory contains your Vuex Store files.

resources/js/store
├── auth.js
├── index.js
├── layoutConfig.js
├── navbarConfig.js
├── settings.js
├── sidebarConfig.js
└── sidebarMenuConfig.js

Application Style

The resources/scss/ directory contains your un-compiled SCSS style.

resources/scss
├── ...
├── _variables.scss
├── app.scss
└── vendor

Table of Contents

Frontend Matter

Beautifully crafted Bootstrap themes and templates for modern web apps.

Themes

Templates

Company

Illustrations by Freepik Storyset