Tag: vuejs

How To: Offline access to Vue.js documentation

by Muhammad Jawaid Shamshadin Javascript, Web, Web Development8 Comments on How To: Offline access to Vue.js documentation

If you are working with Vue.js Javascript framework to build your next generation web apps then you might be frequently visiting the Vue.js guide section (https://vuejs.org/v2/guide/) to see how certain things work in Vue.js. Most of the time you go to the Vue.js site since that is the only available option for office docs.

But, often it happens we don’t have access to internet and we have time to read something then we usually go to our saved articles, guides, books, or any other content to read. In that case if we have Vue.js guide available offline we could have luxury to read that without connecting to internet. Well, that is possible.

How to download the guide?

To download the guide for offline access all you have to do is clone the official Git repo from GitHub and perform the following steps.

  1. Clone Vue.js Git repo from GitHub https://github.com/vuejs/vuejs.org
  2. Open terminal or command prompt
  3. Go to the directory/folder where you have cloned the repo
  4. If you have npm installed that is most likely if you are a developer then run the following commands: 
    1. $ npm install -g hexo-cli
$ npm install
$ hexo server
  5. Browse http://localhost:4000/v2/guide/ in your favorite browser.

That’s it! You have Vue.js guide available offline.

The next time you want to access your offline guide all you have to do is open terminal, go to repo directory and run hexo server command.

Why Hexo?

Vue.js guide is built using Hexo blog framework. You can read more about Hexo framework on their website https://hexo.io/

What we did is just clone the repo and ran the hexo server from the hexo-cli we installed using npm. This is not convenient as reading a PDF but still we have an option to read the guide offline.

If this helped you or if you found a better way then don’t forget to leave a comment below.

Event handling with custom components in Vue.js

by Muhammad Jawaid Shamshadin Javascript, Technology, Web, Web DevelopmentLeave a Comment on Event handling with custom components in Vue.js

If you’ve been working with Vue.js lately and developing custom components to build your apps you might come across how to communicate from child component to parent. There are couple of scenarios here.

Immediate parent child components

If you want immediate parent-child components to communicate then a child event can fire an event and the parent can listen to it. To do this you can do something like this.

index.html

Vue.component('v-parent', {
 template: `
 `,
 
 methods: {
   handleEvent() {
     alert('parent caught the event');
   }
 }
});

Vue.component('v-child', {
 template: `
Fire Event
 `
});

new Vue({
 el: '#app'
});

app.js

Non-Parent-child components

If two different components want to communicate or if the component listening to the other component’s event is not a direct parent (like a grandparent or even above in the hierarchy) then Vue provides the bus concept. I have created a fiddle on JSFiddle that you can see running here.