Laravel Vue.js Starter Kit

Laravel Vue.js SPA Bootstrap Admin Starter Kit with Rich Features

PHP Framework - Most Popular Laravel 5.5.x

Javascript Framework - Lightweight Vue.js

Frontend Framework - Most Popular Bootstrap 4.0.0 beta

Single Page Application

Browser Synchronization

Webpack Bundle Analyzer

Compressed asset output

NOTE: One license can only be used for one product. If you are looking for multiple use, then please contact author at hello@scriptmint.com to purchase Extended License.

Laravel is the most popular PHP framework since since its inception. Vue.js is new but its gaining lots of attention from all over the world since last 1 year. You can generate some awesome apps by combining Laravel & Vue.js.

There are many Laravel+Vue.js starter kit available but none of them are complete enough to get started. Some lacks with basic functionality like authentication, some with sample CRUD module, some with responsive layout etc. I tried to create one starter kit with some basic features like authentication, registration, user profile with a sample todo module and with many plugins like two factor authentication, screen lock due to inactivity, maintenance mode etc which is built on latest version of bootstrap.This script can be handy enough for your new Laravel+Vue.js project & will surely speed-up your project development time. If you are working first time on Laravel+Vue.js or learning Vue.js then this is perfect script to get started.

Instead of developing your project from scratch, you can choose to start with our script & use the basic features with few clicks. You will also get a responsive bootstrap 4.0 beta theme by (Wrappixel.com) to give awesome experience to you/your clients.

This script will be updated regularily with latest version of framework & plugins. Please share your feedback, feature request which will be surely implemented in upcoming versions.

Author: ScriptMint
Contact: hello@scriptmint.com
Follow: codecanyon.net/user/ScriptMint
Skype: ScriptMint

This script is built with following:

  • Laravel 5.5.x
  • Vue.js 2.5.2
  • Bootstrap 4.0.0 beta
  • jQuery 3.2.0
  • Aixos 0.16.2

Here are the composer packages used in this script:

Here are the npm packages used in this script:

  • laravel-mix
  • browser-sync
  • browser-sync-webpack-plugin
  • webpack-bundle-analyzer
  • compression-webpack-plugin
  • js-cookie
  • laravel-vue-pagination
  • lodash
  • uuid
  • v-mask
  • v-tooltip
  • vue-multiselect
  • vue-password-strength-meter
  • vue-router
  • vue-sortable
  • vue-switches
  • vuejs-datepicker
  • vuejs-dialog
  • vuex
  • vuex-persistedstate
  • zxcvbn

Author assumes that you have basic knowledge of Laravel & Javascript to start development with this script. If you have no experience with Javascript, then you can take a look at this tutorial.

For any kind of support, please email us at hello@scriptmint.com

I am looking forward for your suggestions & feedback for this script & I will surely implement your feature request if feasible. Don't forget to rate my application.

Features

Components are very important in Vue.js. The script provides you 6 components which you can use in your application and can easily reduce your development time. Here are the lists of components:

Component Name Description
Autosize Textarea Automatic resizes textarea when input contents
Date Range Picker Select date range with ease
File Upload Input Upload input for files
File Upload Progress Live progress bar for file upload
HTML Editor HTML editor (Summernote) for entering rich text content
Upload Image Image upload and remove feature

This script comes with many built-in features. You can always enable/disable this feature by navigating to configuration page. Here are the list of all the features available with the script:

Feature Description Default
User Login Allow users to login into the system Enabled
User Registration Allow users to sign-up or create account Enabled
Reset Password Allow users to reset password by requesting email Enabled
Reset Password Token Lifetime Set Reset Password Token Lifetime Enabled
Social Auth Allow users login with Social Networking sites (Facebook/Twitter/Github) Disabled
Login Lifetime Set Login Lifetime Enabled
Password Strength Meter Show password strength meter during password type Disabled
Email Verification Force email verification on account creation Disabled
Account Approval Force account approval on account creation Disabled
Accept Terms & Conditions Accept Terms & Conditions during account creation Disabled
Two factor security Force double authentication by enabling Two factor security Disabled
Screen Lock Force screen lock due to inactivity Disabled
Toastr Notification Displays beautiful notification in any corner of screen Enabled
Multilingual Allow users to translate script to any language Disabled
RTL Support Allow users to change display direction to Right to Left Disabled
Date/Time Format & Timezone Allow users to change Date/Time format & Timezone Enabled
Https or Secure Site Redirection Force redirect to Https or Secure Site Disabled
Error Log Display detail of error thrown by script Disabled
IP Filter Block external IPs to access this script Disabled
Activity Log Log every activity logged in user performs Enabled
Email Log Log every email logged in user sents Enabled
Custom Email Templates Pre-defined & Custom Email Templates Disabled
Todo app Todo app for users Disabled
Private Message Send/Receive Private Message, Save message as Draft, Mark message Important, Move to Trash Disabled
Backup Complete Database Backup, Schedule Database Backup Disabled
Maintenance Mode Once click Maintenance Mode for users Disabled
Multiple Mail Drivers Mail, Sendmail, SMTP, Mailgun, Mandrill, Log drivers Enabled (Default Log)
User Roles & Permissions Create Unlimited Roles, Assign permission to roles Enabled
Show Hide Menu Choose menu which you want to display in sidebar Enabled
SMS Api Nexmo SMS API Enabled

