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.
- 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
- 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'));
- Add the following to app.js
- 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 JavaScriptprops: [‘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:
- https://laravel.com/docs/5.4/csrf#csrf-x-csrf-token
- https://laracasts.com/discuss/channels/vue/laravel-54-and-axios
- https://www.youtube.com/watch?v=YglTalMi83g
Advertisements