Vue.js

Vue.js + Laravel 5.4.26

Sainag Leave a comment
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