Pre Requisites

Read this article carefully before installing this application. If you miss this article, you might not get the application working.

You must have composer installed in your system. If you don't have knowledge about composer, please click here. Once you have installed the composer in your computer, you need to install Node.js in your system. Here is a good article to install node.js in your computer. You need to install npm globally in your system.

As the application is built with Laravel 5.5, it requires to follow all the pre-requisites of Laravel 5.5. Click here to visit installation guidelines of Laravel.

  • PHP >= 7.0.0
  • OpenSSL PHP Extension
  • PDO PHP Extension
  • Mbstring PHP Extension
  • Tokenizer PHP Extension
  • XML PHP Extension
Please note that Laravel framework pre-requisites are changed with release of every new version. Pre-requisites of this script 100% depends upon the pre-requisites of Laravel framework used to code the script.

Installation

If you are able to run Laravel framework in your server, you should be able to run this script without any issue.

After making sure that your system has all the pre-requisites, you are ready to install the application. Once you download file from codecanyon.net, you will get a compressed file in your computer. After extracting the compressed file, below is the file structure of the script.



You might not get two folders marked in red. To get these folders in your script follow these steps: Open command prompt or terminal and navigate to the folder where you have extracted this script. Type below command to first get "vendor" folder.

composer update

This may take some time depending upon your internet speed and your system configuration. Do not interrupt while the the process is running. Once completed, you will get "vendor" folder as shown in the above screenshot.

Important: As per Laravel 5.5 document - "Any fire methods present on your Artisan commands should be renamed to handle". You need to go to rename file method present in "vendor\tymon\jwt-auth\src\Commands\JWTGenerateCommand.php".

Next, to get "node_modules" folder, you need to run below command.

npm install

This will again take some time depending upon your internet speed and your system configuration. Once completed, you will get "node_modules" folder as shown in the above screenshot. Please note that you need to have installed npm globally before running this command.

Next, you need to run below command in order to get a secret App Key for your script.

php artisan key:generate

Open .env file as shown in the above screenshot in any text editor (Say Notepad++ or Atom or Sublime Editor) and enter required details. You must have done this step previously if you have deployed Laravel application.

After setting database details and other global variables in .env file, you need to create database structure in your system. Make sure you enter correct database details. For this, you need to run below command.

php artisan refresh

This command will create tables in your database. In the last step, you need to run below command.

npm run dev

This will compile all the assets into public folder and now you are ready to run the application. Go to your browser, and navigate to application URL as mentioned in APP_URL. You will get login page of this script.

If you are running "npm run watch" with browser-sync then make sure you have entered your application URL in the place of "laravue" in webpack.mix.js file.

If you miss any of these step, you might not get the login page. For any query please send us an email at hello@scriptmint.com.

Structure

The script follows conventional Laravel+Vue.js folder structure. The folders & files are grouped and placed in desired location. Here is the folder structure of Laravel application.



All the folders except "node_modules" are part of Laravel application. In order to install npm dependency, you get a folder called "node_modules" in your script.

I believe you already have knowledge of Laravel therefore I am not providing details of its folder structure. If you want to know more about it you can click here.

Here is the detailed folder structure of resource folder where all the Vue components, assets (Images, Javascript, Stylesheets & Plugins are place).



The script use only single Laravel blade file which is placed under resources/views/home.blade.php, which actually imports a layout called master.blade.php which is place at resources/views/layouts folder. This file is responsible for generating basic layout of the script. It includes bundled stylesheets in the head tag & bundled js files just above the body tags. To make less request to the server, all the stylesheets & js files are bundled into single file.

Here are details of all the folders available in resources/assets folder.

Images:

This includes all the images that are referred in any style sheet or js file. Make sure you put those images in this folder only. During compilation, you will get all these files processed at public/images folder.

Js:

This folder is basically the most important container for this script. As all the Vue components are basically Javascript file therefore they are placed under this folder. This includes three sub folders:

components:

These are small snippets which can be put inside any Vue script or components. For details visit here.

