Getting Started

Laraspace is an Admin starter template for Laravel 5.7 PHP Framework which includes all the necessary boilerplate for your next web application.

Requirements:

Laraspace has the same requirements that Laravel does but we have mentioned them below anyway for your reference.

Server Requirements:

• PHP >= 7.1.3
• OpenSSL PHP Extension
• PDO PHP Extension
• Mbstring PHP Extension
• Tokenizer PHP Extension
• XML PHP Extension

Other Requirements:

• NPM
• Composer

Suggested Dev Environments:

• Mac: MAMP/MAMP Pro/ Laravel Valet (Recommended)
• Windows: WAMP / Laragon (Recommended & Easier to setup)
• Laravel Homestead

Installation:

1. Clone or Download the Laraspace repository from: http://github.com/laraspace/laraspace-vue
2. Unzip the downloaded folder.
3. Using your preferred terminal , go to the laraspace folder and run the following command to set a random secure Application Key php artisan key:generate
4. Open database/seeds/UsersTableSeeder.php and change the admin's email & password to your preference.
5. Open .env file in your favorite text editor and set the database credentials.
6. php artisan migrate --seed run this command for migrating & seeding the database inside your app folder.
7. Install NPM globally if you haven't installed that already , for more information please refer this link
8. After installing NPM globally , run npm install inside your webroot , it will download all the required dependencies.
9. You are ready to launch!

Vuejs Workflow

We have used Webpack to bundle up the VueJs files using Laravel Mix. You can check out webpack.mix.js for underlying code.

All Laraspace VueJS files are located in resources/assets/js folder.

Directory & File Structure for VueJS

Compiling Assets

Laraspace uses Laravel mix for compiling all the plugins & dashboard's assets. Below is a list of commands you can use :

npm run dev :

Compile assets without watch

npm run watch :

Compile assets and watch the files for changes

npm run hot :

Compile assets and watch the files with Hot-Module-Reload enabled

npm run production :

Compile assets for production with code minification & set the NODE_ENV to production

You can read more about Laravel Mix here.

Sass Workflow

All Laraspace Sass files are located in resources/assets/sass folder.
note: You can remove the components which you're not gonna use inside your project to reduce the filesize.

Laraspace css files compiled output location : public/assets/css/laraspace.css

Directory & File Structure for SASS

Notifications

You can use Toastr & Notie Jquery plugins included in Laraspace by default for firing Notifications in your Vue Components. You can check the examples in resources/assets/js/pages/components/Notifications.vue file.

Components

Laraspace comes with many useful components which you can use in your project directly by just importing it on page where you want to use. Here's a list of all Vue based components included with Laraspace:

• Collapse
• DropDown
• SweetModal
• Vue Carousel
• Vue Dropzone
• Vue Datatables
• Vue Tabs
• Vue Tooltips

We have provided a brief description about how to use each component, but to know more you can visit the source link and see the full documentation of the provided plugin/component.

Collapse:

import VCollapse from './components/collapse/VCollapse'
import VCollapseItem from './components/collapse/VCollapseItem'

 <v-collapse>
    <v-collapse-item>
        <!-- add content here -->
    </v-collapse-item>
 </v-collapse>

Dropdown:

<v-dropdown>
    <button type="button" slot="activator" /> <!-- Element to activate the dropdown -->

    <v-dropdown-item>
       Item 1
    </v-dropdown-item>

    <v-dropdown-item>
       <a href="index.vue" >Index </a >
    </v-dropdown-item>
</v-dropdown>

SweetModal:

import { SweetModal, SweetModalTab } from 'sweet-modal-vue'

Vue Carousel:

import { Carousel, Slide } from 'vue-carousel';

<carousel>
    <slide>
     <!-- Slide 1 Content -->
    </slide>
    <slide>
     <!-- Slide 2 Content -->
    </slide>
</carousel>

Vue Dropzone:

import VueDropzone from 'vue2-dropzone'

<vue-dropzone  id="dropzone" :options="dropzoneOptions" ref="myVueDropzone"></vue-dropzone>

export default {
  name: 'app',
  components: {
    vueDropzone: vue2Dropzone
  },
  data: function () {
    return {
      dropzoneOptions: {
        url: 'https://httpbin.org/post',
        thumbnailWidth: 150,
        maxFilesize: 0.5,
        headers: { "My-Awesome-Header": "header value" }
      }
    }
  }
}

Vue Datatables:

import { TableComponent, TableColumn } from 'vue-table-component';

<table-component
  :data="getUsers"
  sort-by="row.name"
  sort-order="desc"
  table-class="table">
  <table-column show="firstName" label="First name"></table-column>
</table-component>

Vue Tabs:

import { Tabs, Tab } from 'vue-tabs-component'

<tabs class="tabs-default">
  <tab name="tab1">
     <!-- Your content -->
  </tab>
  <tab name="tab2">
     <!-- Your content -->
  </tab>
  <tab name="tab3">
     <!-- Your content -->
  </tab>
</tabs>

Vue Tooltips:

<button v-tooltip="'You have ' + count + ' new messages.'"></button>

