Vue.js + Laravel 5.4.26

Vue.js

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 – https://laravel.com/docs/5.4/frontend#writing-javascript
  • 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
    @{{message}}
    • You won’t need ‘@’ to show the message if you are not using Vue.js in Laravel
  • Ref: https://vuejs.org/v2/guide/#Declarative-Rendering

Gulp-Vueify:

Ref: https://www.npmjs.com/package/gulp-vueify

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
    this.$http.get(url);
    • 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');

Ref:

Advertisements

Tips

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

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”);
    • http://lesscss.org/features/

SASS:

  • 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
    • http://sass-lang.com/guide

Ref:

Package Managers

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

  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
      • https://getcomposer.org/download/
      • 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 – http://docs.nativescript.org/start/quick-setup
    1. Windows installer – http://docs.nativescript.org/start/ns-setup-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:
          1. http://docs.nativescript.org/tooling/android-virtual-devices
          2. Install HAXM for accelaration – https://software.intel.com/en-us/android/articles/intel-hardware-accelerated-execution-manager
          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 – http://docs.nativescript.org/ui/theme#color-schemes
    5. When you add a new dependency you need rebuild the app from scratch
    6. Ref – http://docs.nativescript.org/tutorial/chapter-1

Builidng a real-world app:

  1. http://docs.nativescript.org/tutorial/chapter-2
  2. http://docs.nativescript.org/tutorial/chapter-4
  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 login.android.js.

Reference:

http://docs.nativescript.org/tutorial/chapter-0