layouts:

It is basically layout structure of this script. It includes vue files divided into multiple segment like header.vue, footer.vue etc. The file guest-page.vue renders guest page (like login page which can be accessed without login). The file default-page.vue renders application page (which will be accessible only after login) & error-page.vue which renders error page layout.

services:

These are basically helper javascript files.

views:

These are pages which will be rendered when you navigate to a certain page. For example, If you navigate to {your_domain}/login, the file resources/assets/js/views/authentication/login.vue is rendered. All the files are grouped by modules.

Here are details of file available in resources/assets/js

app.js:

This is entry point of all the Javascript files. It is also a place where you define new Vue app.

bootstrap.js:

It is default Javascript file provide by Laravel where you can import various dependencies including Axios, Vue-Router, Vuex etc.

custom.js:

It is basically jQuery scripts written for layout design.

routes.js:

It is used to define the Vue router path and the component it will render for the page. It is like routes.php or web.php file in Laravel. For details visit here.

store.js:

It is used to define Vuex store. For details visit here.

Plugins:

This folder contains all the external plugins which you want to use in this script. For example, this script uses jQuery plugin which is place under this folder. Similarly, Bootstrap files are placed in this folder. If you are going to use any other plugin, I strongly suggest you to put under this folder. You can import the style sheet of that plugin into resources/assets/saas/style.scss & combine the js of that plugin in webpack.mix.js file.

Style sheet:

Head tag includes single style sheet called style.css which includes all the style sheets including bootstrap, plugin style sheet and custom style sheet. Basically resources/assets/sass/style.scss is entry point of all the style sheets which imports all other style sheets.A custom.scss file is also available in resources/assets/sass folder where you can put all your custom css code. Mind the order of import of css in resources/assets/sass/style.scss file. If you import custom.scss file before other scss file, then your custom css code will be overridden by other css code.

When you deploy your application in live server, you need not to upload contents of "node_modules" folder & "resources/assets" folder. During compilation all the required files are bundled and placed at public folder.

If you have an query regarding this folder structure, please send us an email at hello@scriptmint.com.

Compiling Assets

You might be familiar with npm run command which performs a series of tasks define in package.json file. Package.json file is available in the root of the script.

If you go to package.json file, you will get some pre-defined scripts as below:

  • npm run dev: This command is short-form for npm run development, which compiles the assets in unminified version.
  • npm run development: This performs same operation as npm run dev.
  • npm run watch: This command compiles the assets and watch for the changes.
  • npm run hot: This command compiles the assets and watch the files with instant reload.
  • npm run prod: This command is short-form for npm run production, which compiles the assets in minified version.
  • npm run production: This performs same operation as npm run prod.

You can also define dependencies and developer dependencies for your project in this package.json file. For example, Vuex library is used in this script, therefore it is added in devDependency. You can add any dependency and install it via npm install command.

If you have an query regarding this, please send us an email at hello@scriptmint.com.

Configuration - First thing First!

If you are able to get login page when you access the script from your browser, it means you have successfully installed the application. Now its time to configure the script, to select the features you want in the script. This is very important to use the script.

You might be worry that you got login page, but you don't have login credential to login. Actually, you need to created admin account after installation. So just click on the 'Sign Up' link available in the login page, enter required details & complete sign up process.

For first account (which will be default admin account), there will not be any kind of email verification. You can just log in with your email & password which you have used to create your first account.

By default, the email driver is set to "log", which means you will be able to send emails but all the emails are logged at storage/logs/laravel.log file. So you can open this file & can read the email. This is important in case you haven't set any email driver and forget your password. You can just go to this file and search for "Password Reset Email". Once you get this email, you can copy the password reset email link in your browser & then reset your password with few clicks.

Once you are logged into dashboard, you will find empty menu items. Do not worry, everything needs to be enabled in configuration page. Click on the (Configuration) menu available in the top right header. This menu is by default available for "admin" user and need not any kind of configuration.

