diff --git a/package.json b/package.json
index 8a8ab961..b07cb3d4 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "rangeslider.js": "^2.1.1",
     "sinon": "^1.17.2",
     "vue": "^1.0.16",
+    "vue-clickaway": "^1.1.1",
     "vue-hot-reload-api": "^1.2.2",
     "vue-resource": "~0.5.1",
     "vueify": "^7.0.2",
diff --git a/resources/assets/js/components/main-wrapper/main-content/album.vue b/resources/assets/js/components/main-wrapper/main-content/album.vue
index 318e859f..91dbbfce 100644
--- a/resources/assets/js/components/main-wrapper/main-content/album.vue
+++ b/resources/assets/js/components/main-wrapper/main-content/album.vue
@@ -4,18 +4,18 @@
             <span class="overview">
                 <img :src="album.cover" width="64" height="64" class="cover">
                 {{ album.name }}
-                <i class="fa fa-angle-down toggler" 
-                    v-show="isPhone && !showingControls" 
+                <i class="fa fa-angle-down toggler"
+                    v-show="isPhone && !showingControls"
                     @click="showingControls = true"></i>
-                <i class="fa fa-angle-up toggler" 
-                    v-show="isPhone && showingControls" 
+                <i class="fa fa-angle-up toggler"
+                    v-show="isPhone && showingControls"
                     @click.prevent="showingControls = false"></i>
 
                 <span class="meta" v-show="meta.songCount">
                     by <a class="artist" @click.prevent="viewArtistDetails">{{ album.artist.name }}</a>
                     •
                     {{ meta.songCount }} {{ meta.songCount | pluralize 'song' }}
-                    • 
+                    •
                     {{ meta.totalLength }}
                 </span>
             </span>
@@ -27,7 +27,7 @@
                 <button class="play-shuffle" @click.prevent="shuffleSelected" v-if="selectedSongs.length > 1">
                     <i class="fa fa-random"></i> Selected
                 </button>
-                <button class="add-to" @click.prevent="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
+                <button class="add-to" @click.prevent.stop="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
                     {{ showingAddToMenu ? 'Cancel' : 'Add To…' }}
                 </button>
 
diff --git a/resources/assets/js/components/main-wrapper/main-content/artist.vue b/resources/assets/js/components/main-wrapper/main-content/artist.vue
index aacc955e..3987b4bf 100644
--- a/resources/assets/js/components/main-wrapper/main-content/artist.vue
+++ b/resources/assets/js/components/main-wrapper/main-content/artist.vue
@@ -4,18 +4,18 @@
             <span class="overview">
                 <img :src="artist.image" width="64" height="64" class="cover">
                 {{ artist.name }}
-                <i class="fa fa-angle-down toggler" 
-                    v-show="isPhone && !showingControls" 
+                <i class="fa fa-angle-down toggler"
+                    v-show="isPhone && !showingControls"
                     @click="showingControls = true"></i>
-                <i class="fa fa-angle-up toggler" 
-                    v-show="isPhone && showingControls" 
+                <i class="fa fa-angle-up toggler"
+                    v-show="isPhone && showingControls"
                     @click.prevent="showingControls = false"></i>
 
                 <span class="meta" v-show="meta.songCount">
                     {{ artist.albums.length }} {{ artist.albums.length | pluralize 'album' }}
                     •
                     {{ meta.songCount }} {{ meta.songCount | pluralize 'song' }}
-                    • 
+                    •
                     {{ meta.totalLength }}
                 </span>
             </span>
@@ -27,7 +27,7 @@
                 <button class="play-shuffle" @click.prevent="shuffleSelected" v-if="selectedSongs.length > 1">
                     <i class="fa fa-random"></i> Selected
                 </button>
-                <button class="add-to" @click.prevent="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
+                <button class="add-to" @click.prevent.stop="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
                     {{ showingAddToMenu ? 'Cancel' : 'Add To…' }}
                 </button>
 
diff --git a/resources/assets/js/components/main-wrapper/main-content/favorites.vue b/resources/assets/js/components/main-wrapper/main-content/favorites.vue
index e6674349..e5a9ccc6 100644
--- a/resources/assets/js/components/main-wrapper/main-content/favorites.vue
+++ b/resources/assets/js/components/main-wrapper/main-content/favorites.vue
@@ -2,22 +2,22 @@
     <section id="favoritesWrapper">
         <h1 class="heading">
             <span>Songs You Love
-                <i class="fa fa-angle-down toggler" 
-                    v-show="isPhone && !showingControls" 
+                <i class="fa fa-angle-down toggler"
+                    v-show="isPhone && !showingControls"
                     @click="showingControls = true"></i>
-                <i class="fa fa-angle-up toggler" 
-                    v-show="isPhone && showingControls" 
+                <i class="fa fa-angle-up toggler"
+                    v-show="isPhone && showingControls"
                     @click.prevent="showingControls = false"></i>
 
                 <span class="meta" v-show="meta.songCount">
                     {{ meta.songCount }} {{ meta.songCount | pluralize 'song' }}
