diff --git a/src/components/Avatar.vue b/src/components/Avatar.vue
index f80041d..c37abe6 100644
--- a/src/components/Avatar.vue
+++ b/src/components/Avatar.vue
@@ -4,29 +4,29 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Vue } from "vue-class-component"
-import { Prop } from "vue-property-decorator"
+<script setup lang="ts">
+import { computed } from "vue"
 import makeBlockie from "ethereum-blockies-base64"
 
 import { Profile } from "@/api/users"
 
-export default class Avatar extends Vue {
+/* eslint-disable-next-line no-undef */
+const props = defineProps<{
+  profile: Profile,
+}>()
 
-  @Prop()
-  profile!: Profile
+const UNNAMED = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAC8ElEQVR4nO3Y3UtTcRzHcf+nPdwccQ4GmeBymZDXYUgP2BTbdOIfURmFMibOdJPZ00WRBq1wq3RBBlkIS106N92m9gd8vWrwW5B69fuccz4X78svfH/ntXMOO01/jivCcGrSvQAjCHQEAYsgYBEELIKARRCwCAIWQcAiCFgEAYsgYBEELIKARRCwCAIWQcAiCFgEAYsgYBEELIKARRCwCAIWQcAiCFgEAYsgYBEELIKARRCwCAKWKUGKu9sSn47J4GBQ/B0d4vG0iNvtFm9rqwQCnRK6OySJxBPZL+9o39XSIIe1skxMPJLm5mZxOByn5vG0yEx8SvvelgSpVvbk1s0bZ4JoLDISluOjA+1nsBRIZCSsXGSn0ynBYL8spJLyJfdJ1r+vyepKVubmZqS399o/KA/H72s/g2VA0u+WlIvr9XpleTn935mFVFJcLld9xjAM2drc0H4WS4A0Pqoyp2D8bfzBPWXODO8TeJC94rbyS+/vv33m2eLutrjd7vrscDik/TymB3mffqv8ypPJ2XPNX/L767N9fde1n8f0IEeH+1Io5OXH+jdZ+ZyR3Z2tc813dV0mCEq1akkMw6iDjI2Nat/J1iDz87PK4+75s5T2nWwLUijkxefz1THa2i5IrVrSvpctQbY2N6S7+4pydyy+eaV9L1uCZLMfpL39ooIxFYtq38uWIJOTj5X/HYZhyMsXT7XvZTuQw1pZQqEh5a4IBDpl7WtO+262BGn88DgwcEfKpd/a97IlyNLiawVjNDJsmk/tlgTp6bmqPKYqB0XtO9kW5Ff+p3J3xKdj2neyNUhmOa2A5FY/at/J1iBWjCBgEQQsU4NEoxPKOySVSmjfiSAEwYkgYBGEEcRuEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwDoBOz/dnwXMOO8AAAAASUVORK5CYII="
 
-  get avatarUrl(): string {
-    if (this.profile.avatar) {
-      return this.profile.avatar
-    } else if (this.profile.acct === "") {
-      return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAC8ElEQVR4nO3Y3UtTcRzHcf+nPdwccQ4GmeBymZDXYUgP2BTbdOIfURmFMibOdJPZ00WRBq1wq3RBBlkIS106N92m9gd8vWrwW5B69fuccz4X78svfH/ntXMOO01/jivCcGrSvQAjCHQEAYsgYBEELIKARRCwCAIWQcAiCFgEAYsgYBEELIKARRCwCAIWQcAiCFgEAYsgYBEELIKARRCwCAIWQcAiCFgEAYsgYBEELIKARRCwCAKWKUGKu9sSn47J4GBQ/B0d4vG0iNvtFm9rqwQCnRK6OySJxBPZL+9o39XSIIe1skxMPJLm5mZxOByn5vG0yEx8SvvelgSpVvbk1s0bZ4JoLDISluOjA+1nsBRIZCSsXGSn0ynBYL8spJLyJfdJ1r+vyepKVubmZqS399o/KA/H72s/g2VA0u+WlIvr9XpleTn935mFVFJcLld9xjAM2drc0H4WS4A0Pqoyp2D8bfzBPWXODO8TeJC94rbyS+/vv33m2eLutrjd7vrscDik/TymB3mffqv8ypPJ2XPNX/L767N9fde1n8f0IEeH+1Io5OXH+jdZ+ZyR3Z2tc813dV0mCEq1akkMw6iDjI2Nat/J1iDz87PK4+75s5T2nWwLUijkxefz1THa2i5IrVrSvpctQbY2N6S7+4pydyy+eaV9L1uCZLMfpL39ooIxFYtq38uWIJOTj5X/HYZhyMsXT7XvZTuQw1pZQqEh5a4IBDpl7WtO+262BGn88DgwcEfKpd/a97IlyNLiawVjNDJsmk/tlgTp6bmqPKYqB0XtO9kW5Ff+p3J3xKdj2neyNUhmOa2A5FY/at/J1iBWjCBgEQQsU4NEoxPKOySVSmjfiSAEwYkgYBGEEcRuEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwCIIWAQBiyBgEQQsgoBFELAIAhZBwDoBOz/dnwXMOO8AAAAASUVORK5CYII="
-    } else {
-      return makeBlockie(this.profile.acct)
-    }
+const avatarUrl = computed<string>(() => {
+  const profile = props.profile
+  if (profile.avatar) {
+    return profile.avatar
+  } else if (profile.acct === "") {
+    return UNNAMED
+  } else {
+    return makeBlockie(profile.acct)
   }
-
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index a79ab62..471836a 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -31,60 +31,39 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Options, Vue, setup } from "vue-class-component"
+<script setup lang="ts">
+import { onMounted } from "vue"
+import { $, $computed } from "vue/macros"
+import { useRouter } from "vue-router"
 
-import { InstanceInfo } from "@/api/instance"
-import Avatar from "@/components/Avatar.vue"
 import { useInstanceInfo } from "@/store/instance"
 import { useNotifications } from "@/store/notifications"
 import { useCurrentUser } from "@/store/user"
 
-@Options({
-  components: { Avatar },
+const router = useRouter()
+const { instance } = $(useInstanceInfo())
+const { loadNotifications, getUnreadNotificationCount } = $(useNotifications())
+const { currentUser, setCurrentUser, ensureAuthToken, setAuthToken } = $(useCurrentUser())
+
+onMounted(async () => {
+  if (isUserAuthenticated) {
+    // TODO: reload notifications periodically
+    await loadNotifications(ensureAuthToken())
+  }
 })
-export default class Sidebar extends Vue {
 
-  private store = setup(() => {
-    const { instance } = useInstanceInfo()
-    const { loadNotifications, getUnreadNotificationCount } = useNotifications()
-    const { currentUser, setCurrentUser, ensureAuthToken, setAuthToken } = useCurrentUser()
-    return {
-      instance,
-      currentUser,
-      setCurrentUser,
-      ensureAuthToken,
-      setAuthToken,
-      loadNotifications,
-      getUnreadNotificationCount,
-    }
-  })
+const isUserAuthenticated = $computed<boolean>(() => {
+  return currentUser !== null
+})
 
-  async created() {
-    if (this.isUserAuthenticated) {
-      // TODO: reload notifications periodically
-      await this.store.loadNotifications(this.store.ensureAuthToken())
-    }
-  }
-
-  get isUserAuthenticated(): boolean {
-    return this.store.currentUser !== null
-  }
-
-  get unreadNotificationCount(): number {
-    return this.store.getUnreadNotificationCount()
-  }
-
-  async logout() {
-    this.store.setCurrentUser(null)
-    this.store.setAuthToken(null)
-    this.$router.push({ name: "landing-page" })
-  }
-
-  get instance(): InstanceInfo | null {
-    return this.store.instance
-  }
+const unreadNotificationCount = $computed<number>(() => {
+  return getUnreadNotificationCount()
+})
 
+function logout() {
+  setCurrentUser(null)
+  setAuthToken(null)
+  router.push({ name: "landing-page" })
 }
 </script>