Follow below steps to complete the configuration:

  • Required Go to configuration "basic" tab, complete the basic info about your company.
  • Optional Move to "Logo" tab, select both logo i.e. Main logo & Sidebar Logo.
  • Required Move to "System" tab, choose your color theme, direction to display, date format, time format, notification position, locale & timezone. Next, choose the features you want to enable by switching on the various feature.

    Please note, if any feature is not switched on here, you will not be able to experience it in your application. You can any time switch it on/off as per your requirement.

  • Required Move to "Mail" tab, choose your mail driver & enter desired fields depending upon your mail driver. The script only provides a method to send emails and doesn't bear any cost of sending email. You are free to choose any email driver listed over there.
  • Optional Move to "Locale" tab, you might want to have this script in your own locale. Default locale supported in this script is English (en). Built-in language translator can make your job easy. Add your new locale here, go to translation & save translation for all possible words. Now move to "System" tab & choose your locale. That's it.
  • Required Move to "Role" tab, create new roles (If required). Script supports two default roles (1) Admin (2) User. Both role can not be deleted. Also note that roles can not be edited. The script uses spatie/laravel-permission package to manage roles & permissions. You should visit this link to know more about this package.
  • Required Move to "Permission" tab, create new permissions (If required). Script supports many default permissions. Permissions once created can not be edited. Once you create permission, you can click on the "Assign Permission" button to assign permission based on the roles. You can simply switch on/off the button of any roles to enable/disable permission.

    The script uses spatie/laravel-permission package to manage roles & permissions. You should visit this link to know more about this package.
  • Required Move to "Menu" tab, Choose the menu option which you want to see in the left sidebar. Once you click on "save", you will be able to see the menu list in the left sidebar. If it is not visible, click on any other link and menu list should appear now in the left side bar.
  • Optional Move to "SMS" tab, The script supports Nexmo SMS API. If you have live Nexmo account with SMS balance then you can send SMS from this script. Currenly, Nexmo SMS API is used to send Two Factor Authentication code to the user. If you want to add it anywhere else, you can do it by writing few lines of code.
  • Required Move to "Authentication" tab, There are various authentication variable available in the script. You can change this variable as per your requirement.
  • Optional Move to "IP Filter" tab, If you wish the script to be available to selected range of IPs then you can achieve this functionality by defining a range of IPs in this script.
    Important Note: Always enter your IP first in the system else you will get yourself blocked and you won't be able to access the script. The only way to escape from this is to disable this feature from database by setting "ip_filter" value to 0 in the config table.
  • Optional Move to "Schedule Job" tab, In Laravel framework you can define scheduler commands. The script uses same scheduler command feature. The script can send Birthday/Anniversay wish to staff or can generate daily backup at certain time period. You can go to app/Console folder & change the setting.

    To know more about Laravel scheduler visit here.

Social Login

The script comes with Laravel Socialite package which provides an expressive, fluent interface to OAuth authentication with Facebook, Twitter, Google, LinkedIn, GitHub and Bitbucket. In this script, you can easily start using oAuth authentication for Facebook, Twitter & Github. You can add more if you want by navigating to config/system.php file and add additional oAuth provider in "social_login_providers" array.

This requires to create app in respective oAuth provider. Click for Facebook oAuth, Twitter oAuth, Github oAuth app tutorials. Also note that some oAuth provider do not support oAuth function if you are running script on local server. This is not the issue of script, its because oAuth provider doesn't allow this feature on local server. Some oAuth provider may require secure site or https in your website or some may require fully functional website with terms and conditions and privacy policy. Please go through oAuth service provider website & read tutorial carefully.

After addition, you need to login into the script as admin & enable the Social Login feature in configuration -> authentication tab. Now you will get all oAuth providers list with some additional input. Below is the detail:

Option Type Description
Enable/Disable oAuth Switch Input To enable or disable oAuth authentication
Client Id Text Input Client Id of oAuth provider
Client Secret Text Input Client Secret of oAuth provider
Redirect URL URL Redirect path after generating access token
Redirect URL should be like {your_domain.com}/auth/{provider}/callback where provider can be 'facebook' or 'twitter' or 'github'.

Enabling oAuth provider will generate respective provider login option in the login page. If all the input details including client Id, Secret & Redirect URL are correct, then you should be able to login with that oAuth providers.

API

Laravel Vue.js starter kit supports REST API which you can use to integrate into any other application. Here is full documentation of API including parameters & response.

All APIs which needs authentication, requires to supply additional parameter "token" in the API. You can either supply it as /api/user?token={your_access_token} or you can include this token in request header. In this script, all the token are sent via request header.
localStorage.setItem('auth_token',response.token);
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('auth_token');
Route Method Parameters & Response Remarks
{{api.route}}
Guest Required Auth Required
{{api.method}}
{{api.description}}

Support

Support is only available if you have purchased the script from codecanyon.net or from scriptmint.com. Every purchase from either of the website will generate a unique purchase code that will be used to identify the buyer & his/her support period. Buyer without purchase code verification will not get support from the author.

The product comes with limited period support, if your support period is expired, you will need to purchase the support subscription.

Item support includes:

  • Availability of the author to answer questions
  • Answering technical questions about item’s features
  • Assistance with reported bugs and issues
  • Help with included 3rd party assets

However, item support does not include:

  • Customization services
  • Installation services

If you have any query, please visit www.scriptmint.com or email us at hello@scriptmint.com