<v-popover>
     <!-- This will be the popover target (for the events and position) -->
  <button>Click me </button>
     <!--  This will be the content of the popover -->
  <MyAwesomeComponent slot="popover">
</v-popover>

Forms

Laraspace includes following Form Components:

• Vue MultiSelect
• Vue TextMask
• Vue DatePicker
• Vue ColorPicker
• Vuelidate Validation

Vue MultiSelect:

import Multiselect from 'vue-multiselect'

<multiselect
  v-model="selected"
  :options="MultiOptions"
  :multiple="true">
</multiselect>
            

Vue TextMask:

import MaskedInput from 'vue-text-mask' 
import createAutoCorrectedDatePipe from 'text-mask-addons/dist/createAutoCorrectedDatePipe'

Vue DatePicker:

import Datepicker from 'vuejs-datepicker'

<datepicker placeholder="Select Date"></datepicker>

Vue ColorPicker:

import { Grayscale, Photoshop, Material, Compact, Swatches, Slider, Chrome, Sketch } from 'vue-color'

<!-- suppose you have the data 'colors' in your component -->
<material-picker v-model="colors" />
<compact-picker v-model="colors" />
<swatches-picker v-model="colors" />
<slider-picker v-model="colors" />
<sketch-picker v-model="colors" />
<chrome-picker v-model="colors" />
<photoshop-picker v-model="colors" />
            

Vuelidate Validation:

import Vue from 'vue'
import VeeValidate from 'vee-validate';
Vue.use(Vuelidate)

import { required, minLength, between } from 'vuelidate/lib/validators'
export default {
  data() {
      return {
           name: '',
           age: 0
      }
    },
    validations: {
        name: {
            required,
            minLength: minLength(4)
        },
        age:{
            between: between(20, 30)
        }
    }
}
            

VeeValidate:

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

Navigation

Laraspace uses Vue-Router for Routing, Thus you are required to have a basic knowledge of how it works.

The resources/assets/js/router.js file contains all the route definitions for the Application & once you've defined a certain route, you can edit SiteSidebar.vue or SiteHeaderBottom.vue Partial depending on your Layout choice to add a link in Navigation Menu.

For more information about Router, see Here

Plugins Custom JS/CSS Files

All the plugins are stored in resources/assets/plugins. You can include any required plugin in your frontend or admin as they are stored on a location which can be accessed easily by both.

To add a plugin into backend you can do the following:

1. Create a directory in resources/assets/plugins with your plugin name
2. Add the js files into webpack.mix.js
3. Add the .scss file to resources/assets/sass/laraspace.scss.
   Note : CSS files cannot be imported in sass files. Thus If the plugin does not contain a sass file then you can just paste the styles into your custom .scss file.
4. run npm run webpack command to merge the added JS files and compile the SASS files.

Settings API

Laraspace has site-settings built-in, thus you can use the Setting Model Facade to get the current settings and set new settings for your site.

Add new Setting

Setting::set('facebook_link','http://facebook.com/laraspace');

Get existing Setting

Setting::get('facebook_link'); // returns "http://facebook.com/laraspace"

You can also use get_setting() helper function to get the setting value inside any of your views.

Helpers

Vue:

We have provided some helper functions in resources/assets/js/helpers/utilities.js file to make your development easier.

• setLayout(layoutName)

  This function is used to set a specific Layout. It allows default, icon-sidebar & horizontal

  this.$utils.setLayout('icon-sidebar')

• setSkin(skinName)

  This function is used to set a Skin, It allows default, tyrell, arryn, lannister, stark & targaryen

  this.$utils.setSkin('tyrell')

• addClass(element, className)

  This function is used to add a class to an existing element. It's not recommended to use this approach in your application but we use this function internally in Laraspace to set the specific layout/skin classes on body.

  addClass('is-invalid')

• hasClass(element, className)

  To check if a given element has the given class.

  hasClass('is-invalid')

Laravel :

• set_active()

  This function returns 'active' class if the current url matches the provided pattern. It is used to set 'active' state on the menu

  // Current URL is /admin/dashboard
  
  set_active('/admin') // Returns : ''

  You can also use wildcards:

  // Current URL is /admin/dashboard
  
  set_active('/admin*') // Returns : 'active'

  Set another class instead of 'active'. If you want multiple classes then you can just seperate them with a space.

  // Current URL is /admin/dashboard
  
  set_active('/admin/dashboard','active open') // Returns : 'active open'

• get_setting()

  This function returns the setting value for the provided key.

  $facebook_url = get_setting('fb_url');

• is_url()

  This function checks if the provided pattern matches the current URL.

  // Current URL is /admin/dashboard
  
  $is_dashboard = is_url('admin/dashboard'); // Returns : true

• clean_slug()

  This function replaces white-spaces with hyphens and removes special characters.

  $post_slug = clean_slug('My Awesome Post Slug$'); //Returns : My-Awesome-Post-Slug

Skins

Laraspace now ships with 6 different Skins :

• default
• arryn
• tyrell
• targaryen
• lannister
• stark

To change the skin of your application just add the class "skin-{skin-name}" to the <body> tag inside app.blade.php file.

For example : <body class="skin-tyrell">