VueLesApplication

Installation

Installing the Vue Les Application plugin into your project should be fairly straightforward. Find the installation method for your project below:

Cake PHP

Older versions of Cake PHP (Version 2.x) don't implement any frontend task runner such as Gulp JS. For this reason, you'll need to manually copy installed files across.

⚠️ NOTE: Only the iframe implementation is supported by Cake PHP currently, please refer to our options to enable this.

We recommend installing the plugin via NPM. You'll need to be a collaborator on the project to instal the project.

🚀 Production Build

  1. Navigate to your project's root directory, e.g: myproject/.
  2. Run the following:
# For SSH users
npm install git+ssh://git@github.com/stsonline/vue-les-application.git#0.1.4

# For HTTPS users
npm install git+https://git@github.com/stsonline/vue-les-application.git#0.1.4

🔧 Development Build

  1. Navigate to your project's root directory, e.g: myproject/.
  2. Run the following:
git clone git@github.com:stsonline/vue-les-application.git node_modules/vue-les-application
cd node_modules/vue-les-application
npm install
npm run build

🔗 Copy .js files to your webroot/js directory

If you're using a frontend task runner such as Gulp JS or Grunt, you'll be able to setup a task that takes the compiled JS files and outputs them to the js/ folder in your webroot/ directory. Otherwise you can copy them manually:

  1. Navigate to your project's root directory, e.g: myproject/.
  2. Run the following:
cp node_modules/vue-les-application/dist/vue-les-application.umd.min.js app/webroot/js

📝 Just a note:

We have several compiled .js variants to use in your project, these are:

  • vue-les-application.common.js
  • vue-les-application.esm.js
  • vue-les-application.umd.js
  • vue-les-application.umd.min.js

After you've copied your chosen variant to your js/ directory, you're ready to use this within your project, you'll need to include a link to this .js file within your layout, along with the relevant links to the required dependencies 👍

Cake PHP starter layout

Create a layout file to use with our plugin, this will keep it separate to your other site's assets.

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Vue JS LES Application</title>

    <!-- Include dependencies including Vue JS -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>

    <!-- Link to the plugin -->
    <script src="<path-to-your-js-folder>/vue-les-application.umd.min"></script>
  </head>
  <body>

    <div id="app">
      <!-- Vue LES Application plugin loaded here -->
      <vue-les-application></vue-les-application>
    </div>

  	<script>
        // Initialise dependencies
    	Vue.use(VueResource)
    	Vue.use(VeeValidate)

        // Custom required validator
    	VeeValidate.Validator.extend('mobile', function (value) {
    	  var numbers = /^07[1-57-9]{1}[0-9]{8}$/
    	  var drama = /^07700900[0-9]{3}$/
    	  if (numbers.test(value) && !drama.test(value)) return true
    	  return false
    	})

        // Custom required validator
    	VeeValidate.Validator.extend('dobAge', function (value, formData) {
    	  var data = formData
    	  var today = new Date()
    	  var birth = new Date(data['AppDOBYear'], parseInt(data['AppDOBMonth']) - 1, data['AppDOBDay'])
    	  var age = today.getFullYear() - birth.getFullYear()
    	  var month = today.getMonth() - birth.getMonth()
    	  if (month < 0 || month === 0 && today.getDate() < birth.getDate()) age--
    	  return !(age < 18)
    	})

        // Required to enable Vue Router
    	const router = new VueRouter({
    		mode: 'history'
    	});

    	new Vue({
    	  router
    	}).$mount('#app')
  	</script>
  </body>
</html>

Nuxt JS

(Recommended installation)

Our plugin works best when used in a module system such as Nuxt JS. Installation is pretty straightforward, however you will be required to install the required dependencies listed in the dependencies section, take note of our Vee Validate config as this is slightly different.

🚀 Production Build

  1. Navigate to your project's root directory, e.g: myproject/.
  2. Run the following:
# For SSH users
npm install git+ssh://git@github.com/stsonline/vue-les-application.git#1.0.0

# For HTTPS users
npm install git+https://git@github.com/stsonline/vue-les-application.git#1.0.0

🔧 Development Build

  1. Navigate to your project's root directory, e.g: myproject/.
  2. Run the following:
git clone git@github.com:stsonline/vue-les-application.git node_modules/vue-les-application
cd node_modules/vue-les-application
npm install
npm run build