-                    • 
+                    •
                     {{ meta.totalLength }}
                 </span>
             </span>
 
             <div class="buttons" v-show="!isPhone || showingControls">
-                <button class="play-shuffle" 
+                <button class="play-shuffle"
                     @click.prevent="shuffle"
                     v-if="state.songs.length && selectedSongs.length < 2"
                 >
@@ -26,28 +26,28 @@
                 <button class="play-shuffle" @click.prevent="shuffleSelected" v-if="selectedSongs.length > 1">
                     <i class="fa fa-random"></i> Selected
                 </button>
-                <button class="add-to" @click.prevent="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
+                <button class="add-to" @click.prevent.stop="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
                     {{ showingAddToMenu ? 'Cancel' : 'Add To…' }}
                 </button>
 
-                <add-to-menu 
-                    :songs="selectedSongs" 
+                <add-to-menu
+                    :songs="selectedSongs"
                     :showing="showingAddToMenu && state.songs.length"
                     :settings="{ canLike: false }">
                 <add-to-menu>
             </div>
         </h1>
 
-        <song-list 
-            v-show="state.songs.length" 
-            :items="state.songs" 
-            :selected-songs.sync="selectedSongs" 
+        <song-list
+            v-show="state.songs.length"
+            :items="state.songs"
+            :selected-songs.sync="selectedSongs"
             type="favorites">
         </song-list>
 
         <div v-show="!state.songs.length" class="none">
-            Start loving! 
-            Click the <i style="margin: 0 5px" class="fa fa-heart"></i> icon when a song is playing to add it 
+            Start loving!
+            Click the <i style="margin: 0 5px" class="fa fa-heart"></i> icon when a song is playing to add it
             to this list.
         </div>
     </section>
@@ -55,11 +55,11 @@
 
 <script>
     import isMobile from 'ismobilejs';
-    
+
     import favoriteStore from '../../../stores/favorite';
     import playback from '../../../services/playback';
     import hasSongList from '../../../mixins/has-song-list';
