Project Structure

The Compiled Application

The dist/ directory contains your compiled application which you can deploy. This directory is created when building the web application with npm run build or with npm run generate.

dist
├── css
├── data
├── favicon.ico
├── fonts
├── images
├── img
├── index.html
├── index.ssr.html
└── js

Vue Configuration

By default, Vue CLI is configured to cover most use cases. This default configuration can be overwritten with the vue.config.js file. More information about the available options at cli.vuejs.org/config/#global-cli-config.

├── vue.config.js

Layouts

The src/layouts/ directory contains your Application Layouts.

src/layouts
├── app.vue
├── blank.vue
├── boxed.vue
├── fixed.vue
└── sticky.vue

Pages

The src/pages/ directory contains your Application Views.

src/pages
└── _layout
├── billing-history.vue
├── billing-invoice.vue
├── billing-payment.vue
├── billing-upgrade.vue
├── billing.vue
├── blog-post.vue
├── blog.vue
├── ui-syntax-highlight.vue
└── many more ...

Demos

The src/pages/_layout/ directory contains the demo Application Views. The pages here are mapped to dynamic layout routes from src/router/routes.js as :layout/:page which results in routes like http://localhost:8080/app/home which will set the layout to src/layouts/app.vue and will load the page src/pages/_layout/home.vue

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

Components

The src/components/ directory contains your Vue.js Components.

src/components
├── HelloI18n.vue
├── HelloWorld.vue
├── Page.vue
└── Settings.vue

Locales

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

src/locales
├── en.json
└── ro.json

Mixins

The src/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 at vuejs.org/v2/guide/mixins.html.

src/mixins
├── layout-config.js
├── main-drawer.js
├── navbar-config.js
├── settings-config.js
├── sidebar-config.js
└── sub-layout.js

Vendor

The src/vendor/ directory contains several private packages with the core user interface, Bootstrap customizations, the source vue components etc. These should not be modified directly. Learn more about how they're used in the custom style guide, the main application and the customizing components guide.

src/vendor
├── ui-huma
└── vue-luma

Assets

The src/assets/ directory contains your un-compiled assets such as LESS, SASS, or JavaScript. More information about the usage of this directory in the documentation.

src/assets
├── images
└── scss

Plugins

The src/plugins/ directory contains your Javascript plugins that you want to run before mounting the root Vue.js application.

src/plugins
├── app.js
├── bootstrap-vue.js
├── fmv-charts.js
├── fmv-highlight.js
├── fmv-layout.js
├── fmv-vendor.js
├── vue-meta.js
└── vue-quill-editor.js

Vuex Store

The src/store/ directory contains your Vuex Store files. More information about the usage of this directory at vuex.vuejs.org.

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

Table of Contents

Frontend Matter

Beautifully crafted Bootstrap themes and templates for modern web apps.

Themes

Templates

Company

Illustrations by Freepik Storyset