Skip to content

Instantly share code, notes, and snippets.

View jirehnimes's full-sized avatar
🎯
Focusing

Jireh June Nimes jirehnimes

🎯
Focusing
  • Philippines
View GitHub Profile
@JacobBennett
JacobBennett / blog.md
Last active September 4, 2024 18:48
Clean up your Vue modules with ES6 Arrow Functions

Recently when refactoring a Vue 1.0 application, I utilized ES6 arrow functions to clean up the code and make things a bit more consistent before updating to Vue 2.0. Along the way I made a few mistakes and wanted to share the lessons I learned as well as offer a few conventions that I will be using in my Vue applications moving forward.

The best way to explain this is with an example so lets start there. I'm going to throw a rather large block of code at you here, but stick with me and we will move through it a piece at a time.

<script>

// require vue-resource...

new Vue({

Real-time Grid Component with Laravel, Vue.js, Vuex & Socket.io (Google Docs-like Functionality)

Motivation

The exercise of writing this tutorial -- as well as recording it as a screencast -- has helped me better understand the concepts behind a couple of my favorite open source tools. Both the tutorial and screencast will be of personal use in the future as references. If they are of help to others, that will be great too.

I love Google Docs' real-time, multi-user interactive capability, and I've have always been a fan of spreadsheets. I wanted to see if I could replicate that type of functionality. What I've done is taken the basic Vue.js Grid Component example and altered it a bit so that when a user clicks on a cell, that cell becomes highlighted or "active", not just in the user's browser but in any browser instance cur