diff --git a/.gitignore b/.gitignore
index d31efa22..3ce6fe7f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -55,6 +55,13 @@ build-iPhoneSimulator/
 /gemfiles/vendor/bundle
 /lib/bundler/man/
 
+# Ignore webpacker files
+/spec/rails_app/node_modules
+/spec/rails_app/yarn.lock
+/spec/rails_app/yarn-error.log
+/spec/rails_app/public/packs
+/spec/rails_app/public/packs-test
+
 # for a library or gem, you might want to ignore these files since the code is
 # intended to run in multiple environments; otherwise, check them in:
 # Gemfile.lock
diff --git a/Gemfile b/Gemfile
index 72c1cfad..0c60f2d2 100644
--- a/Gemfile
+++ b/Gemfile
@@ -25,5 +25,6 @@ group :test do
   gem 'coveralls', require: false
 end
 
+gem 'webpacker', groups: [:production, :development]
 gem 'rack-cors', groups: [:production, :development]
 gem 'dotenv-rails', groups: [:development, :test]
diff --git a/README.md b/README.md
index c42f0fd5..b87632fa 100644
--- a/README.md
+++ b/README.md
@@ -70,6 +70,10 @@ The deployed demo application is included in this gem's source code as a test ap
 REST API reference as OpenAPI Specification is published in SwaggerHub here:
 * **https://app.swaggerhub.com/apis/simukappu/activity-notification/**
 