Install dependencies

npm install --save vee-validate vue-router vue-resource vue-moment

Create a plugin

Create a plugin file called vue-les-application.js in your plugins/ directory and add it to your plugins array.

vue-les-application.js

import Vue from 'vue';
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import VeeValidate from 'vee-validate'
import VueLesApplication from 'vue-les-application'

Vue.use(require('vue-moment'))
Vue.use(VueRouter)
Vue.use(VueResource)

const validationConfig = {
  classes: true,
  classNames: {
    valid: '',
    invalid: 'is-invalid'
  },
  events: 'change|blur'
}

Vue.use(VeeValidate, validationConfig);

VeeValidate.Validator.extend('mobile', function (value) {
  var numbers = /^07[1-57-9]{1}[0-9]{8}$/
  var drama = /^07700900[0-9]{3}$/
  if (numbers.test(value) && !drama.test(value)) return true
  return false
});

VeeValidate.Validator.extend('dobAge', function (value, formData) {
  var data = formData
  var today = new Date()
  var birth = new Date(data['AppDOBYear'], parseInt(data['AppDOBMonth']) - 1, data['AppDOBDay'])
  var age = today.getFullYear() - birth.getFullYear()
  var month = today.getMonth() - birth.getMonth()
  if (month < 0 || month === 0 && today.getDate() < birth.getDate()) age--
  return age < 18 ? false : true
});

Vue.use(VueLesApplication)

nuxt.config.js

/*
** Plugins
*/
plugins: [
  '@/plugins/vue-les-application'
]

Create a page

Create a page to use the plugin in

<template>
  <div>
    <vue-les-application></vue-les-application>
  </div>
</template>

Laravel

To install our plugin in Laravel, follow the installation steps below:

🚀 Production Build

  1. Navigate to your project's root directory, e.g: myproject/.
  2. Run the following:
# For SSH users
npm install git+ssh://git@github.com/stsonline/vue-les-application.git#1.0.0

# For HTTPS users
npm install git+https://git@github.com/stsonline/vue-les-application.git#1.0.0

🔧 Development Build

  1. Navigate to your project's root directory, e.g: myproject/.
  2. Run the following:
git clone git@github.com:stsonline/vue-les-application.git node_modules/vue-les-application
cd node_modules/vue-les-application
npm install
npm run build

Install dependencies

npm install --save vee-validate vue-router vue-resource vue-moment

Add plugin & dependencies to your app.js

app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import VeeValidate from 'vee-validate'
import VueLesApplication from 'vue-les-application'

require('./bootstrap')

window.Vue = require('vue')

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.use(require('vue-moment'))
Vue.use(VueRouter)
Vue.use(VueResource)

const validationConfig = {
  classes: true,
  classNames: {
    valid: '',
    invalid: 'is-invalid'
  },
  events: 'change|blur'
}

Vue.use(VeeValidate, validationConfig)

VeeValidate.Validator.extend('mobile', function (value) {
  var numbers = /^07[1-57-9]{1}[0-9]{8}$/
  var drama = /^07700900[0-9]{3}$/
  if (numbers.test(value) && !drama.test(value)) return true
  return false
})

VeeValidate.Validator.extend('dobAge', function (value, formData) {
  var data = formData
  var today = new Date()
  var birth = new Date(data['AppDOBYear'], parseInt(data['AppDOBMonth']) - 1, data['AppDOBDay'])
  var age = today.getFullYear() - birth.getFullYear()
  var month = today.getMonth() - birth.getMonth()
  if (month < 0 || month === 0 && today.getDate() < birth.getDate()) age--
  return !(age < 18)
})

Vue.use(VueLesApplication)

const router = new VueRouter({
  mode: 'history'
})

const app = new Vue({
  router,
  el: '#app'
})

After installing, and adding the plugin to your project, you'll need to compile your JS. We assume at this point you already have a layout file set up in Laravel, and have a page setup which utilises the layout that you've made.

npm run production

Usage

Using the plugin in laravel is simple, setup a page, create a basic route and include the plugin in your page, all of the options will work as expected, an example of a page can be found below:

@extends('layouts.mylayoutname')
@section('title', 'My Page Title')
@section('description', 'My Page Description')

@section('content')
  ...
  <vue-les-application></vue-les-application>
  ...
@endsection

← Options →