# Laravel Integration

Vuexy provide laravel starter-kit to speed up your laravel development with Vuexy Admin.

# Folder Structure

Once you download the template from ThemeForest, you will find the below folder structure in vuexy-vX.X/vuexy-vuejs-laravel-template/. This folder contains full version of laravel using Vuexy Vuejs Admin.

  1. vuexy-vuejs-laravel-template/
  2. ├── app                      # Controllers and Models 
  3. ├── bootstrap                # Contains cache and app.php
  4. ├── config                   # Application's configuration files
  5. ├── database                 # Migrations, model factories, & seeds
  6. ├── public                   # index.php ,static folder & Build 
  7. ├── resources                # Views, Layouts, store and vue.js components
  8. │   │
  9. │   ├── assets/
  10. │   │   ├── css/
  11. │   │   ├── fonts/
  12. │   │   ├── images/
  13. │   │   └── utils/
  14. │   │
  15. │   ├── js                   # All JS Files
  16. │   │   │
  17. │   │   ├── src
  18. │   │   │   │
  19. │   │   │   ├── acl/                                # Vuejs Access Control
  20. │   │   │   ├── auth/                               # Auth0 Service
  21. │   │   │   ├── components/                         # Vuexy Admin custom components
  22. │   │   │   ├── fake-db/                            # Fake Database for mocking API calls
  23. │   │   │   ├── filters/                            # VueJS filters
  24. │   │   │   ├── firebase/                           # Firebase Configuration
  25. │   │   │   ├── http/                               # Fake Requests
  26. │   │   │   ├── i18n/                               # Internationalization
  27. │   │   │   │
  28. │   │   │   ├── layouts/                            
  29. │   │   │   │    ├── components/                    # Layout components
  30. │   │   │   │    │    ├── customizer/               # Customizer components
  31. │   │   │   │    │    ├── horizontal-nav-menu/      # Horizontal Navigation Menu Component
  32. │   │   │   │    │    ├── navbar/                   # Navbar for Horizontal & Vertical Layout
  33. │   │   │   │    │    ├── vertical-nav-menu/        # Vertical Navigation Menu Component
  34. │   │   │   │    │    ├── vx-tooltip/               # Extended Tooltip component
  35. │   │   │   │    │    ├── TheFooter.vue             # Footer Component
  36. │   │   │   │    │    └── VxBreadcrumb.vue          # Breadcrumb Component
  37. │   │   │   │    │
  38. │   │   │   │    ├── full-page/                     # Full page layout for pages like login
  39. │   │   │   │    └── main/                          # Main layout
  40. │   │   │   │  
  41. │   │   │   ├── palugins/                           # Vuejs Plugins
  42. │   │   │   ├── store/                              # Vuex Store
  43. │   │   │   ├── vendor/                             # Vendor Files
  44. │   │   │   ├── views/                              # View files for all pages
  45. │   │   │   ├── App.vue                             # Application main vue file
  46. │   │   │   ├── globalComponents.js                 # Gloablly registered components
  47. │   │   │   ├── main.js                             # Application main js file
  48. │   │   │   ├── router.js                           # router file
  49. │   │   │   │
  50. │   │   ├── app.js                # Entry point
  51. │   │   ├── auth_config.js        # Auth0 Configurations/Credentials
  52. │   │   ├── themeConfig.js        # Theme Configuration File
  53. │   │   └── vue.config.js         # Optional
  54. │   │
  55. │   ├── lang/                  # Include Languages 
  56. │   ├── sass/                  # Include scss files
  57. │   └── views/                 # Contain Blade templates
  58. │
  59. ├── routes/                  # Include Routes Web.php 
  60. ├── storage/                 # Contains compile blade templates
  61. ├── tests/                   # For testing
  62. ├── .babelrc                 # Babel File
  63. ├── .editorconfig            # Related with your editor
  64. ├── .env.example             # Include Database credentials
  65. ├── .gitattributes           # Give attributes to pathnames
  66. ├── .gitignore               # Files and Directories to ignore
  67. ├── .styleci.yml             
  68. ├── artisan                  # Include artisans commands
  69. ├── composer.json            # Dependencies used by composer
  70. ├── package.json             # Dependencies used by node
  71. ├── phpunit.xml              # Related With testing
  72. ├── server.php               # For php's internal web server
  73. ├── tailwind.js              # Tailwind Configuration File
  74. ├── vue.config.js            # VueJS Configuration File
  75. └── webpack.mix.js           # Laravel's webpack file

# Installation

Given below are the steps you need to follow, to install the vuexy-laravel-starter on your system:

Step 1: Open the terminal in your root directory(vuexy-laravel-starter) & to install the composer packages run the following command:

composer install

Step 2: In the root directory, you will find a file named .env.example rename the given file name to .env and run the following command to generate the key (and you can also edit your data base credentials here)

php artisan key:generate

Step 3: By running the following command, you will be able to get all the dependencies in your node_modules folder:

npm install

Step 4: To run the project you need to run following command in the project directory. It will compile the vue files & all the other project files. If you are making any changes in any of the .vue file then you need to run the given command again.

npm run dev

Step 5: To serve the application you need to run the following command in the project directory. (This will give you an address with port number 8000)
Now navigate to the given address you will see your application is running.

php artisan serve

To change the port address, run the following command:

php artisan serve --port=8080    // For port 8080
sudo php artisan serve --port=80 // If you want to run it on port 80, you probably need to sudo.

Watching for changes:Running npm run dev every time you make changes to file is inefficient. Hopefully there’s command so your changes can be watched and get reflected accordingly.

npm run watch

Building for Production:If you want to run the project and make the build in the production mode then run the following command in the root directory, otherwise the project will continue to run in the development mode.

npm run prod

Required Permissions
If you are facing any issues regarding the permissions, then you need to run the following command in your project directory:

sudo chmod -R o+rw bootstrap/cache
sudo chmod -R o+rw storage

# Customization

How to add a New Page:
To add a new page follow the instructions given below:
Step 1: Create a file with the extension .vue under the resources->js->src->views directory. You can also create your file under the your-page-name directory. Let’s create a TestPage for an example with filename TestPage.vue and placing the below code in that file.

<template>
    <div class="">
        <h4>Test Page Content</h4>
    </div>
</template>

Step 2: After creating file you need to declare its route where it can be served on the browser, suppose you want created page to be serve on the route http://localhost:8080/test-page . To access this page define its routes in the resources -> js -> src -> router.js file.
Vue.use(Router)
export default new Router({
mode: ‘history’,
routes: [
{
// =============================================================================
// MAIN LAYOUT ROUTES
// =============================================================================
path: ‘’,
component: () => import(‘./layouts/main/Main.vue’),
children: [
// =========================================================================
// Theme Routes
// =========================================================================
…,
{
path: ‘/test-page’,
name: ‘testPage’,
component: () => import(‘./views/TestPage.vue’),
},
],
},
]
})

import Vue from 'vue'
import Router from 'vue-router'

After defining the route you need to add a new menu in the sidebar navigation. To add the menu go to the resources->js->src->layouts->components->vxsidebar directory and open sidebarItems.js file.

export default [
...,
{
url: "/test-page",
name: "Test Page",
slug: "testPage",
icon: "MailIcon",
},

After completing these above steps you need to run the command npm run dev or npm run watch command in the project directory. After running this process you need to run the command php artisan serve . It will serve your app on the localhost.