+You can see sample single page application using [Vue.js](https://vuejs.org) as a part of example Rails application here:
+* **https://activity-notification-example.herokuapp.com/spa/**
+This sample application works with *activity_notification* REST API backend.
+
 
 ## Table of Contents
 
diff --git a/bin/deploy_on_heroku.sh b/bin/deploy_on_heroku.sh
index 234e0bfd..c4651f33 100755
--- a/bin/deploy_on_heroku.sh
+++ b/bin/deploy_on_heroku.sh
@@ -6,9 +6,11 @@ CURRENT_BRANCH=`git symbolic-ref --short HEAD`
 git checkout -b $HEROKU_DEPLOYMENT_BRANCH
 bundle install
 sed -i "" -e "s/^\/Gemfile.lock/# \/Gemfile.lock/g" .gitignore
+cp spec/rails_app/bin/webpack* bin/
 git add .gitignore
 git add Gemfile.lock
-git commit -m "Add Gemfile.lock"
+git add bin/webpack*
+git commit -m "Add Gemfile.lock and webpack"
 git push heroku ${HEROKU_DEPLOYMENT_BRANCH}:master --force
 git checkout $CURRENT_BRANCH
 git branch -D $HEROKU_DEPLOYMENT_BRANCH
diff --git a/docs/Functions.md b/docs/Functions.md
index 6038b23b..9b821e5c 100644
--- a/docs/Functions.md
+++ b/docs/Functions.md
@@ -385,6 +385,8 @@ Then, *activity_notification* uses *[ActivityNotification::SubscriptionsApiContr
 
 When you want to use REST API backend integrated with Devise authentication, see [REST API backend with Devise Token Auth](#rest-api-backend-with-devise-token-auth).
 
+You can see [sample single page application](/spec/rails_app/app/javascript/) using [Vue.js](https://vuejs.org) as a part of example Rails application. This sample application works with *activity_notification* REST API backend.
+
 #### API reference as OpenAPI Specification
 
 *activity_notification* provides API reference as [OpenAPI Specification](https://github.com/OAI/OpenAPI-Specification).
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..3d44be60
--- /dev/null
+++ b/package.json
@@ -0,0 +1,8 @@
+{
+  "engines": {
+     "yarn": "1.x"
+  },
+  "scripts": {
+    "postinstall": "cd ./spec/rails_app && yarn && yarn install --check-files"
+  }
+}
diff --git a/spec/rails_app/app/controllers/admins_controller.rb b/spec/rails_app/app/controllers/admins_controller.rb
new file mode 100644
index 00000000..463775b8
--- /dev/null
+++ b/spec/rails_app/app/controllers/admins_controller.rb
@@ -0,0 +1,21 @@
+class AdminsController < ApplicationController
+  before_action :set_admin, only: [:show]
+
+  # GET /users
+  def index
+    render json: {
+      users: Admin.all.as_json(include: :user)
+    }
+  end
+
+  # GET /users/:id
+  def show
+    render json: @admin.as_json(include: :user)
+  end
+
+  private
+    # Use callbacks to share common setup or constraints between actions.
+    def set_admin
+      @admin = Admin.find(params[:id])
+    end
+end
diff --git a/spec/rails_app/app/controllers/spa_controller.rb b/spec/rails_app/app/controllers/spa_controller.rb
new file mode 100644
index 00000000..baab0d0b
--- /dev/null
+++ b/spec/rails_app/app/controllers/spa_controller.rb
@@ -0,0 +1,7 @@
+class SpaController < ApplicationController
+  
+  # GET /spa
+  def index
+  end
+
+end
\ No newline at end of file
diff --git a/spec/rails_app/app/controllers/users_controller.rb b/spec/rails_app/app/controllers/users_controller.rb
new file mode 100644
index 00000000..5d1801b3
--- /dev/null
+++ b/spec/rails_app/app/controllers/users_controller.rb
@@ -0,0 +1,21 @@
+class UsersController < ApplicationController
+  before_action :set_user, only: [:show]
+
+  # GET /users
+  def index
+    render json: {
+      users: User.all
+    }
+  end
+
+  # GET /users/:id
+  def show
+    render json: @user
+  end
+
+  private
+    # Use callbacks to share common setup or constraints between actions.
+    def set_user
+      @user = User.find(params[:id])
+    end
+end
diff --git a/spec/rails_app/app/javascript/App.vue b/spec/rails_app/app/javascript/App.vue
new file mode 100644
index 00000000..65dc0551
--- /dev/null
+++ b/spec/rails_app/app/javascript/App.vue
@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <router-view />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import VueMoment from 'vue-moment'
+import moment from 'moment-timezone'
+import VuePluralize from 'vue-pluralize'
+import axios from 'axios'
+import authStore from "./store/auth"
+import Top from './components/Top.vue'
+import DeviseTokenAuth from './components/DeviseTokenAuth.vue'
+import NotificationsIndex from './components/notifications/Index.vue'
+import SubscriptionsIndex from './components/subscriptions/Index.vue'
+
+const router = new VueRouter({
+  routes: [
+    { path: '/', component: Top },
+    { path: '/login', component: DeviseTokenAuth },
+    { path: '/logout', component: DeviseTokenAuth, props: { isLogout: true } },
+    {
+      path: '/notifications',
+      name: 'AuthenticatedUserNotificationsIndex',
+      component: NotificationsIndex,
+      props: () => ({ target: authStore.getters.currentUser }),
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/admins/notifications',
+      name: 'AuthenticatedAdminNotificationsIndex',
+      component: NotificationsIndex,
+      props: () => ({ target: authStore.getters.currentUser.admin, targetApiPath: 'admins' }),
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/:target_type/:target_id/notifications',
+      name: 'UnauthenticatedTargetNotificationsIndex',
+      component: NotificationsIndex,
+      props : true
+    },
+    {
+      path: '/subscriptions',
+      name: 'AuthenticatedUserSubscriptionsIndex',
+      component: SubscriptionsIndex,
+      props: () => ({ target: authStore.getters.currentUser }),
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/admins/subscriptions',
+      name: 'AuthenticatedAdminSubscriptionsIndex',
+      component: SubscriptionsIndex,
+      props: () => ({ target: authStore.getters.currentUser.admin, targetApiPath: 'admins' }),
+      meta: { requiresAuth: true }
+    },
+    {
+      path: '/:target_type/:target_id/subscriptions',
+      name: 'UnauthenticatedTargetSubscriptionsIndex',
+      component: SubscriptionsIndex,
+      props : true
+    }
+  ]
+})
+
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(record => record.meta.requiresAuth) && !authStore.getters.userSignedIn) {
+      next({ path: '/login', query: { redirect: to.fullPath }});
+  } else {
+    next();
+  }
+})
+
+if (authStore.getters.userSignedIn) {
+  for (var authHeader of Object.keys(authStore.getters.authHeaders)) {
+    axios.defaults.headers.common[authHeader] = authStore.getters.authHeaders[authHeader];
+  }
+}
+
+Vue.use(VueRouter)
+Vue.use(VueMoment, { moment })
+Vue.use(VuePluralize)
+
+export default {
+  name: 'App',
+  router
+}
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/spec/rails_app/app/javascript/components/DeviseTokenAuth.vue b/spec/rails_app/app/javascript/components/DeviseTokenAuth.vue
new file mode 100644
index 00000000..06e1a9b3
--- /dev/null
+++ b/spec/rails_app/app/javascript/components/DeviseTokenAuth.vue
@@ -0,0 +1,83 @@
+<template>
+  <div id="login">
+    <h2>Log in</h2>
+    <form class="new_user" @submit.prevent="login">
+      <div class="field">
+        <label for="user_email">Email</label><br />
+        <input v-model="loginParams.email" autofocus="autofocus" autocomplete="email" type="email" value="" name="user[email]" id="user_email" />
+      </div>
+      <div class="field">
+        <label for="user_password">Password</label><br />
+        <input v-model="loginParams.password" autocomplete="current-password" type="password" name="user[password]" id="user_password" />
+      </div>
+      <div class="actions">
+        <input type="submit" name="commit" value="Log in" data-disable-with="Log in" />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import authStore from "../store/auth"
+
+export default {
+  name: 'DeviseTokenAuth',
+  props: {
+    isLogout: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      loginParams: {
+        email: "",
+        password: ""
+      }
+    }
+  },
+  mounted () {
+    if (this.isLogout) {
+      this.logout();
+    }
+  },
+  methods: {
+    login () {
+      axios
+        .post('/auth/sign_in', { email: this.loginParams.email, password: this.loginParams.password })
+        .then(response => {
+          if (response.status == 200) {
+            let authHeaders = {};
+            for (let authHeader of ['access-token', 'client', 'uid']) {
+              authHeaders[authHeader] = response.headers[authHeader];
+              axios.defaults.headers.common[authHeader] = authHeaders[authHeader];
+            }
+            authStore.commit('signIn', { user: response.data.data, authHeaders: authHeaders });
+            if (this.$route.query.redirect) {
+              this.$router.push(this.$route.query.redirect);
+            } else {
+              this.$router.push('/');
+            }
+          }
+        })
+        .catch (error => {
+          console.log("Authentication failed");
+          if (error.response.status == 401) {
+            this.$router.go({path: this.$router.currentRoute.path});
+          }
+        })
+    },
+    logout () {
+      for (var authHeader of Object.keys(authStore.getters.authHeaders)) {
+        delete axios.defaults.headers.common[authHeader];
+      }
+      authStore.commit('signOut');
+      this.$router.push('/');
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/spec/rails_app/app/javascript/components/Top.vue b/spec/rails_app/app/javascript/components/Top.vue
new file mode 100644
index 00000000..0e48f3bf
--- /dev/null
+++ b/spec/rails_app/app/javascript/components/Top.vue
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <section>
+      <h1>Authentecated User</h1>
+      <div class="list_wrapper">
+        <div class="list_image"></div>
+        <div class="list_description_wrapper">
+          <div class="list_description">
+            <div v-if="userSignedIn">
+              <span>{{ currentUser.name }}</span> · {{ currentUser.email }} · <router-link v-bind:to="{ path: '/logout' }">Logout</router-link><br>
+            </div>
+            <div v-else>
+              <span>Not logged in</span> · <router-link v-bind:to="{ path: '/login' }">Login</router-link><br>
+            </div>
+            <router-link v-bind:to="{ name : 'AuthenticatedUserNotificationsIndex' }">Notifications</router-link> /
+            <router-link v-bind:to="{ name : 'AuthenticatedUserSubscriptionsIndex' }">Subscriptions</router-link>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h1>Listing Users</h1>
+      <div v-for="user in users" :key="`${user.id}`" class="list_wrapper">
+        <div class="list_image"></div>
+        <div class="list_description_wrapper">
+          <p class="list_description">
+            <span>{{ user.name }}</span> · {{ user.email }}<br>
+            <router-link v-bind:to="{ name : 'UnauthenticatedTargetNotificationsIndex', params : { target_type: 'users', target_id: user.id, target: user }}">Notifications</router-link> /
+            <router-link v-bind:to="{ name : 'UnauthenticatedTargetSubscriptionsIndex', params : { target_type: 'users', target_id: user.id, target: user }}">Subscriptions</router-link>
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h1>Authentecated User as Admin</h1>
+      <div class="list_wrapper">
+        <div class="list_image"></div>
+        <div class="list_description_wrapper">
+          <div class="list_description">
+            <div v-if="userSignedIn">
+              <span>{{ currentUser.name }}</span> · {{ currentUser.email }} · <span v-if="currentUser.admin">(admin)</span><span v-else>(not admin)</span><br>
+            </div>
+            <div v-else>
+              <span>Not logged in</span> · <router-link v-bind:to="{ path: '/login' }">Login</router-link><br>
+            </div>
+            <router-link v-bind:to="{ name : 'AuthenticatedAdminNotificationsIndex' }">Notifications</router-link> /
+            <router-link v-bind:to="{ name : 'AuthenticatedAdminSubscriptionsIndex' }">Subscriptions</router-link>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h1>Listing Admins</h1>
+      <div v-for="admin in admins" :key="`${admin.id}`" class="list_wrapper">
+        <div class="list_wrapper">
+          <div class="list_image"></div>
+          <div class="list_description_wrapper">
+            <p class="list_description">
+              <span>{{ admin.user.name }}</span> · {{ admin.user.email }}<br>
+              <router-link v-bind:to="{ name : 'UnauthenticatedTargetNotificationsIndex', params : { target_type: 'admins', target_id: admin.id, target: admin }}">Notifications</router-link> /
+              <router-link v-bind:to="{ name : 'UnauthenticatedTargetSubscriptionsIndex', params : { target_type: 'admins', target_id: admin.id, target: admin }}">Subscriptions</router-link>
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import authStore from "../store/auth"
+
+export default {
+  name: 'Top',
+  data () {
+    return {
+      userSignedIn: authStore.getters.userSignedIn,
+      currentUser: authStore.getters.currentUser,
+      users: [],
+      admins: []
+    }
+  },
+  mounted () {
+    axios
+      .get('/users')
+      .then(response => {
+        this.users = response.data.users;
+        this.admins = this.users
+          .filter(user => user.admin)
+          .map(user => Object.assign(Object.create(user.admin), { user: user }))
+      })
+  }
+}
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/spec/rails_app/app/javascript/components/notifications/Index.vue b/spec/rails_app/app/javascript/components/notifications/Index.vue
new file mode 100644
index 00000000..2ceafb0b
--- /dev/null
+++ b/spec/rails_app/app/javascript/components/notifications/Index.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="notification_wrapper">
+    <div class="notification_header">
+      <h1>
+        Notifications to {{ currentTarget.printable_target_name }}
+        <a href="#" v-on:click="openAll()" data-remote="true">
+          <span class="notification_count"><span v-bind:class="[unopenedNotificationCount > 0 ? 'unopened' : '']">
+            {{ unopenedNotificationCount }}
+          </span></span>
+        </a>
+      </h1>
+      <h3>
+        <span class="action_cable_status">Disabled</span>
+      </h3>
+    </div>
+    <div class="notifications">
+      <div v-for="notification in notifications" :key="`${notification.id}_${notification.opened_at}`">
+        <notification :targetNotification="notification" :targetApiPath="targetApiPath" @getUnopenedNotificationCount="getUnopenedNotificationCount" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import Notification from './Notification.vue'
+
+export default {
+  name: 'NotificationsIndex',
+  components: {
+    Notification
+  },
+  props: {
+    target_type: {
+      type: String
+    },
+    target_id: {
+      type: [String, Number]
+    },
+    targetApiPath: {
+      type: String,
+      default: function () { 
+        if (this.target_type && this.target_id) {
+          return '/' + this.target_type + '/' + this.target_id;
+        } else {
+          return '';
+        }
+      }
+    },
+    target: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+      currentTarget: { printable_target_name: '' },
+      unopenedNotificationCount: 0,
+      notifications: []
+    }
+  },
+  mounted () {
+    if (this.target) {
+      this.currentTarget = this.target;
+    } else {
+      this.getCurrentTarget();
+    }
+    this.getNotifications();
+    this.getUnopenedNotificationCount();
+  },
+  methods: {
+    getCurrentTarget () {
+      axios
+        .get(this.targetApiPath)
+        .then(response => (this.currentTarget = response.data))
+    },
+    getNotifications () {
+      axios
+        .get(this.targetApiPath + '/notifications', { params: this.$route.query })
+        .then(response => (this.notifications = response.data.notifications))
+        .catch (error => {
+          if (error.response.status == 401) {
+            this.$router.push('/logout');
+          }
+        })
+    },
+    getUnopenedNotificationCount () {
+      if (this.$route.query.filter == 'opened') {
+        this.unopenedNotificationCount = 0;
+      } else {
+        axios
+          .get(this.targetApiPath + '/notifications', { params: Object.assign({ filter: 'unopened' }, this.$route.query) })
+          .then(response => (this.unopenedNotificationCount = response.data.count))
+          .catch (error => {
+            if (error.response.status == 401) {
+              this.$router.push('/logout');
+            }
+          })
+      }
+    },
+    openAll () {
+      axios
+        .post(this.targetApiPath + '/notifications/open_all')
+        .then(response => {
+          if (response.status == 200) {
+            this.getNotifications();
+            this.getUnopenedNotificationCount();
+          }
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.notification_wrapper .notification_header h1 span span{
+  color: #fff;
+  background-color: #e5e5e5;
+  border-radius: 4px;
+  font-size: 12px;
+  padding: 4px 8px;
+}
+.notification_wrapper .notification_header h1 span span.unopened{
+  background-color: #f87880;
+}
+</style>
\ No newline at end of file
diff --git a/spec/rails_app/app/javascript/components/notifications/Notification.vue b/spec/rails_app/app/javascript/components/notifications/Notification.vue
new file mode 100644
index 00000000..55b21ed9
--- /dev/null
+++ b/spec/rails_app/app/javascript/components/notifications/Notification.vue
@@ -0,0 +1,133 @@
+<template>
+  <div v-bind:class="`notification_${notification.id}`">
+    <div v-if="!notification.opened_at">
+      <a href="#" v-on:click="open(notification)" data-remote="true" class="unopened_wrapper">
+        <div class="unopened_circle"></div>
+        <div class="unopened_description_wrapper">
+          <p class="unopened_description">Open</p>
+        </div>
+      </a>
+      <a href="#" v-on:click="move(notification, '?open=true')" data-remote="true">
+        <notification-content :notification="notification" />
+      </a>
+      <div class="unopened_wrapper"></div>
+    </div>
+    <div v-else>
+      <a href="#" v-on:click="move(notification, '')" data-remote="true">
+        <notification-content :notification="notification" />
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import NotificationContent from './NotificationContent.vue'
+
+export default {
+  name: 'Notification',
+  components: {
+    NotificationContent
+  },
+  props: {
+    targetNotification: {
+      type: Object,
+      required: true
+    },
+    targetApiPath: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      notification: this.targetNotification,
+      baseURL: axios.defaults.baseURL + this.targetApiPath
+    }
+  },
+  methods: {
+    open (notification) {
+      axios
+        .put(this.targetApiPath + '/notifications/' + notification.id + '/open')
+        .then(response => {
+          if (response.status == 200) {
+            this.$emit('getUnopenedNotificationCount')
+            this.notification = response.data.notification
+          }
+        })
+        .catch (error => {
+          if (error.response.status == 401) {
+            this.$router.push('/logout');
+          }
+        })
+    },
+    move (notification, paramsString) {
+      axios
+        .get(this.targetApiPath + '/notifications/' + notification.id + '/move' + paramsString)
+        .then(response => {
+          if (response.status == 200) {
+            window.location.href = response.request.responseURL;
+          }
+        })
+        .catch (error => {
+          if (error.response.status == 401) {
+            this.$router.push('/logout');
+          }
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* unopened_circle */
+.unopened_wrapper{
+  position: absolute;
+  margin-top: 20px;
+  margin-left: 56px;
+}
+.unopened_wrapper .unopened_circle {
+  display: block;
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  border-radius: 50%;
+  background-color: #27a5eb;
+  z-index: 2;
+}
+.unopened_wrapper:hover > .unopened_description_wrapper{
+  display: block;
+}
+.unopened_wrapper .unopened_description_wrapper {
+  display: none;
+  position: absolute;
+  margin-top: 26px;
+  margin-left: -24px;
+}
+.unopened_wrapper .unopened_description_wrapper .unopened_description {
+  position: absolute;
+  color: #fff;
+  font-size: 12px;
+  text-align: center;
+
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.8);
+  padding: 4px 12px;
+  z-index: 999;
+}
+.unopened_wrapper .unopened_description_wrapper .unopened_description:before {
+    border: solid transparent;
+    border-top-width: 0;
+    content: "";
+    display: block;
+    position: absolute;
+    width: 0;
+    left: 50%;
+    top: -5px;
+    margin-left: -5px;
+    height: 0;
+    border-width: 0 5px 5px 5px;
+    border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;
+    z-index: 0;
+}
+</style>
\ No newline at end of file
diff --git a/spec/rails_app/app/javascript/components/notifications/NotificationContent.vue b/spec/rails_app/app/javascript/components/notifications/NotificationContent.vue
new file mode 100644
index 00000000..9116ef8f
--- /dev/null
+++ b/spec/rails_app/app/javascript/components/notifications/NotificationContent.vue
@@ -0,0 +1,122 @@
+<template>
+  <div v-bind:class="[notification.opened_at ? 'opened' : 'unopened', 'notification_list']">
+    <div class="notification_list_cover"></div>
+    <div class="list_image"></div>
+    <div class="list_text_wrapper">
+      <!-- Custom view -->
+      <p v-if="notification.key == 'article.update'" class="list_text">
+        <strong>{{ notification.notifier.name }}</strong> updated his or her article "{{ notification.notifiable.title }}".
+        <br>
+        <span class="created_at">{{ new Date(notification.created_at) | moment('timezone', 'UTC', "MMM DD HH:mm") }}</span>
+      </p>
+      <!-- Default view -->
+      <p v-else class="list_text">
+        <strong v-if="notification.notifier">{{ notification.notifier.printable_notifier_name }}</strong>
+        <strong v-else>Someone</strong>
+        <span v-if="notification.group_member_notifier_count > 0">
+          and {{ notification.group_member_notifier_count }} other
+          <span v-if="notification.notifier">{{ notification.notifier.printable_type.toLowerCase() | pluralize(notification.group_member_notifier_count) }}</span>
+          <span v-else>people</span>
+        </span>
+        notified you of
+        <span v-if="notification.notifiable" key="notification-group">
+          <span v-if="notification.group_members.length">
+            {{ notification.group_notification_count }} {{notification.notifiable_type.toLowerCase() | pluralize(notification.group_notification_count) }} including
+          </span>
+          {{ notification.printable_notifiable_name }}
+          <span v-if="notification.group"> in {{ notification.group.printable_group_name }}</span>
+        </span>
+        <span v-else key="notification-group">
+          <span v-if="notification.group_members.length" key="group-members">
+            {{ notification.group_notification_count }} {{notification.notifiable_type.toLowerCase() | pluralize(notification.group_notification_count) }}
+          </span>
+          <span v-else key="group-members">
+            a {{ notification.notifiable_typetoLowerCase() | pluralize(0) }}
+          </span>
+          <span v-if="notification.group"> in {{ notification.group.printable_group_name }}</span>
+          but the notifiable is not found. It may have been deleted.
+        </span>
+        <br>
+        <span class="created_at">{{ new Date(notification.created_at) | moment('timezone', 'UTC', "MMM DD hh:mm") }}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NotificationContent',
+  props: {
+    notification: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* list */
+.notification_list {
+  padding: 15px 10px;
+  position: relative;
+  border-bottom: 1px solid #e5e5e5;
+}
+.notification_list.unopened {
+  background-color: #eeeff4;
+}
+.notification_list:hover {
+  background-color: #f8f9fb;
+}
+.notification_list:last-child {
+  border-bottom: none;
+}
+.notification_list:after{
+  content: "";
+  clear: both;
+  display: block;
+}
+.notification_list .notification_list_cover{
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+
+}
+.notification_list .list_image {
+  float: left;
+  width: 40px;
+  height: 40px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-color: #979797;
+}
+.notification_list .list_text_wrapper {
+  float: left;
+  width: calc(100% - 60px);
+  margin-left: 20px;
+}
+.notification_list .list_text_wrapper .list_text {
+  color: #4f4f4f;
+  font-size: 14px;
+  line-height: 1.4;
+  margin-top: 0;
+  height: auto;
+  font-weight: normal;
+}
+.notification_list .list_text_wrapper .list_text span {
+  color: #4f4f4f;
+  font-size: 14px;
+}
+.notification_list .list_text_wrapper .list_text strong{
+  font-weight: bold;
+}
+.notification_list .list_text_wrapper .list_text span.created_at {
+  color: #979797;
+  font-size: 13px;
+}
+</style>
\ No newline at end of file
diff --git a/spec/rails_app/app/javascript/components/subscriptions/Index.vue b/spec/rails_app/app/javascript/components/subscriptions/Index.vue
new file mode 100644
index 00000000..f33991cb
--- /dev/null
+++ b/spec/rails_app/app/javascript/components/subscriptions/Index.vue
@@ -0,0 +1,279 @@
+<template>
+  <div class="subscription_wrapper">
+    <div class="subscription_header">
+      <h1>Subscriptions for {{ currentTarget.printable_target_name }}</h1>
+    </div>
+
+    <div v-if="subscriptions">
+      <div class="subscription_header">
+        <h2>Configured subscriptions</h2>
+      </div>
+      <div class="subscriptions" id="subscriptions">
+        <div v-if="subscriptions.length" class="fields_area">
+          <div v-for="subscription in subscriptions" :key="`${subscription.id}_${subscription.updated_at}`">
+            <subscription :targetSubscription="subscription" :targetApiPath="targetApiPath" @getSubscriptions="getSubscriptions" />
+          </div>
+        </div>
+        <div v-else class="fields_area">
+          <div class="fields_wrapper">
+            No subscriptions are available.
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="notificationKeys">
+      <div class="subscription_header">
+        <h2>Unconfigured notification keys</h2>
+      </div>
+      <div class="notification_keys" id="notification_keys">
+        <div v-if="notificationKeys.length" class="fields_area">
+          <div v-for="notificationKey in notificationKeys" :key="notificationKey">
+            <notification-key :notificationKey="notificationKey" :targetApiPath="targetApiPath" @getSubscriptions="getSubscriptions" />
+          </div>
+        </div>
+        <div v-else class="fields_area">
+          <div class="fields_wrapper">
+            No notification keys are available.
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="subscription_header">
+      <h2>Create a new subscription</h2>
+    </div>
+    <div class="subscription_form" id="subscription_form">
+      <div class="fields_area">
+        <new-subscription :targetApiPath="targetApiPath" @getSubscriptions="getSubscriptions" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import Subscription from './Subscription.vue'
+import NotificationKey from './NotificationKey.vue'
+import NewSubscription from './NewSubscription.vue'
+
+export default {
+  name: 'SubscriptionsIndex',
+  components: {
+    Subscription,
+    NotificationKey,
+    NewSubscription
+  },
+  props: {
+    target_type: {
+      type: String
+    },
+    target_id: {
+      type: [String, Number]
+    },
+    targetApiPath: {
+      type: String,
+      default: function () { 
+        if (this.target_type && this.target_id) {
+          return '/' + this.target_type + '/' + this.target_id;
+        } else {
+          return '';
+        }
+      }
+    },
+    target: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+      currentTarget: { printable_target_name: '' },
+      subscriptions: [],
+      notificationKeys: []
+    }
+  },
+  mounted () {
+    if (this.target) {
+      this.currentTarget = this.target;
+    } else {
+      this.getCurrentTarget();
+    }
+    this.getSubscriptions();
+  },
+  methods: {
+    getCurrentTarget () {
+      axios
+        .get(this.targetApiPath)
+        .then(response => (this.currentTarget = response.data))
+    },
+    getSubscriptions () {
+      axios
+        .get(this.targetApiPath + '/subscriptions')
+        .then(response => {
+          this.subscriptions = response.data.subscriptions;
+          this.notificationKeys = response.data.unconfigured_notification_keys;
+        })
+        .catch (error => {
+          if (error.response.status == 401) {
+            this.$router.push('/logout');
+          }
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.subscription_header h1 {
+  margin-bottom: 30px;
+}
+
+.fields_area {
+  border: 1px solid #e5e5e5;
+  width: 600px;
+  box-sizing: border-box;
+  margin-bottom: 30px;
+}
+</style>
+
+<style>
+.fields_area .fields_wrapper {
+  position: relative;
+  background-color: #fff;
+  padding: 20px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #e5e5e5;
+}
+.fields_area .fields_wrapper.configured {
+  background-color: #f8f9fb;
+}
+
+.fields_area .fields_wrapper .fields_title_wrapper {
+  margin-bottom: 16px;
+  border-bottom: none;
+}
+
+.fields_area .fields_wrapper .fields_title_wrapper .fields_title {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.fields_area .fields_wrapper .fields_title_wrapper p {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+}
+
+.fields_area .fields_wrapper .field_wrapper {
+  margin-bottom: 16px;
+}
+
+.fields_area .fields_wrapper .field_wrapper:last-child {
+  margin-bottom: 0;
+}
+
+.fields_area .fields_wrapper .field_wrapper.hidden {
+  display: none;
+}
+
+.fields_area .fields_wrapper .field_wrapper .field_label {
+  margin-bottom: 8px;
+}
+
+.fields_area .fields_wrapper .field_wrapper .field_label label {
+  font-size: 14px;
+}
+
+.ui label {
+  font-size: 14px;
+}
+
+/* button */
+.ui.button button,
+.ui.button .button {
+  cursor: pointer;
+  color: #4f4f4f;
+  font-weight: bold;
+  font-size: 12px;
+  padding: 10px 14px;
+  margin-left: 10px;
+  border: 1px solid #e5e5e5;
+  background-color: #fafafa;
+}
+
+.ui.button button:first-child,
+.ui.button .button:first-child {
+  margin-left: 0;
+}
+
+.ui.text_field input {
+  margin: 0;
+  outline: 0;
+  padding: 10px;
+  font-size: 14px;
+  border: 1px solid #e5e5e5;
+  border-radius: 3px;
+  box-shadow: 0 0 0 0 transparent inset;
+}
+
+/* checkbox */
+.ui.checkbox {
+  position: relative;
+  left: 300px;
+  margin-top: -26px;
+  width: 40px;
+}
+
+.ui.checkbox input {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+
+.ui.checkbox .slider {
+  display: block;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+
+  padding: 2px;
+  width: 36px;
+  height: 20px;
+  background-color: #dddddd;
+  border-radius: 20px;
+}
+
+.ui.checkbox .slider:before,
+.ui.checkbox .slider:after {
+  display: block;
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  bottom: 1px;
+  content: "";
+}
+
+.ui.checkbox .slider:before {
+  right: 1px;
+  background-color: #f1f1f1;
+  border-radius: 20px;
+  transition: background 0.4s;
+}
+
+.ui.checkbox .slider:after {
+  width: 20px;
+  background-color: #fff;
+  border-radius: 100%;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+  transition: margin 0.4s;
+}
+
+.ui.checkbox input:checked + .slider:before {
+  background-color: #8ce196;
+}
+
+.ui.checkbox input:checked + .slider:after {
+  margin-left: 18px;
+}
+</style>
\ No newline at end of file
diff --git a/spec/rails_app/app/javascript/components/subscriptions/NewSubscription.vue b/spec/rails_app/app/javascript/components/subscriptions/NewSubscription.vue
new file mode 100644
index 00000000..ac72b957
--- /dev/null
+++ b/spec/rails_app/app/javascript/components/subscriptions/NewSubscription.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="fields_wrapper">
+    <form class="new_subscription" @submit.prevent="createSubscription">
+      <div class="field_wrapper subscribing">
+        <div class="field_label">
+          <label>
+            Notification key
+          </label>
+        </div>
+
+        <div class="field">
+          <div class="ui text_field">
+            <input type="text" v-model="subscriptionParams.key" placeholder="Notification key" />
+          </div>
+        </div>
+      </div>
+
+      <div class="field_wrapper subscribing">
+        <div class="field_label">
+          <label>
+            Notification
+          </label>
+        </div>
+
+        <div class="field">
+          <div class="ui checkbox">
+            <label>
+              <input type="checkbox" v-model="subscriptionParams.subscribing" v-on:click="arrangeSubscription()" />
+              <div class="slider" />
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div v-bind:class="[subscriptionParams.subscribing ? '' : 'hidden', 'field_wrapper subscribing_to_email']">
+        <div class="field_label">
+          <label>
+            Email notification
+          </label>
+        </div>
+        <div class="field">
+          <div class="ui checkbox">
+            <label>
+              <input type="checkbox" v-model="subscriptionParams.subscribing_to_email" />
+              <div class="slider" />
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div class="ui button">
+        <button type="submit">Create subscription</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'Subscription',
+  props: {
+    targetApiPath: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      baseURL: axios.defaults.baseURL + this.targetApiPath,
+      subscriptionParams: {
+        key: "",
+        subscribing: true,
+        subscribing_to_email: true,
+        optional_targets: {}
+      }
+    }
+  },
+  methods: {
+    createSubscription () {
+      axios
+        .post(this.targetApiPath + '/subscriptions', { subscription: this.subscriptionParams })
+        .then(response => {
+          if (response.status == 201) {
+            this.$emit('getSubscriptions');
+            this.resetSubscriptionParams();
+          }
+        })
+        .catch (error => {
+          if (error.response.status == 401) {
+            this.$router.push('/logout');
+          }
+        })
+    },
+    arrangeSubscription () {
+      this.subscriptionParams.subscribing_to_email = !this.subscriptionParams.subscribing;
+    },
+    resetSubscriptionParams () {
+      this.subscriptionParams = {
+        key: "",
+        subscribing: true,
+        subscribing_to_email: true,
+        optional_targets: {}
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/spec/rails_app/app/javascript/components/subscriptions/NotificationKey.vue b/spec/rails_app/app/javascript/components/subscriptions/NotificationKey.vue
new file mode 100644
index 00000000..6e6199f6
--- /dev/null
+++ b/spec/rails_app/app/javascript/components/subscriptions/NotificationKey.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="fields_wrapper">
+    <form class="new_subscription" @submit.prevent="createSubscription">
+      <div class="fields_title_wrapper">
+        <h3 class="fields_title">
+          {{ notificationKey }}
+        </h3>
+
+        <p>
+          <router-link v-bind:to="{ path : $route.path.replace('subscriptions', 'notifications') + '?filtered_by_key=' + notificationKey }">Notifications</router-link>
+        </p>
+      </div>
+
+      <div class="field_wrapper subscribing">
+        <div class="field_label">
+          <label>
+            Notification
+          </label>
+        </div>
+
+        <div class="field">
+          <div class="ui checkbox">
+            <label>
+              <input type="checkbox" v-model="subscriptionParams.subscribing" v-on:click="arrangeSubscription()" />
+              <div class="slider" />
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div v-bind:class="[subscriptionParams.subscribing ? '' : 'hidden', 'field_wrapper subscribing_to_email']">
+        <div class="field_label">
+          <label>
+            Email notification
+          </label>
+        </div>
+        <div class="field">
+          <div class="ui checkbox">
+            <label>
+              <input type="checkbox" v-model="subscriptionParams.subscribing_to_email" />
+              <div class="slider" />
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div v-bind:class="[subscriptionParams.subscribing ? '' : 'hidden', 'field_wrapper subscribing_to_optional_targets']">
+        <div v-for="optionalTargetName in configuredOptionalTargetNames" :key="optionalTargetName">
+          <div class="field_label">
+            <label>
+              Optional tagret ({{ optionalTargetName }})
+            </label>
+          </div>
+          <div class="field">
+            <div class="ui checkbox">
+              <label>
+                <input type="checkbox" v-model="subscriptionParams.optional_targets[optionalTargetName].subscribing" />
+                <div class="slider" />
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="ui button">
+        <button type="submit">Configure subscription</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'Subscription',
+  props: {
+    notificationKey: {
+      type: String,
+      required: true
+    },
+    targetApiPath: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      baseURL: axios.defaults.baseURL + this.targetApiPath,
+      configuredOptionalTargetNames: [],
+      subscriptionParams: {
+        key: this.notificationKey,
+        subscribing: true,
+        subscribing_to_email: true,
+        optional_targets: {}
+      }
+    }
+  },
+  mounted () {
+    axios
+      .get(this.targetApiPath + '/subscriptions/optional_target_names?key=' + this.notificationKey)
+      .then(response => {
+        this.configuredOptionalTargetNames = response.data.optional_target_names;
+        for (let optionalTargetName of this.configuredOptionalTargetNames) {
+          this.subscriptionParams.optional_targets[optionalTargetName] = {};
+          this.subscriptionParams.optional_targets[optionalTargetName].subscribing = true;
+        }
+      })
+      .catch (error => {
+        if (error.response.status == 401) {
+          this.$router.push('/logout');
+        }
+      })
+  },
+  methods: {
+    createSubscription () {
+      axios
+        .post(this.targetApiPath + '/subscriptions', { subscription: this.subscriptionParams })
+        .then(response => {
+          if (response.status == 201) {
+            this.$emit('getSubscriptions');
+          }
+        })
+        .catch (error => {
+          if (error.response.status == 401) {
+            this.$router.push('/logout');
+          }
+        })
+    },
+    arrangeSubscription () {
+      this.subscriptionParams.subscribing_to_email = !this.subscriptionParams.subscribing;
+      for (let optionalTargetName of this.configuredOptionalTargetNames) {
+        this.subscriptionParams.optional_targets[optionalTargetName].subscribing = !this.subscriptionParams.subscribing;
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/spec/rails_app/app/javascript/components/subscriptions/Subscription.vue b/spec/rails_app/app/javascript/components/subscriptions/Subscription.vue
new file mode 100644
index 00000000..8f9c3631
--- /dev/null
+++ b/spec/rails_app/app/javascript/components/subscriptions/Subscription.vue
@@ -0,0 +1,226 @@
+<template>
+  <div class="fields_wrapper configured">
+    <div class="fields_title_wrapper">
+      <h3 class="fields_title">
+        {{ subscription.key }}
+      </h3>
+
+      <p>
+        <router-link v-bind:to="{ path : $route.path.replace('subscriptions', 'notifications') + '?filtered_by_key=' + subscription.key }">Notifications</router-link>
+      </p>
+    </div>
+
+    <div class="field_wrapper subscribing">
+      <div class="field_label">
+        <label>
+          Notification
+        </label>
+      </div>
+      <div class="field">
+        <div class="ui checkbox">
+          <div v-if="subscription.subscribing">
+            <a href="#" v-on:click="unsubscribe(subscription)" data-remote="true">
+              <input type="checkbox" checked="checked" />
+              <div class="slider" />
+            </a>
+          </div>
+          <div v-else>
+            <a href="#" v-on:click="subscribe(subscription)" data-remote="true">
+              <input type="checkbox" />
+              <div class="slider" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-bind:class="[subscription.subscribing ? '' : 'hidden', 'field_wrapper subscribing_to_email']">
+      <div class="field_label">
+        <label>
+          Email notification
+        </label>
+      </div>
+      <div class="field">
+        <div class="ui checkbox">
+          <div v-if="subscription.subscribing_to_email">
+            <a href="#" v-on:click="unsubscribe_to_email(subscription)" data-remote="true">
+              <label>
+                <input type="checkbox" checked="checked" />
+                <div class="slider" />
+              </label>
+            </a>
+          </div>
+          <div v-else>
+            <a href="#" v-on:click="subscribe_to_email(subscription)" data-remote="true">
+              <label>
+                <input type="checkbox" />
+                <div class="slider" />
+              </label>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-bind:class="[subscription.subscribing ? '' : 'hidden', 'field_wrapper subscribing_to_optional_targets']">
+      <div v-for="(optionalTargetSubscription, optionalTargetName) in subscription.optional_targets" :key="optionalTargetName">
+        <div class="field_label">
+          <label>
+            Optional tagret ({{ optionalTargetName }})
+          </label>
+        </div>
+        <div class="field">
+          <div class="ui checkbox">
+            <div v-if="optionalTargetSubscription.subscribing">
+              <a href="#" v-on:click="unsubscribe_to_optional_target(subscription, optionalTargetName)" data-remote="true">
+                <label>
+                  <input type="checkbox" checked="checked" />
+                  <div class="slider" />
+                </label>
+              </a>
+            </div>
+            <div v-else>
+              <a href="#" v-on:click="subscribe_to_optional_target(subscription, optionalTargetName)" data-remote="true">
+                <label>
+                  <input type="checkbox" />
+                  <div class="slider" />
+                </label>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="ui button">
+      <a href="#" v-on:click="destroy(subscription)" data-confirm="Are you sure?" class="button" data-remote="true">Destroy</a>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  name: 'Subscription',
+  props: {
+    targetSubscription: {
+      type: Object,
+      required: true
+    },
+    targetApiPath: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      subscription: this.targetSubscription,
+      baseURL: axios.defaults.baseURL + this.targetApiPath
+    }
+  },
+  methods: {
+    subscribe (subscription) {
+      axios
+        .put(this.targetApiPath + '/subscriptions/' + subscription.id + '/subscribe')
+        .then(response => {
+          if (response.status == 200) {
+            this.subscription = response.data
+          }
+        })
+        .catch (error => {
+          if (error.response.status == 401) {
+            this.$router.push('/logout');
+          }
+        })
+    },
+    unsubscribe (subscription) {
+      axios
+        .put(this.targetApiPath + '/subscriptions/' + subscription.id + '/unsubscribe')
+        .then(response => {
+          if (response.status == 200) {
+            this.subscription = response.data
+          }
+        })
+        .catch (error => {
+          if (error.response.status == 401) {
+            this.$router.push('/logout');
+          }
+        })
+    },
+    subscribe_to_email (subscription) {
+      axios
+        .put(this.targetApiPath + '/subscriptions/' + subscription.id + '/subscribe_to_email')
+        .then(response => {
+          if (response.status == 200) {
+            this.subscription = response.data
+          }
+        })
+        .catch (error => {
+          if (error.response.status == 401) {
+            this.$router.push('/logout');
+          }
+        })
+    },
+    unsubscribe_to_email (subscription) {
+      axios
+        .put(this.targetApiPath + '/subscriptions/' + subscription.id + '/unsubscribe_to_email')
+        .then(response => {
+          if (response.status == 200) {
+            this.subscription = response.data
+          }
+        })
+        .catch (error => {
+          if (error.response.status == 401) {
+            this.$router.push('/logout');
+          }
+        })
+    },
+    subscribe_to_optional_target (subscription, optionalTargetName) {
+      axios
+        .put(this.targetApiPath + '/subscriptions/' + subscription.id + '/subscribe_to_optional_target?optional_target_name=' + optionalTargetName)
+        .then(response => {
+          if (response.status == 200) {
+            this.subscription = response.data
+          }
+        })
+        .catch (error => {
+          if (error.response.status == 401) {
+            this.$router.push('/logout');
+          }
+        })
+    },
+    unsubscribe_to_optional_target (subscription, optionalTargetName) {
+      axios
+        .put(this.targetApiPath + '/subscriptions/' + subscription.id + '/unsubscribe_to_optional_target?optional_target_name=' + optionalTargetName)
+        .then(response => {
+          if (response.status == 200) {
+            this.subscription = response.data
+          }
+        })
+        .catch (error => {
+          if (error.response.status == 401) {
+            this.$router.push('/logout');
+          }
+        })
+    },
+    destroy (subscription) {
+      axios
+        .delete(this.targetApiPath + '/subscriptions/' + subscription.id)
+        .then(response => {
+          if (response.status == 204) {
+            this.$emit('getSubscriptions');
+          }
+        })
+        .catch (error => {
+          if (error.response.status == 401) {
+            this.$router.push('/logout');
+          }
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/spec/rails_app/app/javascript/packs/application.js b/spec/rails_app/app/javascript/packs/application.js
new file mode 100644
index 00000000..7c3021d7
--- /dev/null
+++ b/spec/rails_app/app/javascript/packs/application.js
@@ -0,0 +1,18 @@
+/* eslint no-console:0 */
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+
+// Uncomment to copy all static images under ../images to the output folder and reference
+// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
+// or the `imagePath` JavaScript helper below.
+//
+// const images = require.context('../images', true)
+// const imagePath = (name) => images(name, true)
+
+console.log('Hello World from Webpacker')
diff --git a/spec/rails_app/app/javascript/packs/spa.js b/spec/rails_app/app/javascript/packs/spa.js
new file mode 100644
index 00000000..b664310c
--- /dev/null
+++ b/spec/rails_app/app/javascript/packs/spa.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import axios from 'axios'
+import App from '../App.vue'
+
+axios.defaults.baseURL = "/api/v2"
+
+document.addEventListener('DOMContentLoaded', () => {
+  const app = new Vue({
+    render: h => h(App)
+  }).$mount('#spa')
+})
diff --git a/spec/rails_app/app/javascript/store/auth.js b/spec/rails_app/app/javascript/store/auth.js
new file mode 100644
index 00000000..9fcfaafe
--- /dev/null
+++ b/spec/rails_app/app/javascript/store/auth.js
@@ -0,0 +1,37 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import createPersistedState from "vuex-persistedstate"
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    signedInStatus: false,
+    currentUser: null,
+    authHeaders: {}
+  },
+  mutations: {
+    signIn(state, { user, authHeaders }) {
+      state.currentUser = user;
+      state.authHeaders = authHeaders;
+      state.signedInStatus = true;
+    },
+    signOut(state) {
+      state.signedInStatus = false;
+      state.currentUser = null;
+      state.authHeaders = {};
+    }
+  },
+  getters: {
+    userSignedIn(state) {
+      return state.signedInStatus;
+    },
+    currentUser(state) {
+      return state.currentUser;
+    },
+    authHeaders(state) {
+      return state.authHeaders;
+    }
+  },
+  plugins: [createPersistedState({storage: window.sessionStorage})]
+});
\ No newline at end of file
diff --git a/spec/rails_app/app/models/user.rb b/spec/rails_app/app/models/user.rb
index 6638e104..521152c6 100644
--- a/spec/rails_app/app/models/user.rb
+++ b/spec/rails_app/app/models/user.rb
@@ -19,6 +19,12 @@ module UserModel
   def admin?
     admin.present?
   end
+
+  def as_json(options = {})
+    options[:include] = (options[:include] || {}).merge(admin: { methods: [:printable_target_name] })
+    options[:methods] = (options[:methods] || []).push(:printable_target_name)
+    super(options)
+  end
 end
 
 unless ENV['AN_TEST_DB'] == 'mongodb'
diff --git a/spec/rails_app/app/views/spa/index.html.erb b/spec/rails_app/app/views/spa/index.html.erb
new file mode 100644
index 00000000..38f1af7b
--- /dev/null
+++ b/spec/rails_app/app/views/spa/index.html.erb
@@ -0,0 +1,2 @@
+<div id='spa'/>
+<%= javascript_pack_tag 'spa' %>
\ No newline at end of file
diff --git a/spec/rails_app/babel.config.js b/spec/rails_app/babel.config.js
new file mode 100644
index 00000000..12f98da5
--- /dev/null
+++ b/spec/rails_app/babel.config.js
@@ -0,0 +1,72 @@
+module.exports = function(api) {
+  var validEnv = ['development', 'test', 'production']
+  var currentEnv = api.env()
+  var isDevelopmentEnv = api.env('development')
+  var isProductionEnv = api.env('production')
+  var isTestEnv = api.env('test')
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(
+      'Please specify a valid `NODE_ENV` or ' +
+        '`BABEL_ENV` environment variables. Valid values are "development", ' +
+        '"test", and "production". Instead, received: ' +
+        JSON.stringify(currentEnv) +
+        '.'
+    )
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        '@babel/preset-env',
+        {
+          targets: {
+            node: 'current'
+          }
+        }
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        '@babel/preset-env',
+        {
+          forceAllTransforms: true,
+          useBuiltIns: 'entry',
+          corejs: 3,
+          modules: false,
+          exclude: ['transform-typeof-symbol']
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      'babel-plugin-macros',
+      '@babel/plugin-syntax-dynamic-import',
+      isTestEnv && 'babel-plugin-dynamic-import-node',
+      '@babel/plugin-transform-destructuring',
+      [
+        '@babel/plugin-proposal-class-properties',
+        {
+          loose: true
+        }
+      ],
+      [
+        '@babel/plugin-proposal-object-rest-spread',
+        {
+          useBuiltIns: true
+        }
+      ],
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          helpers: false,
+          regenerator: true,
+          corejs: false
+        }
+      ],
+      [
+        '@babel/plugin-transform-regenerator',
+        {
+          async: false
+        }
+      ]
+    ].filter(Boolean)
+  }
+}
diff --git a/spec/rails_app/bin/webpack b/spec/rails_app/bin/webpack
new file mode 100755
index 00000000..1031168d
--- /dev/null
+++ b/spec/rails_app/bin/webpack
@@ -0,0 +1,18 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require "bundler/setup"
+
+require "webpacker"
+require "webpacker/webpack_runner"
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::WebpackRunner.run(ARGV)
+end
diff --git a/spec/rails_app/bin/webpack-dev-server b/spec/rails_app/bin/webpack-dev-server
new file mode 100755
index 00000000..dd966273
--- /dev/null
+++ b/spec/rails_app/bin/webpack-dev-server
@@ -0,0 +1,18 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require "bundler/setup"
+
+require "webpacker"
+require "webpacker/dev_server_runner"
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::DevServerRunner.run(ARGV)
+end
diff --git a/spec/rails_app/config/initializers/devise_token_auth.rb b/spec/rails_app/config/initializers/devise_token_auth.rb
index 72b13c1b..caff2272 100644
--- a/spec/rails_app/config/initializers/devise_token_auth.rb
+++ b/spec/rails_app/config/initializers/devise_token_auth.rb
@@ -5,11 +5,11 @@
   # client is responsible for keeping track of the changing tokens. Change
   # this to false to prevent the Authorization header from changing after
   # each request.
-  # config.change_headers_on_each_request = true
+  config.change_headers_on_each_request = false
 
   # By default, users will need to re-authenticate after 2 weeks. This setting
   # determines how long tokens will remain valid after they are issued.
-  # config.token_lifespan = 2.weeks
+  config.token_lifespan = 1.hour
 
   # Limiting the token_cost to just 4 in testing will increase the performance of
   # your test suite dramatically. The possible cost value is within range from 4
diff --git a/spec/rails_app/config/routes.rb b/spec/rails_app/config/routes.rb
index 6fa3ec19..dc301891 100644
--- a/spec/rails_app/config/routes.rb
+++ b/spec/rails_app/config/routes.rb
@@ -1,36 +1,46 @@
 Rails.application.routes.draw do
+  # Routes for example Rails application
   root to: 'articles#index'
   devise_for :users
   resources :articles, except: [:destroy]
   resources :comments, only: [:create, :destroy]
 
+  # activity_notification routes for users
   notify_to :users, with_subscription: true
   notify_to :users, with_devise: :users, devise_default_routes: true, with_subscription: true
 
+  # activity_notification routes for admins
+  notify_to :admins, with_devise: :users, with_subscription: true
+  scope :admins, as: :admins do
+    notify_to :admins, with_devise: :users, devise_default_routes: true, with_subscription: true, routing_scope: :admins
+  end
+
+  # Routes for single page application working with activity_notification REST API backend
+  resources :spa, only: [:index]
   namespace :api do
     scope :"v#{ActivityNotification::GEM_VERSION::MAJOR}" do
       mount_devise_token_auth_for 'User', at: 'auth'
     end
   end
+
+  # Routes of activity_notification REST API backend for users
   scope :api do
     scope :"v#{ActivityNotification::GEM_VERSION::MAJOR}" do
       notify_to :users, api_mode: true, with_subscription: true
       notify_to :users, api_mode: true, with_devise: :users, devise_default_routes: true, with_subscription: true
       resources :apidocs, only: [:index], controller: 'activity_notification/apidocs'
+      resources :users, only: [:index, :show]
     end
   end
 
-  notify_to :admins, with_devise: :users, with_subscription: true
-  scope :admins, as: :admins do
-    notify_to :admins, with_devise: :users, devise_default_routes: true, with_subscription: true, routing_scope: :admins
-  end
-
+  # Routes of activity_notification REST API backend for admins
   scope :api do
     scope :"v#{ActivityNotification::GEM_VERSION::MAJOR}" do
       notify_to :admins, api_mode: true, with_devise: :users, with_subscription: true
       scope :admins, as: :admins do
         notify_to :admins, api_mode: true, with_devise: :users, devise_default_routes: true, with_subscription: true
       end
+      resources :admins, only: [:index, :show]
     end
   end
 end
diff --git a/spec/rails_app/config/webpack/development.js b/spec/rails_app/config/webpack/development.js
new file mode 100644
index 00000000..c5edff94
--- /dev/null
+++ b/spec/rails_app/config/webpack/development.js
@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()
diff --git a/spec/rails_app/config/webpack/environment.js b/spec/rails_app/config/webpack/environment.js
new file mode 100644
index 00000000..6ef014b0
--- /dev/null
+++ b/spec/rails_app/config/webpack/environment.js
@@ -0,0 +1,7 @@
+const { environment } = require('@rails/webpacker')
+const { VueLoaderPlugin } = require('vue-loader')
+const vue = require('./loaders/vue')
+
+environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
+environment.loaders.prepend('vue', vue)
+module.exports = environment
diff --git a/spec/rails_app/config/webpack/loaders/vue.js b/spec/rails_app/config/webpack/loaders/vue.js
new file mode 100644
index 00000000..509c742b
--- /dev/null
+++ b/spec/rails_app/config/webpack/loaders/vue.js
@@ -0,0 +1,6 @@
+module.exports = {
+  test: /\.vue(\.erb)?$/,
+  use: [{
+    loader: 'vue-loader'
+  }]
+}
diff --git a/spec/rails_app/config/webpack/production.js b/spec/rails_app/config/webpack/production.js
new file mode 100644
index 00000000..be0f53aa
--- /dev/null
+++ b/spec/rails_app/config/webpack/production.js
@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'production'
+
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()
diff --git a/spec/rails_app/config/webpack/test.js b/spec/rails_app/config/webpack/test.js
new file mode 100644
index 00000000..c5edff94
--- /dev/null
+++ b/spec/rails_app/config/webpack/test.js
@@ -0,0 +1,5 @@
+process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()
diff --git a/spec/rails_app/config/webpacker.yml b/spec/rails_app/config/webpacker.yml
new file mode 100644
index 00000000..79217f35
--- /dev/null
+++ b/spec/rails_app/config/webpacker.yml
@@ -0,0 +1,97 @@
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default
+  source_path: app/javascript
+  source_entry_path: packs
+  public_root_path: public
+  public_output_path: packs
+  cache_path: tmp/cache/webpacker
+  check_yarn_integrity: false
+  webpack_compile_output: true
+
+  # Additional paths webpack should lookup modules
+  # ['app/assets', 'engine/foo/app/assets']
+  resolved_paths: []
+
+  # Reload manifest.json on all requests so we reload latest compiled packs
+  cache_manifest: false
+
+  # Extract and emit a css file
+  extract_css: false
+
+  static_assets_extensions:
+    - .jpg
+    - .jpeg
+    - .png
+    - .gif
+    - .tiff
+    - .ico
+    - .svg
+    - .eot
+    - .otf
+    - .ttf
+    - .woff
+    - .woff2
+
+  extensions:
+    - .vue
+    - .mjs
+    - .js
+    - .sass
+    - .scss
+    - .css
+    - .module.sass
+    - .module.scss
+    - .module.css
+    - .png
+    - .svg
+    - .gif
+    - .jpeg
+    - .jpg
+
+development:
+  <<: *default
+  compile: true
+
+  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
+  check_yarn_integrity: true
+
+  # Reference: https://webpack.js.org/configuration/dev-server/
+  dev_server:
+    https: false
+    host: localhost
+    port: 3035
+    public: localhost:3035
+    hmr: false
+    # Inline should be set to true if using HMR
+    inline: true
+    overlay: true
+    compress: true
+    disable_host_check: true
+    use_local_ip: false
+    quiet: false
+    pretty: false
+    headers:
+      'Access-Control-Allow-Origin': '*'
+    watch_options:
+      ignored: '**/node_modules/**'
+
+
+test:
+  <<: *default
+  compile: true
+
+  # Compile test packs to a separate directory
+  public_output_path: packs-test
+
+production:
+  <<: *default
+
+  # Production depends on precompilation of packs prior to booting for performance.
+  compile: false
+
+  # Extract and emit a css file
+  extract_css: false
+
+  # Cache manifest.json for performance
+  cache_manifest: true
diff --git a/spec/rails_app/package.json b/spec/rails_app/package.json
new file mode 100644
index 00000000..8f19c223
--- /dev/null
+++ b/spec/rails_app/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "activity_notification",
+  "description": "Sample single page application for activity_notification using Vue.js",
+  "dependencies": {
+    "@rails/webpacker": "^4.2.0",
+    "axios": "^0.19.0",
+    "vue": "^2.6.10",
+    "vuex": "^3.1.2",
+    "vuex-persistedstate": "^2.7.0",
+    "vue-loader": "^15.7.2",
+    "vue-router": "^3.1.3",
+    "vue-template-compiler": "^2.6.10",
+    "vue-moment": "^4.1.0",
+    "vue-moment-tz": "^2.1.1",
+    "vue-pluralize": "^0.0.2"
+  },
+  "devDependencies": {
+    "webpack-dev-server": "^3.9.0"
+  },
+  "license": "MIT"
+}
diff --git a/spec/rails_app/postcss.config.js b/spec/rails_app/postcss.config.js
new file mode 100644
index 00000000..aa5998a8
--- /dev/null
+++ b/spec/rails_app/postcss.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-flexbugs-fixes'),
+    require('postcss-preset-env')({
+      autoprefixer: {
+        flexbox: 'no-2009'
+      },
+      stage: 3
+    })
+  ]
+}