Getting Started

Laraspace is an Admin starter template for Laravel 5.6 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:
Other Requirements:
Suggested Dev Environments:
Installation:
  1. Unzip the downloaded folder.
  2. Now, copy the Application directory to your web root
  3. Using your preferred terminal , go to the copied 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
  • components : Global Components
  • helpers : Helper files provided by default
  • services : Services provided by default
  • views : View components
  • app.js : Main javascript entry file for our App
  • bootstrap.js : JS File to Bootstrap all the required plugins & config
  • router.js : Main Router File
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
  • layouts : styles for Laraspace layout
  • pages : specific page styles
  • components : styles for components like buttons , cards & tabs
  • partials : styles for layout partials , i.e header , footer & sidebar
  • laraspace.scss : main entry point of all sass files.
  • variables.scss : main config file
  • base.scss : base styles for Laraspace
  • demo.scss : styles for demo , you can remove the reference to this file.

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:

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:

<v-collapse> and <v-collapse-item> components are used when you want a content area which can be collapsed and expanded with animation. It can also be used as an Accordian Panel similar to the one on bootstrap.

Both of these components are globally imported in resources/assets/js/bootstrap.js. and the source file for the component is stored in resources/assets/js/components/collapse/VCollapse.vue and VCollapseItem.vue

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

Template Structure:

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

API:
VCollapse
Props Description Type Default
accordion If true, only one item can be expanded at a time Boolean false
VCollapseItem
Props Description Type Default
active-url Takes the url as a prop and expands the collapse-item if it matches the current url String -
is-active To keep the collapse open or closed Boolean false
Dropdown:

Dropdown Component is a Toggleable menu for displaying lists of links and actions.

This component is also globally imported in resources/assets/js/bootstrap.js and its source file is stored at resources/assets/js/components/dropdown/VDropdown and VDropdownItem.vue

VDropdown is used as the container which wraps all the items and VDropdownItem is used to display items inside that container.

Vue Structure

<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>

API:
VDropdown
Props Description Type Default
active-url Active Url Props Allows you to add active class on specific url String -
show-arrow Show/Hide Arrows for dropdown Boolean true
dropdown-light Use light theme for dropdown Boolean false
close-on-select Automatically close the dropdown on clicking an item Boolean true
SweetModal:

Sweetmodal is a Modal Component which can be used to create Modals with a variety of options like Nested Modals, Tabs, Long scrolling modals, etc

For local use:

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

For more information about SweetModal, see Here

Vue Carousel is a flexible, responsive, touch-friendly carousel with a lot of options for customisation.

Demo view file: resources/assets/js/views/admin/components/VueCarousel.vue and its scss file is stored at resources/assets/sass/components/vue-carousel.scss

For local use:

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

Template Structure

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

For more information about VueCarousel, see Here

Vue Dropzone:

VueDropzone is a wrapper component for DropzoneJS to provide drag and drop file uploads with image previews and a ton of other features.

VueDropzone component file is stored at resources/assets/js/views/admin/components/VueDropzone.vue and its scss file is stored in resources/assets/sass/components/vue-carousel.scss

For local use:

import VueDropzone from 'vue2-dropzone'

Template Structure:

<vue-dropzone  id="dropzone" :options="dropzoneOptions" ref="myVueDropzone"></vue-dropzone>
Script:
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" }
      }
    }
  }
}

For more information about VueDropzone, see Here

Vue Datatables:

Vue Datatables component allows you to render a filterable and sortable table. It is very lightweight and easy to use. It has support for retrieving data asynchronously and pagination.

Vue Datatables component file is stored at resources/assets/js/views/admin/components/VueTables.vue and its scss file is stored at resources/assets/sass/components/tables.scss

For Local Use:

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

Template Structure:

<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>

For more information about Vue Datatables, see Here

Vue Tabs:

A simple and easy to use Tabs component with customised according to Laraspace themes.

VueTabs demo view file is stored at resources/assets/js/views/admin/components/VueTabs.vue and its scss file is stored at resources/assets/sass/components/vue-tabs.scss

Types

Use one of the custom classes below on the tabs wrapper to style the tabs according to your choice:

  • tabs-default : Horizontal Tabs default style
  • tabs-default primary: Horizontal Tabs with primary color style
  • tabs-simple : Horizontal Tabs with simple style
  • tabs-vertical : Vertical Tabs with default style
  • tabs-vertical primary : Vertical Tabs with primary style
  • tabs-simple-vertical : Vertical Tabs with simple style
For Local Use:

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

TEMPLATE Structure

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

For more information about Vue Tabs, see Here

Vue Tooltips:

This component allows you to create tooltips and popovers

VueTooltip demo view file is stored at resources/assets/js/views/admin/components/VueTooltips.vue and its scss file is stored at /resources/assets/sass/components/tooltips.scss

We have already imported VTooltip globally in resources/assets/js/bootstrap.js, so you can use this plugin anywhere in the app without importing.

Template Structure

Using v-tooltip directive:

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

Use the v-popover component:

<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>

For more information about Vue Tooltips, see Here

Forms

Laraspace includes following Form Components:

Vue MultiSelect:

Multiselect is probably the most complete selecting solution for Vue.js, without jQuery. You can use this component by importing it into your vue file.

Vue multiselect demo view file is stored at resources/assets/js/views/admin/forms/advanced-elements/MultiSelectDemo.vue and scss file is stored at resources/assets/sass/components/vue-multi-select.scss.

For local use:

import Multiselect from 'vue-multiselect'

Template Structure

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

For more information about VueMultiselect, see Here

Vue TextMask:

Text Mask allows you to create input masks for phone, date, currency, zip code, percentage, email, and literally anything!

Vue TextMask demo view file is stored in resources/assets/js/views/admin/forms/advanced-elements/TextMaskDemo.vue.

For local use:

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

For more information about Vue TextMask, see Here

Vue DatePicker:

Simple Datepicker component with a vareity of options and customizations.

For Local Use:

import Datepicker from 'vuejs-datepicker'

Template Structure

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

For more information about Vue Datepicker, see Here

Vue ColorPicker:

Color Pickers for Sketch, Photoshop, Chrome.

Here, for demo purpose we import all this ColorPicker in one file, if you want particular ColorPicker you have to import that one only.

For Local Use:

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

Template Structure


<!-- 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" />
            

For more information about Vue ColorPicker, see Here

Vuelidate Validation:

Vuelidate is the default validation library which is used throughout Laraspace, thus it is already imported globally in resources/assets/js/bootstrap.js file so you can use it directly in your forms as required.

Global usage:

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

Template Structure

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)
        }
    }
}
            

For more information about Vuelidate, see Here

VeeValidate:

VeeValidate is an alternate validation library similar to Vuelidate. It has plenty of validation rules and support for custom ones as well. It is template based so it is similar and familiar with the HTML5 validation API. You can validate HTML5 inputs as well as custom Vue components.

Global usage:

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

For more information about VeeValidate, 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.

Laravel :

Skins

Laraspace now ships with 6 different Skins :

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">

What's New

Version : 1.5

This update is more focused towards the Vue Version, click here to know more about it:

Upgrade

You can follow the steps below to upgrade laraspace:

Upgrade from Version 1.3.1 to 1.4 / 1.4 to 1.5 :