Vue.js + Laravel 5.4.26


Vue.js – The Progressive JavaScript Framework

Getting started with Vue.js in Laravel:

  • I have simply followed Laravel documentation for setting up Vue.js
    • Here is the link –
  • When the build is ready, add app.js from the public folder to your blade.php page’s footer
  •  Issues:
    • If you are getting an error saying the components not found, it means your script is executing before the document is ready
    • Make sure you have added app.js script at the end of the page

Adding new component (similar to ‘example’ component given with Laravel):

  • Components:
    • Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements that Vue’s compiler attaches behavior to. In some cases, they may also appear as a native HTML element extended with the special is attribute.
  • Create a new component in resources/components called Greeting.vue
  • Add your bootstrap element inside template element
  • Create an instance of ‘greeting’ component in app.js
    • Add the following to app.js
      Vue.component('greeting', require('./components/Greeting.vue'));
  • execute ‘npm run dev’ to rebuild app.js
  • Add <greeting></greeting> element to your blade.php page
  • You should be able to see the Greeting.vue template appear on the page
  • camelCase vs. kebab-case

    HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents:

    Vue.component(‘child’, {
    // camelCase in JavaScript
    props: [‘myMessage’],
    template: ‘<span>{{ myMessage }}</span>’
    <!– kebab-case in HTML –>
    <child my-message=“hello!”></child>

    Again, if you’re using string templates, then this limitation does not apply.

Adding a Vue message to the page: (Declarative rendering)

  • add the following to the app.js page
    new Vue({
     el: '#example',
     data: {
     message: 'Hello Vue.js!'
  • add the example element to your blade.php page
    • You won’t need ‘@’ to show the message if you are not using Vue.js in Laravel
  • Ref:



v-bind Shorthand

<!– full syntax –>
<a v-bind:href=“url”></a>
<!– shorthand –>
<a :href=“url”></a>

v-on Shorthand

<!– full syntax –>
<a v-on:click=“doSomething”></a>
<!– shorthand –>
<a @click=“doSomething”></a>

Vue HTTP Requests:

  • by defaults axios is installed with npm vue installation for Laravel
  • If axios is installed use the following code for get request
    axios.get(url).then(function(resp){ //response code;});
  • If axios not installed you should use
    • vue-resource has to be installed for getting $http to work

CSRF token fix with axios:

<meta name="csrf-token" value="{{ csrf_token() }}"> 
axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');



Command line commands on windows:

Remove directory:

  • rd /s /q dirname
    • /S Removes all directories and files in the specified directory in addition to the directory itself.Used to remove a directory tree.
    • /Q Quiet mode, do not ask if ok to remove a directory tree with /S

Git Ignore:

add directoryname in the .gitignore file

CSS Preprocessors – SASS and LESS


  • JavaScript based (nodejs is required)
  • ‘@’ to define
  • backwards compatible – rename .css to .less and start building
  • Advantages:
    • Using variables for re-using same css
    • Mixins – using css of 1 item in another item
    • Mixins with paranthesis – function with parameters – you can send custom values
    • Nested styling
    • Nested conditionals – for mobiles & desktops etc
      • conditional styling
    • Simple arithmetic operations in styling. eg: font-size * 2 etc
    • Commenting – single line commenting available
    • Importing
      • can import other .less files
        • eg: @import filename;
      • You have to put the correct file name including ‘_’ if there are any.
      • No need to add the extension
    • Extend/Inheritance:
      • &:extend selector
    • Image paths as variables:
      • eg:
        • @images: “images/”
        • using it:
          • background: url(“@{images}name.jpg”);


  • Ruby based
  • ‘$’ to define
  • .sass is shorthand version with no semicolons and braces etc
  • .scss is normal kind of less (you’ll use .scss files all over)
  • Ruby is required to get sass but can install with npm and start using it like LESS
  • Advantages:
    • variables
    • nesting
    • partials:
      • Good practice is to use ‘_’ for the files that are not going to be included in the html. These files are only used in other .scss files
      • @import filename to include this in other file. You don’t need to add ‘_’ and ‘.scss’ for import command
    • Extend/Inheritance:
      • Useful when you have various size panels (big/medium/small)
      • for using one css class in other class, use @extend selector
    • Mixins – is like function and passing parameters to it
      • you can send custom values
      • Eg:
        • @mixin border-radius($radius){ -webkit-border-radius:$radius; -moz-border-radius:$radius; -ms-border-radius: $radius; border-radius:$radius}
        • .little-panel{ @include border-radius(5px);}
        • .big-panel{ @include border-radius(10px);}
    • Operations
      • Arithmetic operation/ adding values etc
      • multiply background color (*1.5) to get lighter version of the colour


Package Managers

Package – A package can be a GitHub shorthand, a Git endpoint, a URL, and more. Eg: bootstrap

Package Manager – Package manager is collection of software  tools that automates the process of installing, configuring, upgrading and removing any programs

  1. npm – node package manager
  2. bower – package manager for web
    • bower is a command line utility
    • has to be installed with npm
    • Installing bower: (-g installs it globally)
      • npm install -g bower
    • bower requires node, npm and git
    • bower init to initialize bower.json file
    • Installing packages with bower
      • bower install <package>
      • bower install <package> -S (for saving in bower.json)
      • bower install <package> -D (for saving in bower.json as devdependency)
    • Issues git not found event after having git client tool
      • solution:
        • locate your git.exe file
        • It’s usually located here – C:\Users\user\AppData\Local\GitHub\PortableGit_dGUID\cmd
        • GUID changes when the git gets updated
        • copy the path and paste it in command line
        • enter ‘git’ command, if you see git help options that means git is working
        • now copy the path, remove ‘.git.exe’ at the end and paste into PATH variable
        • close and reopen the command line and try entering git command again. If everything goes right, git works!
      • package.json file gets created with all dependencies. If not just enter, ‘npm init’ command
  3. composer – A dependency manager for php
    • Installing composer
      • The installer will download composer for you and set up your PATH environment variable so you can simply call composer from any directory.
    • Installing packages with composer:
      • composer require twbs/bootstrap
    • For php
      • Eg:
        • composer require phpmd/phpmd
        • composer require –dev phpunit/phpunit
          • Using phpunit from commandline
            • .\vendor\bin\phpunit testFile.php
            • Same pattern of execution for other modules installed with composer
    • composer.json file gets created with all dependencies

NativeScript – building mobile apps with NativeScript

NativeScript with JavaScript:

  1. NativeScript is a cross-platform JavaScript framework for building native mobile apps for iOS and Android.
  2. NativeScript is free and open source
  3. NS renders UIs with native platform rendering engine, no web views.
  4. Prerequisites:
    1. JavaScript
    2. CSS
    3. Terminal
    4. IDE
  5. Installation: NativeScript CLI install needed on the machine –
    1. Windows installer –
    2. If your machine already has Android SDK installed then you’ll need to manually install NativeScript following the steps on the quick-setup page
    3. Windows intaller needs – Java Development Kit, Nodes.js, Android SDK pre-installed
  6. Complete the installation by following all the instructions above

Starting NativeScript:

  1. tns command from CLI
  2. tns create HelloWorld –template nativescript-template-tutorial to create Helloworld app
  3. Go to the app folder – cd HelloWorld
  4. Running the app:
    1. tns run android:
      1. You must have at least one AVD (Android Virtual Device) configured on your development machine for this command to run your app up on an Android emulator. If you don’t have one installed currently go ahead and set one up now.
      2. creating new virtual android emulator:
        1. Open android sdk manager from start menu – You have installed as part of the pre-requiresites for NativeScript
        2. Check all the system images are installed for future use or else click the install packages button at bottom right corner.
        3. Create Andrios virtual devices:
          2. Install HAXM for accelaration –
          3. Complete the creation of emulators by clicking start button – check to see if there are any errors.
          4. If there are no errors the emulator will open up
      3. Execute the run command again to run your app on android emulator
      4. Can run multiple emulators at the same time:
        1. tns device command lists all devices
        2. choosing a device by – tns run android –device 2
        3. to run all connected devices is by – tns run android
    2. tns run ios
    3. Tns run won’t stop until ctrl+c as the app refreshes as you change the code
    4. Changing colour schemes –
    5. When you add a new dependency you need rebuild the app from scratch
    6. Ref –

Builidng a real-world app:

  3. login.js: code-behind:
    1. frameModule for navigation
    2. UserViewModel is for the login
    3. exports.loaded page binding is important for any parameter passing to work
    4. login works from now
    5. As a best practice, testing for a platform with an if check is the way to go when you have a small number of platform-specific changes to make. If, on the contrary, you have big, entirely different chunks of code for iOS and Android, you might want to go with platform-specific code-behind files—e.g. login.ios.js and




Note: Bootstrap uses Grunt for its build system, with convenient methods for working with the framework. It’s how we compile our code, run tests, and more.  (

Grunt commands:

  1. grunt dist
    • Regenerates the /dist/ directory with compiled and minified CSS and JavaScript files.
  2. grunt watch
    • Watches the Less source files and automatically recompiles them to CSS whenever you save a change.
  3. grunt test
  4. grunt docs
    • Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via bundle exec jekyll serve.
  5. grunt
    • Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Requires Jekyll.

  • npm required for Grunt
  • Grunt is a javascript task runner
    • compress everything – all done by grunt
    • compiles Sass into css
    • compress JavaScript, CSS, HTML files
    • Combine JS files into a single file
    • Concatenates JS & CSS files
  • Build system with grunt
  • Software dependencies:
    • Node – javascript runtime
    • npm – package manager
    • grunt cli
    • grunt
    • plugins
  • Installing grunt
    • npm install grunt
    • pakcage json has to be created
      • npm init – creates the package json
      • package name has to be defined and shouldn’t be ‘grunt’
  • Installing grunt cli
    • npm install -g grunt-cli
  • Running grunt
    • grunt
  • Running grunt tasks
    • grunt taskname
  • Using existing project:
    • npm intall – will install all dependencies
  • Plugins:
    • grunt has so many plugins
      • loadNpmTasks – loads the default configs
      • To concat, you need to load the grunt-contrib-concat & to watch the changes grunt-contrib-watch
      • Installing grunt-contrib
        • npm install grunt-contrib-concat –save -dev
        • similar commands for all plugins
    • Handlebars:
    • Uglify:
      • beautifies js code
    • Sass:
      • Complies sass files to css
      • Installing grunt-contrib-sass

Installing NodeJS

1)Download node.js(.msi file)
2)Install node.js from node js website. NPM is installed as part of the installation.
3)Run node.js application / run git bash/ run command line
4)Check node command working on all of the above
5)If node command doesn’t work on git bash, set the path using the following
a.export PATH=$PATH:”C:\Program Files\nodejs”
b.unix style path
6)If node command doesn’t work on command line, set the path using the following
a.SET PATH=C:/Program Files/nodejs;%PATH%
7)Nodejs runs on the same java script engine as the chrome which is V8 Javascript engine.
8)With Node you have to write the webserver unlike PHP where you just install and use, here at node you have to write the webserver.

Testing Node Installation:

  1. Open command prompt and type in “node -v” to see the node version
  2. alternatively you can open node.js and type in “process.version”
  3. If you have opened command prompt and typed in ‘node’ and pressed Enter then you need to type in “process.version” to know the version of node

Test NPM installation:

  1. Make sure ‘%AppData%/npm’ is added to the path variable. Add it if it is not already added
  2. create a node-test folder
  3. Go to the folder on command prompt
  4. Type in command ‘npm init’ which creates package.json file for your project
  5. If the command doesn’t work, it means you haven’t set the path correct. Check point 1 and set your path variable right.
  6. Install a sample package by typing the command “npm install lodash”