About 6 months ago I needed Google Maps in my Vue app and couldn’t find an appropriate package; so I made my own (x5-gmaps). A frequent question from users is how to include an address search, so here is a simple tutorial on that.

This is the result: Repository (code)

UPDATED: This is an implementation of this with the latest version: https://codesandbox.io/s/search-implementation-b53zt

Setup

Very basic setup using the Vue CLI and default preset (Babel and ESLint).

We’re just using the App.vue file with no components (you can delete everything other than App.vue and main.js in the src folder).

x5-gmaps (Google Maps plugin for Vue)

  1. Install via npm…


So I’ve been using coronavirus-map for my daily update; but I’ve also been making my own Vue plugin for Google Maps and thought I’d test it out. It’s a great example for someone who is either learning Vue (intermediate) or wanting a starting point for their own (COVID) map.

This is the result: Repository (code) | Live Demo

Setup

Very basic setup using the Vue CLI and default preset (Babel and ESLint).

We’re just using the App.vue file with components so we don’t need the generated Views folder or the HelloWorld.vue component. …


https://www.dropbox.com/

So I’ve been a Dropbox user for a long time; but when I started development, I ran into a problem: ☠ node_modules ☠. If you don’t know what that means, it’s an automatically generated folder of thousands of little files that clogs up Dropbox syncing (and space); but more importantly, has no real value in being backed up.

Terminal Method

Now Dropbox doesn’t (yet) have a way to automatically exclude specifically named folders (e.g. node_modules) but there is a way to manually exclude a folder/file using Terminal (Mac) or PowerShell (Windows).

MAC: xattr -w com.dropbox.ignored 1 /Users/yourname/Dropbox/path/to/folder/name.pdfWin: Set-Content -Path C:\Users\yourname\Dropbox\path\to\folder\name.pdf…


Photo by Austin Distel on Unsplash

I have a love/hate relationship with modals. I love how they:
- Focus users on a task
- Don’t disorientate users as much as a new page
- Let users see that their data/information is still there (in the background)
- Can hide relevant (but maybe unnecessary-for-this-session) content/forms until they’re needed

BUT! I find them annoying to manage.

Final code and app is at the bottom 😉

Issues and Traditional Solutions

Historically, I’ve made a modal wrapper component around my modals with props such as open, and emit events such as close which are pretty self explanatory.

This works great until you need multiple…


Revisiting this 6 months later, I’ve made several significant changes and improvements in an actual plugin for Vue projects: x5-gmaps

This article is still great for learning and should be easier to follow along with, but please check out the source code and examples of the plugin too.

Recently I needed to use Google Maps for a project, and after a quick search, I found that the vast majority of recommendations were to just use the package vue2-google-maps. …


An alternative to Vue Router Navigation Guards

I assume reading this you know about Vue Router and at least know of Navigation Guards. Navigation Guards simply allow you to run code before/after a navigation action is taken. One common use is as an authorization check: If a page requires authorization, the guard checks to see if the user has it, and if not it can redirect to a login page or a 401 error.

There are a few ways to add them, but I did this:

// Guard Function
const userGuard = (to, from, next) => {
if (***CHECK IF LOGGED IN***) next()
else next('/401')
}
//…


When making a Progressive Web App (PWA) it’s super-important to handle a no-internet event/state. If no internet changes any functionality (and I imagine it would) you should really notify the user. Yesterday I decided to upgrade my boring popup to a little connection light. It only took 5 minutes, but after getting the warm and fuzzies about the simplicity of doing so in Vue, I thought I’d share it.


Yesterday I was building a prototype in Javascript and I needed an extremely simple and local database to hold some data between sessions. The go-to choice was LocalStorage because it’s so unbelievably easy to use; BUT, objects have to be serialized 😒, and classes are have other overheads which are annoying 😩. So what about IndexedDB…

Well, I’m new IndexedDB. Really new. So new that I constantly type IndexDB which seems like a better name. My first impressions weren’t great. It felt really clunky and some of the ways to do simple things seemed really convoluted. …


I’ve been playing around with the HTML5 Canvas object recently for a project (I know I’m behind the times); but I love it and thought I’d share a small part in grid creation using canvas. I am using Vue (and you should too), but most of my code is pure javascript so don’t stop reading if you’re still living in the past.

I am also assuming you know how to use the HTML5 Canvas element; but if you don’t check out w3schools.com.

The surrounding code

OK, to kick off (and I promise after this it’s just pure JS), the template (or HTML with…


Have you ever wanted to properly separate your Vue project into plugin-type modules? In this example I’ll show you the basics of making self-contained modules which can be dynamically loaded (link to end result at the bottom).

Disclaimer — This is not a beginner article, and while I’ll add a few links, I’m assuming you are already comfortable with Vue, Vuex, and Vue-Router.

Setup

Beginning with a basic PWA template you can clear everything except App.vue and main.js. For the sake of simplicity, just strip App.vue back to just a <router-view> element.

Add a “services” folder containing router.js and store.js, and…

Keagan Chisnall

I have a background in process engineering, management, and consulting; but my passion is making systems and processes more efficient. Visit me: chisnall.io

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store