-    
+
     export default {
         mixins: [hasSongList],
 
diff --git a/resources/assets/js/components/main-wrapper/main-content/playlist.vue b/resources/assets/js/components/main-wrapper/main-content/playlist.vue
index c12ad3d3..dc4b072e 100644
--- a/resources/assets/js/components/main-wrapper/main-content/playlist.vue
+++ b/resources/assets/js/components/main-wrapper/main-content/playlist.vue
@@ -2,22 +2,22 @@
     <section id="playlistWrapper">
         <h1 class="heading">
             <span>{{ playlist.name }}
-                <i class="fa fa-angle-down toggler" 
-                    v-show="isPhone && !showingControls" 
+                <i class="fa fa-angle-down toggler"
+                    v-show="isPhone && !showingControls"
                     @click="showingControls = true"></i>
-                <i class="fa fa-angle-up toggler" 
-                    v-show="isPhone && showingControls" 
+                <i class="fa fa-angle-up toggler"
+                    v-show="isPhone && showingControls"
                     @click.prevent="showingControls = false"></i>
 
                 <span class="meta" v-show="meta.songCount">
                     {{ meta.songCount }} {{ meta.songCount | pluralize 'song' }}
-                    • 
+                    •
                     {{ meta.totalLength }}
                 </span>
             </span>
 
             <div class="buttons" v-show="!isPhone || showingControls">
-                <button class="play-shuffle" 
+                <button class="play-shuffle"
                     @click.prevent="shuffle"
                     v-if="playlist.songs.length && selectedSongs.length < 2"
                 >
@@ -26,7 +26,7 @@
                 <button class="play-shuffle" @click.prevent="shuffleSelected" v-if="selectedSongs.length > 1">
                     <i class="fa fa-random"></i> Selected
                 </button>
-                <button class="add-to" @click.prevent="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
+                <button class="add-to" @click.prevent.stop="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
                     {{ showingAddToMenu ? 'Cancel' : 'Add To…' }}
                 </button>
                 <button class="del"
@@ -39,15 +39,15 @@
             </div>
         </h1>
 
-        <song-list v-show="playlist.songs.length" 
-            :items="playlist.songs" 
-            :selected-songs.sync="selectedSongs" 
+        <song-list v-show="playlist.songs.length"
+            :items="playlist.songs"
+            :selected-songs.sync="selectedSongs"
             :playlist="playlist"
             type="playlist">
         </song-list>
 
         <div v-show="!playlist.songs.length" class="none">
-            The playlist is currently empty. You can fill it up by dragging songs into its name in the sidebar, 
+            The playlist is currently empty. You can fill it up by dragging songs into its name in the sidebar,
             or use the &quot;Add To…&quot; button.
         </div>
     </section>
diff --git a/resources/assets/js/components/main-wrapper/main-content/queue.vue b/resources/assets/js/components/main-wrapper/main-content/queue.vue
index 830d96a1..70fd60b0 100644
--- a/resources/assets/js/components/main-wrapper/main-content/queue.vue
+++ b/resources/assets/js/components/main-wrapper/main-content/queue.vue
@@ -27,7 +27,7 @@
                 <button class="play-shuffle" @click.prevent="shuffleSelected" v-if="selectedSongs.length > 1">
                     <i class="fa fa-random"></i> Selected
                 </button>
-                <button class="add-to" @click.prevent="showingAddToMenu = !showingAddToMenu" v-if="state.songs.length > 1">
+                <button class="add-to" @click.prevent.stop="showingAddToMenu = !showingAddToMenu" v-if="state.songs.length > 1">
                     {{ showingAddToMenu ? 'Cancel' : 'Add To…' }}
                 </button>
                 <button class="clear" @click.prevent="clear" v-if="state.songs.length">Clear</button>
diff --git a/resources/assets/js/components/main-wrapper/main-content/songs.vue b/resources/assets/js/components/main-wrapper/main-content/songs.vue
index d6eee4c1..ff1e5622 100644
--- a/resources/assets/js/components/main-wrapper/main-content/songs.vue
+++ b/resources/assets/js/components/main-wrapper/main-content/songs.vue
@@ -2,24 +2,24 @@
     <section id="songsWrapper">
         <h1 class="heading">
             <span>All Songs
-                <i class="fa fa-angle-down toggler" 
-                    v-show="isPhone && !showingControls" 
+                <i class="fa fa-angle-down toggler"
+                    v-show="isPhone && !showingControls"
                     @click="showingControls = true"></i>
-                <i class="fa fa-angle-up toggler" 
-                    v-show="isPhone && showingControls" 
+                <i class="fa fa-angle-up toggler"
+                    v-show="isPhone && showingControls"
                     @click.prevent="showingControls = false"></i>
 
                 <span class="meta" v-show="meta.songCount">
                     {{ meta.songCount }} {{ meta.songCount | pluralize 'song' }}
-                    • 
+                    •
                     {{ meta.totalLength }}
                 </span>
             </span>
-            
+
             <div class="buttons" v-show="!isPhone || showingControls">
-                <button 
-                    class="play-shuffle" 
-                    @click.prevent="shuffle" 
+                <button
+                    class="play-shuffle"
+                    @click.prevent="shuffle"
                     v-if="state.songs.length && selectedSongs.length < 2"
                 >
                     <i class="fa fa-random"></i> All
@@ -28,7 +28,7 @@
                     <i class="fa fa-random"></i> Selected
                 </button>
 
-                <button class="add-to" @click.prevent="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
+                <button class="add-to" @click.prevent.stop="showingAddToMenu = !showingAddToMenu" v-if="selectedSongs.length">
                     {{ showingAddToMenu ? 'Cancel' : 'Add To…' }}
                 </button>
 
diff --git a/resources/assets/js/components/shared/add-to-menu.vue b/resources/assets/js/components/shared/add-to-menu.vue
index b2837d90..d0a529f5 100644
--- a/resources/assets/js/components/shared/add-to-menu.vue
+++ b/resources/assets/js/components/shared/add-to-menu.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="add-to-playlist" v-show="showing">
+    <div class="add-to-playlist" v-show="showing" v-on-clickaway="hideMenu">
         <p>Add {{ songs.length }} {{ songs.length | pluralize 'song' }} to</p>
 
         <ul>
@@ -10,11 +10,11 @@
         </ul>
 
         <p>or create a new playlist</p>
-        
+
         <form class="form-save form-simple" @submit.prevent="createNewPlaylistFromSongs">
-            <input type="text" 
+            <input type="text"
                 @keyup.esc.prevent="hideMenu"
-                v-model="newPlaylistName" 
+                v-model="newPlaylistName"
                 placeholder="Playlist name"
                 required>
             <button type="submit">
@@ -26,6 +26,7 @@
 
 <script>
     import _ from 'lodash';
+    import VueClickaway from 'vue-clickaway';
 
     import playlistStore from '../../stores/playlist';
     import favoriteStore from '../../stores/favorite';
@@ -33,6 +34,7 @@
 
     export default {
         props: ['songs', 'showing', 'settings'],
+        mixins: [ VueClickaway.mixin ],
 
         data() {
             return {
@@ -106,14 +108,14 @@
              */
             createNewPlaylistFromSongs() {
                 this.newPlaylistName = this.newPlaylistName.trim();
-                
+
                 if (!this.newPlaylistName) {
                     return;
                 }
 
                 playlistStore.store(this.newPlaylistName, this.songs, () => {
                     this.newPlaylistName = '';
-                    
+
                     // Activate the new playlist right away
                     this.$root.loadPlaylist(_.last(this.playlistState.playlists));
                 });
@@ -127,8 +129,8 @@
             },
 
             clearSelection() {
-                this.$parent.$broadcast('song:selection-clear');  
-            }
+                this.$parent.$broadcast('song:selection-clear');
+            },
         },
     };
 </script>
@@ -144,7 +146,7 @@
         top: 36px;
         left: 0;
         width: 100%;
-        
+
         p {
             margin: 4px 0;
             font-size: 90%;
@@ -159,7 +161,7 @@
 
         ul {
             max-height: 5 * ($itemHeight + $itemMargin);
-            overflow-y: scroll; 
+            overflow-y: scroll;
             -webkit-overflow-scrolling: touch;
         }