diff --git a/src/components/App.vue b/src/components/App.vue
index bc025b86bc..8c06a5d501 100755
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -64,6 +64,8 @@
 <script>
 'kiwi public';
 
+import { markRaw, toRef, watch } from 'vue';
+
 import cssVarsPonyfill from 'css-vars-ponyfill';
 import '@/res/globalStyle.css';
 import Tinycon from 'tinycon';
@@ -78,9 +80,9 @@ import AppSettings from '@/components/AppSettings';
 import Container from '@/components/Container';
 import ControlInput from '@/components/ControlInput';
 import MediaViewer from '@/components/MediaViewer';
-import { State as SidebarState } from '@/components/Sidebar';
 import * as Notifications from '@/libs/Notifications';
 import * as bufferTools from '@/libs/bufferTools';
+import useSidebarState from '@/libs/SidebarState';
 import ThemeManager from '@/libs/ThemeManager';
 import Logger from '@/libs/Logger';
 
@@ -112,7 +114,7 @@ export default {
             mediaviewerComponentProps: {},
             mediaviewerIframe: false,
             themeUrl: '',
-            sidebarState: new SidebarState(),
+            sidebarState: useSidebarState(),
         };
     },
     computed: {
@@ -156,7 +158,7 @@ export default {
         if (!startup) {
             Logger.error(`Startup screen "${startupName}" does not exist`);
         } else {
-            this.startupComponent = startup;
+            this.startupComponent = markRaw(startup);
         }
         this.trackWindowDimensions();
     },
@@ -196,7 +198,7 @@ export default {
                 this.activeComponent = null;
                 if (component) {
                     this.activeComponentProps = props;
-                    this.activeComponent = component;
+                    this.activeComponent = markRaw(component);
                 }
             });
             this.listen(this.$state, 'active.component.toggle', (component, props) => {
@@ -204,7 +206,7 @@ export default {
                     this.activeComponent = null;
                 } else if (component) {
                     this.activeComponentProps = props;
-                    this.activeComponent = component;
+                    this.activeComponent = markRaw(component);
                 }
             });
         },
@@ -241,7 +243,9 @@ export default {
                 }
 
                 this.mediaviewerUrl = opts.url;
-                this.mediaviewerComponent = opts.component;
+                this.mediaviewerComponent = opts.component
+                    ? markRaw(opts.component)
+                    : opts.component;
                 this.mediaviewerComponentProps = opts.componentProps;
                 this.mediaviewerIframe = opts.iframe;
                 this.mediaviewerOpen = true;
@@ -261,7 +265,7 @@ export default {
                 fallback: true,
             });
 
-            this.$state.$watch('ui.favicon_counter', (newVal) => {
+            watch(toRef(this.$state, 'ui.favicon_counter'), (newVal) => {
                 if (newVal) {
                     Tinycon.setBubble(newVal);
                 } else {
@@ -401,13 +405,7 @@ export default {
 @import "~font-awesome/less/path.less";
 @import "~font-awesome/less/animated.less";
 
-html {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-}
-
-body {
+html, body, #app {
     height: 100%;
     margin: 0;
     padding: 0;
diff --git a/src/components/AppSettings.vue b/src/components/AppSettings.vue
index fe29c43570..b1655f6614 100644
--- a/src/components/AppSettings.vue
+++ b/src/components/AppSettings.vue
@@ -216,6 +216,8 @@
 'kiwi public';
 
 import _ from 'lodash';
+import { toRef, watch } from 'vue';
+
 import ThemeManager from '@/libs/ThemeManager';
 import GlobalApi from '@/libs/GlobalApi';
 import localesList from '@/res/localesList';
@@ -242,29 +244,30 @@ export default {
         SettingsAliases,
         SettingsAdvanced,
     },
-    data: function data() {
+    data() {
         return {
             theme: '',
             customThemeUrl: '',
             pluginUiElements: GlobalApi.singleton().appSettingsPlugins,
             localesList,
+            teardownFn: null,
         };
     },
     computed: {
-        themeSupportsMonospace: function themeSupportsMonospace() {
+        themeSupportsMonospace() {
             let themeMgr = ThemeManager.instance();
             let val = themeMgr.themeVar('supports-monospace');
             return val === '1';
         },
-        canRegisterProtocolHandler: function canRegisterProtocolHandler() {
+        canRegisterProtocolHandler() {
             return !!navigator.registerProtocolHandler && this.$state.setting('allowRegisterProtocolHandler');
         },
         timestamps_24h: {
-            get: function get24Timestamps() {
+            get() {
                 // %H is 24 hour format
                 return this.$state.setting('buffers.timestamp_format').substr(0, 2) === '%H';
             },
-            set: function set24Timestamps(newVal) {
+            set(newVal) {
                 let newFormat = newVal ?
                     '%H:%M:%S' :
                     '%l:%M:%S %p';
@@ -324,13 +327,18 @@ export default {
             },
         },
     },
-    created: function created() {
+    created() {
         this.listenForThemeSettings();
 
         this.listen(this.$state, 'settings.tab.show', (tabName) => {
             this.showTab(tabName);
         });
     },
+    beforeUnmount() {
+        if (this.teardownFn) {
+            this.teardownFn();
+        }
+    },
     methods: {
         closeSettings: function closeSettings() {
             this.$state.$emit('active.component');
@@ -365,10 +373,9 @@ export default {
             };
 
             // Remove all our attached events to cleanup
-            let teardownFn = () => {
+            this.teardownFn = () => {
                 this.$state.$off('theme.change', updateFn);
                 watches.forEach((unwatchFn) => unwatchFn());
-                this.$off('hook:destroy', teardownFn);
             };
 
             // Update our info with the latest theme settings before we start
@@ -376,14 +383,13 @@ export default {
             updateFn();
 
             this.$state.$on('theme.change', updateFn);
-            this.$once('hook:destroyed', teardownFn);
 
-            // $watch returns a function to stop watching the data field. Add them into
+            // watch returns a function to stop watching the data field. Add them into
             // an array to make it easier to iterate over them all and unwatch them all
             // when needed.
             watches = [
-                this.$watch('theme', watchTheme),
-                this.$watch('customThemeUrl', watchCustomThemeUrl),
+                watch(toRef(this, 'theme'), watchTheme),
+                watch(toRef(this, 'customThemeUrl'), watchCustomThemeUrl),
             ];
         },
         enableAdvancedTab() {
diff --git a/src/components/AutoComplete.vue b/src/components/AutoComplete.vue
index 9876a23b99..9a26cc05d0 100644
--- a/src/components/AutoComplete.vue
+++ b/src/components/AutoComplete.vue
@@ -1,13 +1,12 @@
 <template>
     <div class="kiwi-autocomplete kiwi-theme-bg">
-
         <div
             v-for="item in filteredAndLimitedItems"
             :key="item.type+item.text"
             :class="{
                 'kiwi-autocomplete-item': true,
-                'kiwi-autocomplete-item--selected': item.idx === selected_idx}
-            "
+                'kiwi-autocomplete-item--selected': item.idx === selected_idx,
+            }"
             @mousedown.prevent
             @click="selected_idx = item.idx; selectCurrentItem()"
         >
@@ -47,6 +46,7 @@ import * as Misc from '@/helpers/Misc';
 
 export default {
     props: ['filter', 'buffer', 'items', 'itemsPerPage'],
+    emits: ['cancel', 'selected', 'temp'],
     data() {
         return {
             // items: [
diff --git a/src/components/Avatar.vue b/src/components/Avatar.vue
index fd2cdde6d3..ff007d1884 100644
--- a/src/components/Avatar.vue
+++ b/src/components/Avatar.vue
@@ -1,15 +1,18 @@
-<template functional>
+<template>
     <div
-        :data-nick="$options.m.nick(props)"
-        :class="[$options.m.hasAvatar(props) ? 'kiwi-avatar--image' : '', data.staticClass]"
+        :data-nick="$options.m.nick($props)"
+        :class="[
+            $options.m.hasAvatar($props) ? 'kiwi-avatar--image' : '',
+            $data.staticClass ? $data.staticClass : ''
+        ]"
         class="kiwi-avatar"
     >
         <span
-            :style="$options.m.avatarStyle(props)"
-            :class="{'kiwi-avatar--default': $options.m.isDefault(props)}"
+            :style="$options.m.avatarStyle($props)"
+            :class="{'kiwi-avatar--default': $options.m.isDefault($props)}"
             class="kiwi-avatar-inner"
         >
-            {{ $options.m.hasAvatar(props) ? '' : $options.m.firstNickLetter(props) }}
+            {{ $options.m.hasAvatar($props) ? '' : $options.m.firstNickLetter($props) }}
         </span>
     </div>
 </template>
diff --git a/src/components/AwayStatusIndicator.vue b/src/components/AwayStatusIndicator.vue
index d88dd9649f..f7b71c3052 100644
--- a/src/components/AwayStatusIndicator.vue
+++ b/src/components/AwayStatusIndicator.vue
@@ -1,13 +1,13 @@
-<template functional>
+<template>
     <span
-        v-if="$options.m.shouldShowStatus(props)"
+        v-if="$options.m.shouldShowStatus($props)"
         :class="{
-            'kiwi-awaystatusindicator--away': !props.user || props.user.isAway(),
-            'kiwi-awaystatusindicator--self': $options.m.isUserSelf(props),
-            [data.staticClass]: !!data.staticClass,
+            'kiwi-awaystatusindicator--away': !$props.user || $props.user.isAway(),
+            'kiwi-awaystatusindicator--self': $options.m.isUserSelf($props),
+            [$data.staticClass]: !!$data.staticClass,
         }"
         class="kiwi-awaystatusindicator"
-        @click="$options.m.toggleSelfAway(props)"
+        @click="$options.m.toggleSelfAway($props)"
     />
 </template>
 
diff --git a/src/components/ChannelBanlist.vue b/src/components/ChannelBanlist.vue
index 089a7bf437..65fe6659b2 100644
--- a/src/components/ChannelBanlist.vue
+++ b/src/components/ChannelBanlist.vue
@@ -31,21 +31,14 @@
             <div class="kiwi-sidebar-settings-access-table-header" />
             <div v-if="areWeAnOp" class="kiwi-sidebar-settings-access-table-header" />
 
-            <template v-for="ban in sortedBanList">
-                <div
-                    :key="'mask' + ban.banned"
-                    class="kiwi-sidebar-settings-access-mask"
-                >
+            <template v-for="ban in sortedBanList" :key="ban.banned">
+                <div class="kiwi-sidebar-settings-access-mask">
                     {{ displayMask(ban.banned) }}
                 </div>
-                <div
-                    :key="'who' + ban.banned"
-                    class="kiwi-sidebar-settings-access-who"
-                >
+                <div class="kiwi-sidebar-settings-access-who">
                     {{ ban.banned_by }}
                 </div>
                 <div
-                    :key="'when' + ban.banned"
                     class="kiwi-sidebar-settings-access-when"
                     :title="(new Date(ban.banned_at * 1000)).toLocaleString({
                         year: 'numeric', month: '2-digit', day: '2-digit'
@@ -57,11 +50,7 @@
                         })
                     }}
                 </div>
-                <div
-                    v-if="areWeAnOp"
-                    :key="'actions' + ban.banned"
-                    class="kiwi-sidebar-settings-access-actions"
-                >
+                <div v-if="areWeAnOp" class="kiwi-sidebar-settings-access-actions">
                     <i class="fa fa-trash" aria-hidden="true" @click="removeBan(ban.banned)" />
                 </div>
             </template>
diff --git a/src/components/ChannelInvitelist.vue b/src/components/ChannelInvitelist.vue
index 6252d6b17f..abcc0af8a6 100644
--- a/src/components/ChannelInvitelist.vue
+++ b/src/components/ChannelInvitelist.vue
@@ -60,21 +60,14 @@
             <div class="kiwi-sidebar-settings-access-table-header" />
             <div v-if="areWeAnOp" class="kiwi-sidebar-settings-access-table-header" />
 
-            <template v-for="invite in sortedInviteList">
-                <div
-                    :key="'mask' + invite.invited"
-                    class="kiwi-sidebar-settings-access-mask"
-                >
+            <template v-for="invite in sortedInviteList" :key="invite.invited">
+                <div class="kiwi-sidebar-settings-access-mask">
                     {{ displayMask(invite.invited) }}
                 </div>
-                <div
-                    :key="'who' + invite.invited"
-                    class="kiwi-sidebar-settings-access-who"
-                >
+                <div class="kiwi-sidebar-settings-access-who">
                     {{ invite.invited_by }}
                 </div>
                 <div
-                    :key="'when' + invite.invited"
                     class="kiwi-sidebar-settings-access-when"
                     :title="(new Date(invite.invited_at * 1000)).toLocaleString({
                         year: 'numeric', month: '2-digit', day: '2-digit'
@@ -86,11 +79,7 @@
                         })
                     }}
                 </div>
-                <div
-                    v-if="areWeAnOp"
-                    :key="'actions' + invite.invited"
-                    class="kiwi-sidebar-settings-access-actions"
-                >
+                <div v-if="areWeAnOp" class="kiwi-sidebar-settings-access-actions">
                     <i
                         class="fa fa-trash"
                         aria-hidden="true"
diff --git a/src/components/ControlInput.vue b/src/components/ControlInput.vue
index a5e5658863..923d827ee6 100755
--- a/src/components/ControlInput.vue
+++ b/src/components/ControlInput.vue
@@ -150,6 +150,7 @@
 'kiwi public';
 
 import _ from 'lodash';
+import { markRaw } from 'vue';
 
 import * as Misc from '@/helpers/Misc';
 import * as TextFormatting from '@/helpers/TextFormatting';
@@ -408,7 +409,7 @@ export default {
                     buffer: this.buffer,
                     ircinput: this.$refs.input,
                 };
-                this.active_tool = tool;
+                this.active_tool = markRaw(tool);
             }
         },
         toggleBold() {
diff --git a/src/components/LoadingAnimation.vue b/src/components/LoadingAnimation.vue
index 8d28219d06..17c5514fea 100755
--- a/src/components/LoadingAnimation.vue
+++ b/src/components/LoadingAnimation.vue
@@ -49,7 +49,7 @@ export default {
             this.draw();
         };
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.destroying = true;
         cancelAnimationFrame(this.animationFrame);
     },
diff --git a/src/components/MediaViewer.vue b/src/components/MediaViewer.vue
index 196cf789cd..9433d0b184 100755
--- a/src/components/MediaViewer.vue
+++ b/src/components/MediaViewer.vue
@@ -56,6 +56,7 @@ export default {
         UrlEmbed,
     },
     props: ['url', 'component', 'componentProps', 'isIframe', 'showPin'],
+    emits: ['close', 'pin'],
     data() {
         return {
             debouncedUpdateEmbed: null,
diff --git a/src/components/MessageList.vue b/src/components/MessageList.vue
index 940ab4061d..eaa1866665 100644
--- a/src/components/MessageList.vue
+++ b/src/components/MessageList.vue
@@ -23,7 +23,7 @@
             </div>
 
             <transition-group tag="div">
-                <template v-for="day in filteredMessagesGroupedDay">
+                <template v-for="day in filteredMessagesGroupedDay" :key="day.dayNum">
                     <div
                         v-if="filteredMessagesGroupedDay.length > 1 && day.messages.length > 0"
                         :key="'msgdatemarker' + day.dayNum"
@@ -31,8 +31,8 @@
                     >
                         <span>{{ (new Date(day.messages[0].time)).toDateString() }}</span>
                     </div>
-                    <transition-group :key="day.dayNum" tag="div">
-                        <template v-for="message in day.messages">
+                    <transition-group tag="div">
+                        <template v-for="message in day.messages" :key="'msg' + message.id">
                             <div
                                 v-if="shouldShowUnreadMarker(message)"
                                 :key="'msgunreadmarker' + message.id"
@@ -42,7 +42,6 @@
                             </div>
 
                             <div
-                                :key="'msg' + message.id"
                                 :class="[
                                     'kiwi-messagelist-item',
                                     selectedMessages[message.id] ?
@@ -54,16 +53,9 @@
                                     then each message layout checks for a message.bodyTemplate
                                     custom component to apply only to the body area
                                 -->
-                                <div
-                                    v-if="message.render() &&
-                                        message.template &&
-                                        message.template.$el &&
-                                        isTemplateVue(message.template)"
-                                    v-rawElement="message.template.$el"
-                                />
                                 <component
                                     :is="message.template"
-                                    v-else-if="message.render() && message.template"
+                                    v-if="message.render() && message.template"
                                     v-bind="message.templateProps"
                                     :buffer="buffer"
                                     :message="message"
@@ -112,7 +104,7 @@
 <script>
 'kiwi public';
 
-import Vue from 'vue';
+import { watch } from 'vue';
 import strftime from 'strftime';
 import Logger from '@/libs/Logger';
 import * as bufferTools from '@/libs/bufferTools';
@@ -212,6 +204,13 @@ export default {
             return days;
         },
         filteredMessages() {
+            // Hack; We need to make vue aware that we depend on buffer.message_count in order to
+            // get the messagelist to update its DOM, as the change of message_count alerts
+            // us that the messages have changed. This is done so that vue does not have to make
+            // every emssage reactive which gets very expensive.
+            /* eslint-disable no-unused-vars */
+            let ignoredVar = this.buffer.message_count;
+
             return bufferTools.orderedMessages(this.buffer);
         },
         shouldShowJoiningLoader() {
@@ -222,18 +221,6 @@ export default {
         },
     },
     watch: {
-        filteredMessages() {
-            // Data has changed and now preparing to update the DOM.
-            // Check our scrolling state before the DOM updates so that we know if we're scrolled
-            // at the bottom before new messages are added
-            this.checkScrollingState();
-
-            // Wait until after the DOM has updated before possibly scrolling down based on the
-            // previous check
-            this.$nextTick(() => {
-                this.maybeScrollToBottom();
-            });
-        },
         buffer(newBuffer, oldBuffer) {
             if (oldBuffer) {
                 oldBuffer.isMessageTrimming = true;
@@ -264,6 +251,21 @@ export default {
             // this.smooth_scroll = true;
         });
 
+        // this watcher was moved here due to it firing before mounted() could scroll
+        // to the bottom, this resulted in auto_scroll being set to false
+        watch(() => this.buffer.message_count, () => {
+            // Data has changed and now preparing to update the DOM.
+            // Check our scrolling state before the DOM updates so that we know
+            // if we're scrolled at the bottom before new messages are added
+            this.checkScrollingState();
+
+            // Wait until after the DOM has updated before possibly scrolling down based on the
+            // previous check
+            this.$nextTick(() => {
+                this.maybeScrollToBottom();
+            });
+        }, { deep: true });
+
         this.listen(this.$state, 'mediaviewer.opened', () => {
             this.$nextTick(this.maybeScrollToBottom.apply(this));
         });
@@ -275,15 +277,6 @@ export default {
         });
     },
     methods: {
-        isTemplateVue(template) {
-            const isVue = template instanceof Vue;
-            if (isVue && !window.kiwi_deprecations_messageTemplate) {
-                window.kiwi_deprecations_messageTemplate = true;
-                // eslint-disable-next-line no-console
-                console.warn('deprecated message.template or message.bodyTemplate, please use `message.template = kiwi.Vue.extend(component object)`');
-            }
-            return isVue;
-        },
         isHoveringOverMessage(message) {
             return message.nick && message.nick.toLowerCase() === this.hover_nick.toLowerCase();
         },
diff --git a/src/components/MessageListAvatar.vue b/src/components/MessageListAvatar.vue
index 1dda2c3ffb..52e2ae03da 100644
--- a/src/components/MessageListAvatar.vue
+++ b/src/components/MessageListAvatar.vue
@@ -1,5 +1,5 @@
-<template functional>
-    <component :is="$options.c.Avatar" :user="props.user" :message="props.message" size="small" />
+<template>
+    <component :is="$options.c.Avatar" :user="$props.user" :message="$props.message" size="small" />
 </template>
 
 <script>
diff --git a/src/components/MessageListMessageCompact.vue b/src/components/MessageListMessageCompact.vue
index 521f00fad8..3fffabc362 100644
--- a/src/components/MessageListMessageCompact.vue
+++ b/src/components/MessageListMessageCompact.vue
@@ -1,106 +1,112 @@
-<template functional>
+<template>
     <div
         :class="[
-            props.m().isRepeat() ?
+            $props.m().isRepeat() ?
                 'kiwi-messagelist-message--authorrepeat' :
                 'kiwi-messagelist-message--authorfirst',
-            'kiwi-messagelist-message-' + props.message.type,
-            props.message.type_extra ?
-                'kiwi-messagelist-message-' + props.message.type + '-' + props.message.type_extra :
+            'kiwi-messagelist-message-' + $props.message.type,
+            $props.message.type_extra ?
+                'kiwi-messagelist-message-' +
+                $props.message.type + '-' +
+                $props.message.type_extra :
                 '',
-            props.ml.isMessageHighlight(props.message) ?
+            $props.ml.isMessageHighlight($props.message) ?
                 'kiwi-messagelist-message--highlight' :
                 '',
-            props.ml.isHoveringOverMessage(props.message) ?
+            $props.ml.isHoveringOverMessage($props.message) ?
                 'kiwi-messagelist-message--hover' :
                 '',
-            props.ml.buffer.last_read && props.message.time > props.ml.buffer.last_read ?
+            $props.ml.buffer.last_read && $props.message.time > $props.ml.buffer.last_read ?
                 'kiwi-messagelist-message--unread' :
                 '',
-            props.message.nick.toLowerCase() === props.ml.ourNick.toLowerCase() ?
+            $props.message.nick.toLowerCase() === $props.ml.ourNick.toLowerCase() ?
                 'kiwi-messagelist-message--own' :
                 '',
-            props.ml.message_info_open === props.message ?
+            $props.ml.message_info_open === $props.message ?
                 'kiwi-messagelist-message--info-open' :
                 '',
-            props.ml.message_info_open && props.ml.message_info_open !== props.message ?
+            $props.ml.message_info_open && $props.ml.message_info_open !== $props.message ?
                 'kiwi-messagelist-message--blur' :
                 '',
-            (props.message.user && props.m().userMode(props.message.user)) ?
-                'kiwi-messagelist-message--user-mode-'+props.m().userMode(props.message.user) :
+            ($props.message.user && $props.m().userMode($props.message.user)) ?
+                'kiwi-messagelist-message--user-mode-'+$props.m().userMode($props.message.user) :
                 '',
-            data.staticClass,
+            $data.staticClass ? $data.staticClass : '',
         ]"
-        :data-message-id="props.message.id"
-        :data-nick="(props.message.nick||'').toLowerCase()"
+        :data-message-id="$props.message.id"
+        :data-nick="($props.message.nick||'').toLowerCase()"
         class="kiwi-messagelist-message kiwi-messagelist-message--compact"
-        @click="props.ml.onMessageClick($event, props.message, true)"
-        @dblclick="props.ml.onMessageDblClick($event, props.message)"
+        @click="$props.ml.onMessageClick($event, $props.message, true)"
+        @dblclick="$props.ml.onMessageDblClick($event, $props.message)"
     >
         <div
-            v-if="props.ml.bufferSetting('show_timestamps')"
-            :title="props.ml.formatTimeFull(props.message.time)"
+            v-if="$props.ml.bufferSetting('show_timestamps')"
+            :title="$props.ml.formatTimeFull($props.message.time)"
             class="kiwi-messagelist-time"
         >
-            {{ props.ml.formatTime(props.message.time) }}
+            {{ $props.ml.formatTime($props.message.time) }}
         </div>
         <a
-            :style="{ 'color': props.ml.userColour(props.message.user) }"
+            :style="{ 'color': $props.ml.userColour($props.message.user) }"
             :class="[
                 'kiwi-messagelist-nick',
-                (props.message.user && props.m().userMode(props.message.user)) ?
-                    'kiwi-messagelist-nick--mode-'+props.m().userMode(props.message.user) :
+                ($props.message.user && $props.m().userMode($props.message.user)) ?
+                    'kiwi-messagelist-nick--mode-'+$props.m().userMode($props.message.user) :
                     ''
             ]"
-            :data-nick="(props.message.nick||'').toLowerCase()"
-            @mouseover="props.ml.hover_nick=props.message.nick.toLowerCase();"
-            @mouseout="props.ml.hover_nick='';"
+            :data-nick="($props.message.nick||'').toLowerCase()"
+            @mouseover="$props.ml.hover_nick=$props.message.nick.toLowerCase();"
+            @mouseout="$props.ml.hover_nick='';"
         >
             <component
-                :is="injections.components.AwayStatusIndicator"
-                v-if="props.message.user"
-                :network="props.m().getNetwork()" :user="props.message.user"
+                :is="$options.components.AwayStatusIndicator"
+                v-if="$props.message.user"
+                :network="$props.m().getNetwork()" :user="$props.message.user"
                 :toggle="false"
             />
             <span class="kiwi-messagelist-nick--prefix">
-                {{ props.message.user ? props.m().userModePrefix(props.message.user) : '' }}
+                {{ $props.message.user ? $props.m().userModePrefix($props.message.user) : '' }}
             </span>
-            {{ props.message.nick }}
+            {{ $props.message.nick }}
         </a>
         <div
-            v-if="props.message.bodyTemplate &&
-                props.message.bodyTemplate.$el &&
-                props.ml.isTemplateVue(props.message.bodyTemplate)"
-            v-rawElement="props.message.bodyTemplate.$el"
+            v-if="$props.message.bodyTemplate &&
+                $props.message.bodyTemplate.$el &&
+                $props.ml.isTemplateVue($props.message.bodyTemplate)"
+            v-rawElement="$props.message.bodyTemplate.$el"
             class="kiwi-messagelist-body"
         />
         <component
-            :is="props.message.bodyTemplate"
-            v-else-if="props.message.bodyTemplate"
-            v-bind="props.message.bodyTemplateProps"
-            :buffer="props.ml.buffer"
-            :message="props.message"
-            :idx="props.idx"
-            :ml="props.ml"
+            :is="$props.message.bodyTemplate"
+            v-else-if="$props.message.bodyTemplate"
+            v-bind="$props.message.bodyTemplate$props"
+            :buffer="$props.ml.buffer"
+            :message="$props.message"
+            :idx="$props.idx"
+            :ml="$props.ml"
             class="kiwi-messagelist-body"
         />
-        <div v-else class="kiwi-messagelist-body" v-html="props.ml.formatMessage(props.message)" />
+        <div
+            v-else
+            class="kiwi-messagelist-body"
+            v-html="$props.ml.formatMessage($props.message)"
+        />
 
         <component
-            :is="injections.components.MessageInfo"
-            v-if="props.ml.message_info_open===props.message"
-            :message="props.message"
-            :buffer="props.ml.buffer"
-            @close="props.ml.toggleMessageInfo()"
+            :is="$options.components.MessageInfo"
+            v-if="$props.ml.message_info_open===$props.message"
+            :message="$props.message"
+            :buffer="$props.ml.buffer"
+            @close="$props.ml.toggleMessageInfo()"
         />
 
-        <div v-if="props.message.embed.payload && props.ml.shouldAutoEmbed">
+        <div v-if="$props.message.embed.payload && $props.ml.shouldAutoEmbed">
             <component
-                :is="injections.components.MediaViewer"
-                :url="props.message.embed.payload"
+                :is="$options.components.MediaViewer"
+                :url="$props.message.embed.payload"
                 :show-pin="true"
-                @close="props.message.embed.payload = ''"
-                @pin="props.ml.openEmbedInPreview(props.message)"
+                @close="$props.message.embed.payload = ''"
+                @pin="$props.ml.openEmbedInPreview($props.message)"
             />
         </div>
     </div>
@@ -152,14 +158,10 @@ const methods = {
 };
 
 export default {
-    inject: {
-        components: {
-            default: {
-                AwayStatusIndicator,
-                MessageInfo,
-                MediaViewer,
-            },
-        },
+    components: {
+        AwayStatusIndicator,
+        MessageInfo,
+        MediaViewer,
     },
     props: {
         ml: Object,
diff --git a/src/components/MessageListMessageInline.vue b/src/components/MessageListMessageInline.vue
index 58573f432e..4f6fdade8b 100644
--- a/src/components/MessageListMessageInline.vue
+++ b/src/components/MessageListMessageInline.vue
@@ -1,104 +1,106 @@
-<template functional>
+<template>
     <div
         :class="[
-            'kiwi-messagelist-message-' + props.message.type,
-            props.message.type_extra ?
-                'kiwi-messagelist-message-' + props.message.type + '-' + props.message.type_extra :
+            'kiwi-messagelist-message-' + $props.message.type,
+            $props.message.type_extra ?
+                'kiwi-messagelist-message-' +
+                $props.message.type + '-' +
+                $props.message.type_extra :
                 '',
-            props.ml.isMessageHighlight(props.message) ?
+            $props.ml.isMessageHighlight($props.message) ?
                 'kiwi-messagelist-message--highlight' :
                 '',
-            props.ml.isHoveringOverMessage(props.message) ?
+            $props.ml.isHoveringOverMessage($props.message) ?
                 'kiwi-messagelist-message--hover' :
                 '',
-            props.ml.buffer.last_read && props.message.time > props.ml.buffer.last_read ?
+            $props.ml.buffer.last_read && $props.message.time > $props.ml.buffer.last_read ?
                 'kiwi-messagelist-message--unread' :
                 '',
-            props.message.nick.toLowerCase() === props.ml.ourNick.toLowerCase() ?
+            $props.message.nick.toLowerCase() === $props.ml.ourNick.toLowerCase() ?
                 'kiwi-messagelist-message--own' :
                 '',
-            props.ml.message_info_open === props.message ?
+            $props.ml.message_info_open === $props.message ?
                 'kiwi-messagelist-message--info-open' :
                 '',
-            props.ml.message_info_open && props.ml.message_info_open !== props.message ?
+            $props.ml.message_info_open && $props.ml.message_info_open !== $props.message ?
                 'kiwi-messagelist-message--blur' :
                 '',
-            (props.message.user && props.m().userMode(props.message.user)) ?
-                'kiwi-messagelist-message--user-mode-'+props.m().userMode(props.message.user) :
+            ($props.message.user && $props.m().userMode($props.message.user)) ?
+                'kiwi-messagelist-message--user-mode-'+$props.m().userMode($props.message.user) :
                 '',
-            data.staticClass,
+            $data.staticClass ? $data.staticClass : '',
         ]"
-        :data-message-id="props.message.id"
-        :data-nick="(props.message.nick||'').toLowerCase()"
+        :data-message-id="$props.message.id"
+        :data-nick="($props.message.nick||'').toLowerCase()"
         class="kiwi-messagelist-message kiwi-messagelist-message--text"
-        @click="props.ml.onMessageClick($event, props.message, true)"
-        @dblclick="props.ml.onMessageDblClick($event, props.message)"
+        @click="$props.ml.onMessageClick($event, $props.message, true)"
+        @dblclick="$props.ml.onMessageDblClick($event, $props.message)"
     >
         <div>
             <span
-                v-if="props.ml.bufferSetting('show_timestamps')"
+                v-if="$props.ml.bufferSetting('show_timestamps')"
                 class="kiwi-messagelist-time"
             >
-                {{ props.ml.formatTime(props.message.time) }}
+                {{ $props.ml.formatTime($props.message.time) }}
             </span>
             <span
-                :style="{ 'color': props.ml.userColour(props.message.user) }"
+                :style="{ 'color': $props.ml.userColour($props.message.user) }"
                 :class="[
                     'kiwi-messagelist-nick',
-                    (props.message.user && props.m().userMode(props.message.user)) ?
-                        'kiwi-messagelist-nick--mode-'+props.m().userMode(props.message.user) :
+                    ($props.message.user && $props.m().userMode($props.message.user)) ?
+                        'kiwi-messagelist-nick--mode-'+$props.m().userMode($props.message.user) :
                         ''
                 ]"
-                :data-nick="(props.message.nick||'').toLowerCase()"
-                @mouseover="props.ml.hover_nick=props.message.nick.toLowerCase();"
-                @mouseout="props.ml.hover_nick='';"
+                :data-nick="($props.message.nick||'').toLowerCase()"
+                @mouseover="$props.ml.hover_nick=$props.message.nick.toLowerCase();"
+                @mouseout="$props.ml.hover_nick='';"
             >
                 <span class="kiwi-messagelist-nick--prefix">
-                    {{ props.message.user ? props.m().userModePrefix(props.message.user) : '' }}
+                    {{ $props.message.user ? $props.m().userModePrefix($props.message.user) : '' }}
                 </span>
-                <a :data-nick="(props.message.nick||'').toLowerCase()">
-                    {{ props.m().displayNick() }}
+                <a :data-nick="($props.message.nick||'').toLowerCase()">
+                    {{ $props.m().displayNick() }}
                 </a>
             </span>
             <div
-                v-if="props.message.bodyTemplate &&
-                    props.message.bodyTemplate.$el &&
-                    props.ml.isTemplateVue(props.message.bodyTemplate)"
-                v-rawElement="props.message.bodyTemplate.$el"
+                v-if="$props.message.bodyTemplate &&
+                    $props.message.bodyTemplate.$el &&
+                    $props.ml.isTemplateVue($props.message.bodyTemplate)"
+                v-rawElement="$props.message.bodyTemplate.$el"
                 class="kiwi-messagelist-body"
             />
             <component
-                :is="props.message.bodyTemplate"
-                v-else-if="props.message.bodyTemplate"
-                v-bind="props.message.bodyTemplateProps"
-                :buffer="props.ml.buffer"
-                :message="props.message"
-                :idx="props.idx"
-                :ml="props.ml"
+                :is="$props.message.bodyTemplate"
+                v-else-if="$props.message.bodyTemplate"
+                v-bind="$props.message.bodyTemplate$props"
+                :buffer="$props.ml.buffer"
+                :message="$props.message"
+                :idx="$props.idx"
+                :ml="$props.ml"
                 class="kiwi-messagelist-body"
             />
             <div
                 v-else
                 class="kiwi-messagelist-body"
-                v-html="props.ml.formatMessage(props.message)"
+                v-html="$props.ml.formatMessage($props.message)"
             />
         </div>
 
         <component
-            :is="injections.components.MessageInfo"
-            v-if="props.ml.message_info_open===props.message"
-            :message="props.message"
-            :buffer="props.ml.buffer"
-            @close="props.ml.toggleMessageInfo()"
+            :is="$options.components.MessageInfo"
+            v-if="$props.ml.message_info_open===$props.message"
+            :message="$props.message"
+            :buffer="$props.ml.buffer"
+            @close="$props.ml.toggleMessageInfo()"
         />
 
-        <div v-if="props.message.embed.payload && props.ml.shouldAutoEmbed">
+        <div v-if="$props.message.embed.payload && $props.ml.shouldAutoEmbed">
             <component
-                :is="injections.components.MediaViewer"
-                :url="props.message.embed.payload"
+                :is="$options.components.MediaViewer"
+                :url="$props.message.embed.payload"
                 :show-pin="true"
-                @close="props.message.embed.payload = ''"
-                @pin="props.ml.openEmbedInPreview(props.message)"
+                @close="$props.message.embed.payload = ''"
+                @pin="$props.ml.openEmbedInPreview($props.message)"
             />
         </div>
     </div>
@@ -130,13 +132,9 @@ const methods = {
 };
 
 export default {
-    inject: {
-        components: {
-            default: {
-                MessageInfo,
-                MediaViewer,
-            },
-        },
+    components: {
+        MessageInfo,
+        MediaViewer,
     },
     props: {
         ml: Object,
diff --git a/src/components/MessageListMessageModern.vue b/src/components/MessageListMessageModern.vue
index 19fe72631c..980dbefe66 100644
--- a/src/components/MessageListMessageModern.vue
+++ b/src/components/MessageListMessageModern.vue
@@ -1,54 +1,56 @@
-<template functional>
+<template>
     <div
         :class="[
-            props.m().isRepeat() ?
+            $props.m().isRepeat() ?
                 'kiwi-messagelist-message--authorrepeat' :
                 'kiwi-messagelist-message--authorfirst',
-            'kiwi-messagelist-message-' + props.message.type,
-            props.message.type_extra ?
-                'kiwi-messagelist-message-' + props.message.type + '-' + props.message.type_extra :
+            'kiwi-messagelist-message-' + $props.message.type,
+            $props.message.type_extra ?
+                'kiwi-messagelist-message-' +
+                $props.message.type + '-' +
+                $props.message.type_extra :
                 '',
-            props.ml.isMessageHighlight(props.message) ?
+            $props.ml.isMessageHighlight($props.message) ?
                 'kiwi-messagelist-message--highlight' :
                 '',
-            props.ml.isHoveringOverMessage(props.message) ?
+            $props.ml.isHoveringOverMessage($props.message) ?
                 'kiwi-messagelist-message--hover' :
                 '',
-            props.ml.buffer.last_read && props.message.time > props.ml.buffer.last_read ?
+            $props.ml.buffer.last_read && $props.message.time > $props.ml.buffer.last_read ?
                 'kiwi-messagelist-message--unread' :
                 '',
-            props.message.nick.toLowerCase() === props.ml.ourNick.toLowerCase() ?
+            $props.message.nick.toLowerCase() === $props.ml.ourNick.toLowerCase() ?
                 'kiwi-messagelist-message--own' :
                 '',
-            props.ml.message_info_open === props.message ?
+            $props.ml.message_info_open === $props.message ?
                 'kiwi-messagelist-message--info-open' :
                 '',
-            props.ml.message_info_open && props.ml.message_info_open !== props.message ?
+            $props.ml.message_info_open && $props.ml.message_info_open !== $props.message ?
                 'kiwi-messagelist-message--blur' :
                 '',
-            (props.message.user && props.m().userMode(props.message.user)) ?
-                'kiwi-messagelist-message--user-mode-' + props.m().userMode(props.message.user) :
+            ($props.message.user && $props.m().userMode($props.message.user)) ?
+                'kiwi-messagelist-message--user-mode-' + $props.m().userMode($props.message.user) :
                 '',
-            data.staticClass,
+            $data.staticClass ? $data.staticClass : '',
         ]"
-        :data-message-id="props.message.id"
-        :data-nick="(props.message.nick||'').toLowerCase()"
+        :data-message-id="$props.message.id"
+        :data-nick="($props.message.nick||'').toLowerCase()"
         class="kiwi-messagelist-message kiwi-messagelist-message--modern"
-        @click="props.ml.onMessageClick($event, props.message, true)"
-        @dblclick="props.ml.onMessageDblClick($event, props.message)"
+        @click="$props.ml.onMessageClick($event, $props.message, true)"
+        @dblclick="$props.ml.onMessageDblClick($event, $props.message)"
     >
         <div class="kiwi-messagelist-modern-left">
-            <template v-if="props.m().displayAvatar(props.message)">
+            <template v-if="$props.m().displayAvatar($props.message)">
                 <component
-                    :is="injections.components.MessageAvatar"
-                    :message="props.message"
-                    :data-nick="props.message.nick"
-                    :user="props.message.user"
+                    :is="$options.components.MessageAvatar"
+                    :message="$props.message"
+                    :data-nick="$props.message.nick"
+                    :user="$props.message.user"
                 />
                 <component
-                    :is="injections.components.AwayStatusIndicator"
-                    :network="props.m().getNetwork()"
-                    :user="props.message.user"
+                    :is="$options.components.AwayStatusIndicator"
+                    :network="$props.m().getNetwork()"
+                    :user="$props.message.user"
                     :toggle="false"
                     class="kiwi-messagelist-awaystatus"
                 />
@@ -57,80 +59,81 @@
         <div class="kiwi-messagelist-modern-right">
             <div class="kiwi-messagelist-top">
                 <a
-                    v-if="props.message.nick"
-                    :style="{ 'color': props.ml.userColour(props.message.user) }"
+                    v-if="$props.message.nick"
+                    :style="{ 'color': $props.ml.userColour($props.message.user) }"
                     :class="[
                         'kiwi-messagelist-nick',
-                        props.message.user && props.m().userMode(props.message.user) ?
-                            'kiwi-messagelist-nick--mode-'+props.m().userMode(props.message.user) :
+                        $props.message.user && $props.m().userMode($props.message.user) ?
+                            'kiwi-messagelist-nick--mode-' +
+                            $props.m().userMode($props.message.user) :
                             ''
                     ]"
-                    :data-nick="(props.message.nick).toLowerCase()"
-                    @mouseover="props.ml.hover_nick=props.message.nick.toLowerCase();"
-                    @mouseout="props.ml.hover_nick='';"
+                    :data-nick="($props.message.nick).toLowerCase()"
+                    @mouseover="$props.ml.hover_nick=$props.message.nick.toLowerCase();"
+                    @mouseout="$props.ml.hover_nick='';"
                 >
                     <span class="kiwi-messagelist-nick-prefix">{{
-                        props.message.user ?
-                            props.m().userModePrefix(props.message.user) :
+                        $props.message.user ?
+                            $props.m().userModePrefix($props.message.user) :
                             ''
-                    }}</span>{{ props.message.nick }}
+                    }}</span>{{ $props.message.nick }}
                 </a>
                 <div
-                    v-if="props.m().showRealName()"
+                    v-if="$props.m().showRealName()"
                     class="kiwi-messagelist-realname"
-                    @click="props.ml.openUserBox(props.message.nick)"
-                    @mouseover="props.ml.hover_nick=props.message.nick.toLowerCase();"
-                    @mouseout="props.ml.hover_nick='';"
+                    @click="$props.ml.openUserBox($props.message.nick)"
+                    @mouseover="$props.ml.hover_nick=$props.message.nick.toLowerCase();"
+                    @mouseout="$props.ml.hover_nick='';"
                 >
-                    {{ props.message.user.realname }}
+                    {{ $props.message.user.realname }}
                 </div>
                 <div
-                    v-if="props.m().isMessage(props.message) &&
-                        props.ml.bufferSetting('show_timestamps')"
-                    :title="props.ml.formatTimeFull(props.message.time)"
+                    v-if="$props.m().isMessage($props.message) &&
+                        $props.ml.bufferSetting('show_timestamps')"
+                    :title="$props.ml.formatTimeFull($props.message.time)"
                     class="kiwi-messagelist-time"
                 >
-                    {{ props.ml.formatTime(props.message.time) }}
+                    {{ $props.ml.formatTime($props.message.time) }}
                 </div>
             </div>
             <div
-                v-if="props.message.bodyTemplate &&
-                    props.message.bodyTemplate.$el &&
-                    props.ml.isTemplateVue(props.message.bodyTemplate)"
-                v-rawElement="props.message.bodyTemplate.$el"
+                v-if="$props.message.bodyTemplate &&
+                    $props.message.bodyTemplate.$el &&
+                    $props.ml.isTemplateVue($props.message.bodyTemplate)"
+                v-rawElement="$props.message.bodyTemplate.$el"
                 class="kiwi-messagelist-body"
             />
             <component
-                :is="props.message.bodyTemplate"
-                v-else-if="props.message.bodyTemplate"
-                v-bind="props.message.bodyTemplateProps"
-                :buffer="props.ml.buffer"
-                :message="props.message"
-                :idx="props.idx"
-                :ml="props.ml"
+                :is="$props.message.bodyTemplate"
+                v-else-if="$props.message.bodyTemplate"
+                v-bind="$props.message.bodyTemplate$props"
+                :buffer="$props.ml.buffer"
+                :message="$props.message"
+                :idx="$props.idx"
+                :ml="$props.ml"
                 class="kiwi-messagelist-body"
             />
             <div
                 v-else
                 class="kiwi-messagelist-body"
-                v-html="props.ml.formatMessage(props.message)"
+                v-html="$props.ml.formatMessage($props.message)"
             />
 
             <component
-                :is="injections.components.MessageInfo"
-                v-if="props.ml.message_info_open===props.message"
-                :message="props.message"
-                :buffer="props.ml.buffer"
-                @close="props.ml.toggleMessageInfo()"
+                :is="$options.components.MessageInfo"
+                v-if="$props.ml.message_info_open===$props.message"
+                :message="$props.message"
+                :buffer="$props.ml.buffer"
+                @close="$props.ml.toggleMessageInfo()"
             />
 
-            <div v-if="props.message.embed.payload && props.ml.shouldAutoEmbed">
+            <div v-if="$props.message.embed.payload && $props.ml.shouldAutoEmbed">
                 <component
-                    :is="injections.components.MediaViewer"
-                    :url="props.message.embed.payload"
+                    :is="$options.components.MediaViewer"
+                    :url="$props.message.embed.payload"
                     :show-pin="true"
-                    @close="props.message.embed.payload = ''"
-                    @pin="props.ml.openEmbedInPreview(props.message)"
+                    @close="$props.message.embed.payload = ''"
+                    @pin="$props.ml.openEmbedInPreview($props.message)"
                 />
             </div>
         </div>
@@ -245,15 +248,11 @@ const methods = {
 };
 
 export default {
-    inject: {
-        components: {
-            default: {
-                MessageAvatar: MessageListAvatar,
-                MessageInfo,
-                AwayStatusIndicator,
-                MediaViewer,
-            },
-        },
+    components: {
+        MessageAvatar: MessageListAvatar,
+        MessageInfo,
+        AwayStatusIndicator,
+        MediaViewer,
     },
     props: {
         ml: Object,
diff --git a/src/components/NicklistUser.vue b/src/components/NicklistUser.vue
index 4f27edd5d3..e26eca7c34 100644
--- a/src/components/NicklistUser.vue
+++ b/src/components/NicklistUser.vue
@@ -1,53 +1,56 @@
-<template functional>
+<template>
     <div
         :class="[
-            props.nicklist.userMode(props.user) ?
-                'kiwi-nicklist-user--mode-' + props.nicklist.userMode(props.user) :
+            $props.nicklist.userMode($props.user) ?
+                'kiwi-nicklist-user--mode-' + $props.nicklist.userMode($props.user) :
                 '',
-            props.user.away ? 'kiwi-nicklist-user--away' : '',
-            props.user.ignore ? 'kiwi-nicklist-user--ignore' : '',
-            data.staticClass,
+            $props.user.away ? 'kiwi-nicklist-user--away' : '',
+            $props.user.ignore ? 'kiwi-nicklist-user--ignore' : '',
+            $data.staticClass ? $data.staticClass : '',
         ]"
-        :data-nick="(props.user.nick||'').toLowerCase()"
+        :data-nick="($props.user.nick||'').toLowerCase()"
         class="kiwi-nicklist-user"
-        @click="props.nicklist.openUserbox(props.user)"
+        @click="$props.nicklist.openUserbox($props.user)"
     >
-        <div v-if="props.m().shouldShowAvatars()" class="kiwi-avatar-container">
+        <div v-if="$props.m().shouldShowAvatars()" class="kiwi-avatar-container">
             <component
-                :is="injections.components.Avatar"
-                v-if="props.user"
-                :user="props.user"
+                :is="$options.components.Avatar"
+                v-if="$props.user"
+                :user="$props.user"
                 size="small"
             />
             <component
-                :is="injections.components.AwayStatusIndicator"
-                :network="props.network"
-                :user="props.user"
+                :is="$options.components.AwayStatusIndicator"
+                :network="$props.network"
+                :user="$props.user"
                 :toggle="false"
             />
         </div>
         <div v-else>
             <component
-                :is="injections.components.AwayStatusIndicator"
-                :network="props.network"
-                :user="props.user"
+                :is="$options.components.AwayStatusIndicator"
+                :network="$props.network"
+                :user="$props.user"
                 :toggle="false"
             />
         </div>
         <span class="kiwi-nicklist-user-prefix">
-            {{ props.nicklist.userModePrefix(props.user) }}
+            {{ $props.nicklist.userModePrefix($props.user) }}
         </span><span
-            :style="{ 'color': props.m().userColour() }"
+            :style="{ 'color': $props.m().userColour() }"
             class="kiwi-nicklist-user-nick"
-        >{{ props.user.nick }}
+        >{{ $props.user.nick }}
         </span>
-        <span class="kiwi-nicklist-messageuser" @click.stop="props.nicklist.openQuery(props.user)">
+        <span
+            class="kiwi-nicklist-messageuser"
+            @click.stop="$props.nicklist.openQuery($props.user)"
+        >
             <i class="fa fa-comment" aria-hidden="true" />
         </span>
         <component
-            :is="injections.components.TypingStatusIndicator"
-            :user="props.user"
-            :buffer="props.nicklist.buffer"
+            :is="$options.components.TypingStatusIndicator"
+            :user="$props.user"
+            :buffer="$props.nicklist.buffer"
         />
     </div>
 </template>
@@ -75,14 +78,10 @@ const methods = {
 };
 
 export default {
-    inject: {
-        components: {
-            default: {
-                AwayStatusIndicator,
-                TypingStatusIndicator,
-                Avatar,
-            },
-        },
+    components: {
+        AwayStatusIndicator,
+        TypingStatusIndicator,
+        Avatar,
     },
     props: {
         network: Object,
diff --git a/src/components/SelfUser.vue b/src/components/SelfUser.vue
index f6da6f2187..8d2321e54a 100644
--- a/src/components/SelfUser.vue
+++ b/src/components/SelfUser.vue
@@ -52,6 +52,7 @@ export default {
     props: {
         network: Object,
     },
+    emits: ['close'],
     data() {
         return {
             new_nick: '',
diff --git a/src/components/ServerSelector.vue b/src/components/ServerSelector.vue
index fa15a03cce..c6bfe03c20 100644
--- a/src/components/ServerSelector.vue
+++ b/src/components/ServerSelector.vue
@@ -139,7 +139,7 @@ export default {
         importUris(serverList) {
             // [ 'freenode|irc.freenode.net:+6697', 'irc.snoonet.org:6667' ]
             let servers = serverList.map((s) => Misc.parsePresetServer(s));
-            this.$set(this, 'presetNetworks', servers);
+            this.presetNetworks = servers;
         },
     },
 };
diff --git a/src/components/SettingsAdvanced.vue b/src/components/SettingsAdvanced.vue
index 64325d2e61..697be6dace 100644
--- a/src/components/SettingsAdvanced.vue
+++ b/src/components/SettingsAdvanced.vue
@@ -46,7 +46,7 @@
                             :value="setting.val"
                             class="u-input"
                             type="number"
-                            @keydown.13="$event.target.blur()"
+                            @keydown.enter="$event.target.blur()"
                             @change="updateSetting($event, setting.key)"
                             @blur="updateSetting($event, setting.key)"
                         >
@@ -55,7 +55,7 @@
                             :id="'setting-' + setting.key"
                             :value="setting.val"
                             class="u-input"
-                            @keydown.13="$event.target.blur()"
+                            @keydown.enter="$event.target.blur()"
                             @blur="updateSetting($event, setting.key)"
                         >
                     </td>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 764241158a..eaff77c4f7 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -79,13 +79,10 @@
 'kiwi public';
 
 import UserBox from '@/components/UserBox';
-import SidebarState from './SidebarState';
 import SidebarAboutBuffer from './SidebarAboutBuffer';
 import SidebarSectionSettings from './SidebarSectionSettings';
 import Nicklist from './Nicklist';
 
-export { SidebarState as State };
-
 export default {
     components: {
         SidebarAboutBuffer,
diff --git a/src/components/SidebarAboutBuffer.vue b/src/components/SidebarAboutBuffer.vue
index cee79a004f..634239d204 100644
--- a/src/components/SidebarAboutBuffer.vue
+++ b/src/components/SidebarAboutBuffer.vue
@@ -147,7 +147,8 @@ export default {
             // Tap into buffer.message_count to force vuejs to update this function when
             // it changes
             /* eslint-disable no-unused-vars */
-            let tmp = this.buffer.message_count;
+            let unusedVar = this.buffer.message_count;
+
             return this.buffer.getMessages()
                 .filter((m) => m.isHighlight)
                 .filter((m) => m.type !== 'traffic')
@@ -168,7 +169,7 @@ export default {
     },
     methods: {
         toggleSection(section) {
-            this.$set(this.closedSections, section, !this.closedSections[section]);
+            this.closedSections[section] = !this.closedSections[section];
         },
         inviteUser() {
             if (!this.inviteNick) {
diff --git a/src/components/SidebarState.vue b/src/components/SidebarState.vue
deleted file mode 100644
index 47da2adce5..0000000000
--- a/src/components/SidebarState.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<script>
-'kiwi public';
-
-import Vue from 'vue';
-
-export default Vue.extend({
-    data() {
-        return {
-            sidebarOpen: false,
-            // sidebarSection may contain: '', 'user', 'settings', 'nicklist', 'about', 'component'
-            sidebarSection: '',
-            sidebarUser: null,
-            activeComponent: null,
-            activeComponentProps: null,
-        };
-    },
-    computed: {
-        isDrawn() {
-            return this.sidebarOpen && this.section() && this.$state.ui.app_width <= 769;
-        },
-        isOpen() {
-            return this.sidebarOpen && this.section() && this.$state.ui.app_width > 769;
-        },
-    },
-    created() {
-        this.listen(this.$state, 'sidebar.component', (component, props) => {
-            this.resetSidebarState();
-            this.sidebarOpen = !!component;
-            this.activeComponent = component;
-            this.activeComponentProps = props || {};
-            this.sidebarSection = component ? 'component' : '';
-        });
-
-        // Allow forcing the sidebar open at startup
-        this.$nextTick(() => {
-            // nextTick is needed because app_width is 0 on created()
-            let sidebarDefault = this.$state.setting('sidebarDefault');
-            if (sidebarDefault && this.$state.ui.app_width > 769) {
-                this.sidebarOpen = true;
-                this.sidebarSection = sidebarDefault;
-            }
-        });
-    },
-    methods: {
-        section() {
-            if (!this.sidebarOpen) {
-                return '';
-            }
-
-            let section = this.sidebarSection;
-            if (section === 'component') {
-                return section;
-            }
-
-            let buffer = this.$state.getActiveBuffer();
-            if (buffer.isQuery()) {
-                // This is a query with only one possible sidebar dont change the current state
-                // instead attempt to show the user, this allows channels to show their nicklist
-                let user = this.$state.getUser(buffer.getNetwork().id, buffer.name);
-                if (user) {
-                    this.sidebarUser = user;
-                    return 'user';
-                }
-                return '';
-            }
-
-            // The following code is for channels only
-            if (!buffer.isChannel()) {
-                return '';
-            }
-
-            if (section === 'user' && this.sidebarUser) {
-                if (buffer.hasNick(this.sidebarUser.nick)) {
-                    return 'user';
-                }
-                // This was going to show a user that is not even present in the current channel
-                // permantly switch back to nicklist so it does not jump back to user
-                // when they switch to a channel with that user
-                this.sidebarSection = 'nicklist';
-                return this.sidebarSection;
-            } else if (section === 'nicklist') {
-                return 'nicklist';
-            } else if (section === 'settings') {
-                return 'settings';
-            } else if (section === 'about') {
-                return 'about';
-            }
-
-            return '';
-        },
-        resetSidebarState() {
-            this.sidebarOpen = false;
-            this.sidebarSection = '';
-            this.sidebarUser = null;
-            this.activeComponent = null;
-            this.activeComponentProps = null;
-        },
-        close() {
-            this.resetSidebarState();
-        },
-        showUser(user) {
-            this.resetSidebarState();
-            this.sidebarOpen = true;
-            this.sidebarUser = user;
-            this.sidebarSection = 'user';
-        },
-        showNicklist() {
-            this.resetSidebarState();
-            this.sidebarOpen = true;
-            this.sidebarSection = 'nicklist';
-        },
-        showBufferSettings() {
-            this.resetSidebarState();
-            this.sidebarOpen = true;
-            this.sidebarSection = 'settings';
-        },
-        showAbout() {
-            this.resetSidebarState();
-            this.sidebarOpen = true;
-            this.sidebarSection = 'about';
-        },
-        toggleUser(user) {
-            this.section() === 'user' ?
-                this.close() :
-                this.showUser(user);
-        },
-        toggleNicklist() {
-            this.section() === 'nicklist' ?
-                this.close() :
-                this.showNicklist();
-        },
-        toggleBufferSettings() {
-            this.section() === 'settings' ?
-                this.close() :
-                this.showBufferSettings();
-        },
-        toggleAbout() {
-            this.section() === 'about' ?
-                this.close() :
-                this.showAbout();
-        },
-    },
-});
-
-</script>
diff --git a/src/components/StateBrowserBuffer.vue b/src/components/StateBrowserBuffer.vue
index a98677c0ec..9469d9ce31 100644
--- a/src/components/StateBrowserBuffer.vue
+++ b/src/components/StateBrowserBuffer.vue
@@ -68,6 +68,7 @@ export default {
         AwayStatusIndicator,
     },
     props: ['buffer', 'activePrompt'],
+    emits: ['selected'],
     computed: {
         network() {
             return this.buffer.getNetwork();
diff --git a/src/components/TypingStatusIndicator.vue b/src/components/TypingStatusIndicator.vue
index 8f2f66cbb2..e8eceb7779 100644
--- a/src/components/TypingStatusIndicator.vue
+++ b/src/components/TypingStatusIndicator.vue
@@ -1,9 +1,9 @@
-<template functional>
+<template>
     <span
-        v-if="props.user && $options.m.status(props) !== ''"
+        v-if="$props.user && $options.m.status($props) !== ''"
         :class="{
-            'kiwi-typingstatusindicator--paused': $options.m.status(props) === 'paused',
-            [data.staticClass]: true,
+            'kiwi-typingstatusindicator--paused': $options.m.status($props) === 'paused',
+            [$data.staticClass]: !!$data.staticClass,
         }"
         class="kiwi-typingstatusindicator kiwi-typing"
     />
diff --git a/src/components/UrlEmbed.vue b/src/components/UrlEmbed.vue
index 9d999af01d..c20bc8f4a5 100644
--- a/src/components/UrlEmbed.vue
+++ b/src/components/UrlEmbed.vue
@@ -23,6 +23,7 @@ let embedlyTagIncluded = false;
 
 export default {
     props: ['url', 'showPin', 'iframeSandboxOptions'],
+    emits: ['close', 'setHeight', 'setMaxHeight'],
     data() {
         return {
             embedlyObject: null,
@@ -51,7 +52,7 @@ export default {
     created() {
         this.updateEmbed();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.cleanEmbed();
     },
     methods: {
diff --git a/src/components/startups/CustomServer.vue b/src/components/startups/CustomServer.vue
index 6470d57212..e3698b31f9 100644
--- a/src/components/startups/CustomServer.vue
+++ b/src/components/startups/CustomServer.vue
@@ -137,6 +137,7 @@ import _ from 'lodash';
 import * as Misc from '@/helpers/Misc';
 
 export default {
+    emits: ['start'],
     data: function data() {
         return {
             title: 'Where are you connecting today?',
diff --git a/src/components/startups/KiwiBnc.vue b/src/components/startups/KiwiBnc.vue
index 76e4494017..2bae14ef5e 100644
--- a/src/components/startups/KiwiBnc.vue
+++ b/src/components/startups/KiwiBnc.vue
@@ -32,6 +32,8 @@
 'kiwi public';
 
 import _ from 'lodash';
+import { watch } from 'vue';
+
 import Logger from '@/libs/Logger';
 import StartupLayout from './CommonLayout';
 
@@ -80,7 +82,7 @@ export default {
                 bncnet.ircClient.off('close', onClose);
             };
 
-            let onRegistered = async() => {
+            let onRegistered = async () => {
                 cleanUpEvents();
 
                 let bncNetworks = await bncnet.ircClient.bnc.getNetworks();
@@ -258,7 +260,7 @@ export default {
 
             let debouncedSaveState = _.debounce(saveState, 2000);
 
-            this.$state.$watch('networks', debouncedSaveState, { deep: true });
+            watch(this.$state.networks, debouncedSaveState, { deep: true });
 
             // Just before we connect to a network, make sure the BNC is sabed and connected to
             // it or at least trying to connect.
diff --git a/src/components/startups/Personal.vue b/src/components/startups/Personal.vue
index 2c1703e754..b80061b947 100644
--- a/src/components/startups/Personal.vue
+++ b/src/components/startups/Personal.vue
@@ -68,6 +68,7 @@ import IPC from '@/libs/IPC';
 let firstRun = true;
 
 export default {
+    emits: ['start'],
     data: function data() {
         return {
             hasOtherTab: false,
diff --git a/src/components/utils/InputConfirm.vue b/src/components/utils/InputConfirm.vue
index 7c102f07bf..8761063e88 100644
--- a/src/components/utils/InputConfirm.vue
+++ b/src/components/utils/InputConfirm.vue
@@ -17,10 +17,9 @@
 <script>
 'kiwi public';
 
-let Vue = require('vue');
-
-export default Vue.component('input-confirm', {
+export default {
     props: ['label', 'flipConnotation'],
+    emits: ['submit'],
     data: function data() {
         return {
             state: 'pre',
@@ -49,7 +48,7 @@ export default Vue.component('input-confirm', {
             this.state = 'pre';
         },
     },
-});
+};
 </script>
 
 <style>
diff --git a/src/components/utils/InputPrompt.vue b/src/components/utils/InputPrompt.vue
index 6ddcb490f8..ac21af743b 100644
--- a/src/components/utils/InputPrompt.vue
+++ b/src/components/utils/InputPrompt.vue
@@ -25,10 +25,9 @@
 <script>
 'kiwi public';
 
-let Vue = require('vue');
-
-export default Vue.component('input-prompt', {
+export default {
     props: ['label', 'hideCancel', 'block'],
+    emits: ['cancel', 'submit'],
     data() {
         return {
             value: '',
@@ -78,7 +77,7 @@ export default Vue.component('input-prompt', {
             this.$emit('cancel');
         },
     },
-});
+};
 </script>
 
 <style>
diff --git a/src/components/utils/InputText.vue b/src/components/utils/InputText.vue
index 9129813d31..0049f05f83 100644
--- a/src/components/utils/InputText.vue
+++ b/src/components/utils/InputText.vue
@@ -12,7 +12,7 @@
                     autocomplete="off"
                     autocorrect="off"
                     autocapitalize="off"
-                    spellcheck="false"
+                    :spellcheck="false"
                     class="u-input"
                     @keypress="$emit('keypress', $event)"
                 >
@@ -48,7 +48,7 @@
                 autocomplete="off"
                 autocorrect="off"
                 autocapitalize="off"
-                spellcheck="false"
+                :spellcheck="false"
                 class="u-input"
                 @keypress="$emit('keypress', $event)"
             >
@@ -63,11 +63,10 @@
 <script>
 'kiwi public';
 
-let Vue = require('vue');
-
-export default Vue.component('input-text', {
-    props: ['value', 'label', 'type', 'showPlainText'],
-    data: function data() {
+export default {
+    props: ['modelValue', 'label', 'type', 'showPlainText'],
+    emits: ['keypress', 'update:modelValue'],
+    data() {
         return {
             plainTextEnabled: false,
             inputIdCache: '',
@@ -84,22 +83,22 @@ export default Vue.component('input-text', {
         },
         currentValue: {
             get: function getCurrentValue() {
-                return this.value;
+                return this.modelValue;
             },
             set: function setCurrentValue(newVal) {
-                this.$emit('input', newVal);
+                this.$emit('update:modelValue', newVal);
             },
         },
     },
     methods: {
-        updateValue: function updateValue(newValue) {
-            this.$emit('input', newValue);
+        updateValue: function updateValue(newVal) {
+            this.$emit('update:modelValue', newVal);
         },
         isEdgeBrowser() {
             return navigator.appVersion.indexOf('Edge') > -1;
         },
     },
-});
+};
 </script>
 
 <style>
diff --git a/src/components/utils/IrcInput.vue b/src/components/utils/IrcInput.vue
index f034a22dc0..629271a702 100644
--- a/src/components/utils/IrcInput.vue
+++ b/src/components/utils/IrcInput.vue
@@ -4,9 +4,9 @@
             ref="editor"
             :placeholder="placeholder"
             class="kiwi-ircinput-editor"
-            contenteditable="true"
+            :contenteditable="true"
             role="textbox"
-            spellcheck="true"
+            :spellcheck="true"
             @keypress="updateValueProps(); $emit('keypress', $event)"
             @keydown="updateValueProps(); $emit('keydown', $event)"
             @keyup="updateValueProps(); $emit('keyup', $event)"
@@ -30,10 +30,9 @@ import * as Colours from '@/helpers/Colours';
 import * as Misc from '@/helpers/Misc';
 import * as EmojiProvider from '@/libs/EmojiProvider';
 
-let Vue = require('vue');
-
-export default Vue.component('irc-input', {
+export default {
     props: ['placeholder'],
+    emits: ['blur', 'click', 'focus', 'input', 'keydown', 'keypress', 'keyup', 'textInput'],
     data() {
         return {
             last_known_value: '',
@@ -545,7 +544,7 @@ export default Vue.component('irc-input', {
             selection.addRange(range);
         },
     },
-});
+};
 </script>
 
 <style>
diff --git a/src/components/utils/PluginWrapper.vue b/src/components/utils/PluginWrapper.vue
index 5933d36bad..d935bcaa18 100644
--- a/src/components/utils/PluginWrapper.vue
+++ b/src/components/utils/PluginWrapper.vue
@@ -1,14 +1,14 @@
-<template functional>
+<template>
     <div
         v-rawElement="{
-            el: props.pluginElement,
+            el: $props.pluginElement,
             props: {
                 kiwi: {
-                    ...props.pluginProps,
+                    ...$props.pluginProps,
                 }
             }
         }"
-        :class="{ [data.staticClass]: data.staticClass }"
+        :class="{ [$data.staticClass]: $data.staticClass }"
     />
 </template>
 
diff --git a/src/components/utils/TabbedTab.vue b/src/components/utils/TabbedTab.vue
new file mode 100644
index 0000000000..26f2463bf8
--- /dev/null
+++ b/src/components/utils/TabbedTab.vue
@@ -0,0 +1,26 @@
+<template>
+    <div v-if="isActive" class="u-tabbed-content"><slot /></div>
+</template>
+
+<script setup>
+import { inject, toRef } from 'vue';
+
+const props = defineProps({
+    name: { type: String, required: true },
+    header: { type: String, default: '' },
+    hidden: { type: Boolean, default: false },
+    startActive: { type: Boolean, default: false },
+});
+
+const registerTab = inject('register-tab');
+
+// The name property should be static and none changing,
+// if the text needs to change then the header should
+// eslint-disable-next-line vue/no-setup-props-destructure
+const { isActive } = registerTab({
+    name: props.name,
+    header: toRef(props, 'header'),
+    hidden: toRef(props, 'hidden'),
+    startActive: toRef(props, 'startActive'),
+});
+</script>
diff --git a/src/components/utils/TabbedView.vue b/src/components/utils/TabbedView.vue
index d602f9adff..3aab07f718 100644
--- a/src/components/utils/TabbedView.vue
+++ b/src/components/utils/TabbedView.vue
@@ -1,94 +1,88 @@
 <template>
     <div class="u-tabbed-view">
-        <div :key="prefixID + a" class="u-tabbed-view-tabs">
+        <div class="u-tabbed-view-tabs">
             <a
-                v-for="c in tabs"
-                :key="c.name || c.header"
-                :class="{
-                    'u-tabbed-view-tab': true,
-                    'u-tabbed-view-tab--active': c.active
-                }"
-                @click="setActive(c)"
-            >{{ c.header }}</a>
+                v-for="tab in filteredTabs"
+                :key="'tab' + tab.name.value"
+                class="u-tabbed-view-tab"
+                :class="{ 'u-tabbed-view-tab--active': tab.isActive.value }"
+                @click="setActive(tab.name, $event)"
+            >{{ tab.header.value }}</a>
         </div>
         <slot />
     </div>
 </template>
 
 <script>
-'kiwi public';
-
-let Vue = require('vue');
-
-Vue.component('tabbed-tab', {
-    props: {
-        header: { status: String },
-        focus: { status: Boolean },
-        name: { status: String },
-    },
-    data: function data() {
-        return { active: false };
-    },
-    template: '<div v-if="active" class="u-tabbed-content"><slot></slot></div>',
-});
+import { computed, onMounted, provide, shallowReactive, shallowRef } from 'vue';
+import Logger from '@/libs/Logger';
+
+import TabbedTab from './TabbedTab.vue';
+
+const log = Logger.namespace('TabbedView');
+
+export default {
+    Tab: TabbedTab,
+};
+</script>
+
+<script setup>
+const emit = defineEmits(['changed']);
+
+const activeTab = shallowRef(null);
+const tabs = shallowReactive(new Map());
+const filteredTabs = computed(() => [...tabs.values()].filter((tab) => !tab.hidden.value));
+
+const setActive = (tabName) => {
+    log.debug('activeTab changed:', tabName);
+    const ucTabName = tabName.toUpperCase();
+    const newTab = tabs.get(ucTabName);
+    if (!newTab) {
+        log.error('could not find tab named:', ucTabName);
+        return;
+    }
+    activeTab.value = newTab;
+    emit('changed', activeTab.value.name);
+};
+provide('set-active', setActive);
+
+const registerTab = (tab) => {
+    const ucTabName = tab.name.toUpperCase();
 
-export default Vue.component('tabbed-view', {
-    data: function data() {
-        return {
-            // We increment this when we need to re-render the tabs.
-            // Vue doesn't pick up on the $children changes all the time so we handle
-            // it ourselves.
-            a: 1,
-            prefixID: Math.floor(Math.random() * 100000).toString(36),
-        };
-    },
-    computed: {
-        tabs: function computedtabs() {
-            return this.$children;
-        },
-    },
-    mounted() {
-        this.setActiveCheck();
-    },
-    methods: {
-        getActive: function getActive() {
-            let foundChild = null;
-            this.$children.forEach((child) => {
-                if (child.active) {
-                    foundChild = child;
-                }
-            });
-
-            return foundChild;
-        },
-        setActive: function setActive(c) {
-            this.$children.forEach((child) => {
-                if (child !== c) {
-                    child.active = false;
-                }
-            });
-            c.active = true;
-
-            // Without this, vue doesnt update itself with the new $children :(
-            this.a++;
-            this.$emit('changed', c.name);
-        },
-        setActiveByName: function setActiveByName(name) {
-            this.$children.forEach((child) => {
-                if (child.name === name) {
-                    this.setActive(child);
-                }
-            });
-        },
-        setActiveCheck: function setActiveCheck() {
-            this.$children.forEach((t) => {
-                if (t.focus) {
-                    this.setActive(t);
-                }
-            });
-        },
-    },
+    tab.isActive = computed(() => activeTab.value === tab);
+    tabs.set(ucTabName, tab);
+
+    if (tab.startActive.value) {
+        setActive(tab.name);
+    }
+
+    return {
+        isActive: tab.isActive,
+    };
+};
+provide('register-tab', registerTab);
+
+const setHidden = (tabName, newValue) => {
+    log('setHidden', tabName);
+    // TODO this needs work
+    const ucTabName = tabName.toUpperCase();
+    const tab = tabs.get(ucTabName);
+    tab.hidden.value = newValue;
+};
+provide('setHidden', setHidden);
+
+onMounted(() => {
+    if (activeTab.value) {
+        return;
+    }
+
+    const firstTab = tabs.values().next().value;
+    if (firstTab) {
+        activeTab.value = firstTab;
+    }
 });
+
+defineExpose({ setActiveByName: setActive });
 </script>
 
 <style>
diff --git a/src/components/utils/TransitionExpand.vue b/src/components/utils/TransitionExpand.vue
index 6687fe042f..4e7a6d89b2 100644
--- a/src/components/utils/TransitionExpand.vue
+++ b/src/components/utils/TransitionExpand.vue
@@ -5,18 +5,16 @@
         @after-enter="afterEnter"
         @leave="leave"
     >
-        <div v-if="$slots.default"><slot /></div>
+        <slot />
     </transition>
 </template>
 
 <script>
 'kiwi public';
 
-const Vue = require('vue');
-
 // Code created from https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/
 
-export default Vue.component('transition-expand', {
+export default {
     name: 'TransitionExpand',
     methods: {
         enter(element) {
@@ -66,7 +64,7 @@ export default Vue.component('transition-expand', {
             });
         },
     },
-});
+};
 </script>
 
 <style>
@@ -76,7 +74,7 @@ export default Vue.component('transition-expand', {
     overflow: hidden;
 }
 
-.u-transition-expand-enter,
+.u-transition-expand-enter-from,
 .u-transition-expand-leave-to {
     opacity: 0;
     height: 0;
diff --git a/src/helpers/Misc.js b/src/helpers/Misc.js
index 807cfce211..77741ff9c1 100644
--- a/src/helpers/Misc.js
+++ b/src/helpers/Misc.js
@@ -3,8 +3,9 @@
 /** @module */
 
 import _ from 'lodash';
-import Vue from 'vue';
 import strftime from 'strftime';
+import { defineComponent, markRaw } from 'vue';
+
 import PluginWrapper from '@/components/utils/PluginWrapper';
 import * as TextFormatting from '@/helpers/TextFormatting';
 import { urlRegex } from './TextFormatting';
@@ -336,7 +337,7 @@ export function parseIntZero(inp) {
  * @param {Component} componentOrElement The vue.js component object or html element
  * @param {Object} args Optional arguments for this plugin { title: '', props: {} }
  */
-export function makePluginObject(pluginId, componentOrElement, args = {}) {
+export function makePluginObject(app, pluginId, componentOrElement, args = {}) {
     const plugin = {
         id: pluginId,
         component: null,
@@ -352,19 +353,13 @@ export function makePluginObject(pluginId, componentOrElement, args = {}) {
     if (componentOrElement instanceof Element) {
         // componentOrElement is an html element, so wrap it in a functional component
 
-        // eslint-disable-next-line no-underscore-dangle
-        if (componentOrElement.__vue__ && !window.kiwi_deprecations_vueEl) {
-            window.kiwi_deprecations_vueEl = true;
-            // eslint-disable-next-line no-console
-            console.warn('deprecated component.$el added to plugin api, please switch to just passing the vue.js component object');
-        }
-        plugin.component = PluginWrapper;
+        plugin.component = markRaw(PluginWrapper);
         plugin.props = Object.assign(plugin.props, {
             pluginElement: componentOrElement,
         });
     } else if (componentOrElement instanceof Object) {
         // componentOrElement is an object, attempt to make a vue component from it
-        plugin.component = Vue.extend(componentOrElement);
+        plugin.component = markRaw(defineComponent(componentOrElement));
     } else {
         plugin.component = componentOrElement;
     }
diff --git a/src/libs/BouncerProvider.js b/src/libs/BouncerProvider.js
index 08ff562f20..4816e2738c 100644
--- a/src/libs/BouncerProvider.js
+++ b/src/libs/BouncerProvider.js
@@ -1,6 +1,8 @@
 'kiwi public';
 
 import _ from 'lodash';
+import { watch } from 'vue';
+
 import Logger from '@/libs/Logger';
 import bouncerMiddleware from '@/libs/BouncerMiddleware';
 
@@ -415,7 +417,7 @@ export default class BouncerProvider {
         this.snapshotCurrentNetworks();
 
         let debouncedSaveState = _.debounce(this.saveState.bind(this), 2000);
-        this.state.$watch('networks', debouncedSaveState, { deep: true });
+        watch(this.state.networks, debouncedSaveState, { deep: true });
     }
 
     listenToState() {
diff --git a/src/libs/GlobalApi.js b/src/libs/GlobalApi.js
index 8631300340..9a8dd04f97 100644
--- a/src/libs/GlobalApi.js
+++ b/src/libs/GlobalApi.js
@@ -2,8 +2,9 @@
 
 /** @module */
 
+import * as Vue from 'vue';
+
 import EventEmitter from 'eventemitter3';
-import Vue from 'vue';
 import JSON5 from 'json5';
 import _ from 'lodash';
 import { compareVersions } from 'compare-versions';
@@ -23,8 +24,10 @@ export default class GlobalApi extends EventEmitter {
         this.version = __VERSION__; // eslint-disable-line no-undef
         this.commithash = __COMMITHASH__; // eslint-disable-line no-undef
 
-        /** A reference to the internal Vuejs instance */
+        // Vue app instance
+        this.app = null;
         this.Vue = Vue;
+
         /** Expose JSON5 so that plugins can use the same config format */
         this.JSON5 = JSON5;
         /** The applications internal state */
@@ -171,7 +174,7 @@ export default class GlobalApi extends EventEmitter {
      * @param {object} args Optional arguments for this plugin { title: '', props: {} }
      */
     addUi(type, component, args = {}) {
-        const plugin = Misc.makePluginObject(nextPluginId++, component, args);
+        const plugin = Misc.makePluginObject(this.app, nextPluginId++, component, args);
 
         switch (type) {
         case 'input':
@@ -214,7 +217,7 @@ export default class GlobalApi extends EventEmitter {
      * @param {Object} props Optional properties for the vue.js component
      */
     addTab(type, title, component, props) {
-        const plugin = Misc.makePluginObject(nextPluginId++, component, { props, title });
+        const plugin = Misc.makePluginObject(this.app, nextPluginId++, component, { props, title });
 
         switch (type) {
         case 'channel':
@@ -239,7 +242,7 @@ export default class GlobalApi extends EventEmitter {
      * @param {Object} props Optional properties the the vue.js component
      */
     addView(name, component, props) {
-        const plugin = Misc.makePluginObject(nextPluginId++, component, { props });
+        const plugin = Misc.makePluginObject(this.app, nextPluginId++, component, { props });
         this.tabs[name] = plugin;
     }
 
@@ -263,7 +266,7 @@ export default class GlobalApi extends EventEmitter {
      * @param {Object} props Optional properties for the vue.js component
      */
     showInSidebar(component, props) {
-        const plugin = Misc.makePluginObject(0, component, { props });
+        const plugin = Misc.makePluginObject(this.app, 0, component, { props });
         this.state.$emit('sidebar.component', plugin.component, plugin.props);
     }
 
@@ -273,7 +276,7 @@ export default class GlobalApi extends EventEmitter {
      * @param {Object} component The vue.js component object
      */
     addStartup(name, component) {
-        const plugin = Misc.makePluginObject(0, component);
+        const plugin = Misc.makePluginObject(this.app, 0, component);
         let startups = this.state.getStartups();
         startups[name] = plugin.component;
     }
diff --git a/src/libs/InputHandler.js b/src/libs/InputHandler.js
index 89f76e9c2a..50178476cb 100644
--- a/src/libs/InputHandler.js
+++ b/src/libs/InputHandler.js
@@ -1,6 +1,7 @@
 'kiwi public';
 
 import _ from 'lodash';
+import { watch, reactive } from 'vue';
 
 import * as TextFormatting from '@/helpers/TextFormatting';
 import * as Misc from '@/helpers/Misc';
@@ -18,9 +19,18 @@ export default class InputHandler {
         this.aliasRewriter.importFromString(state.setting('aliases'));
 
         // Only watch the user setting changes in order to reload them
-        state.$watch('user_settings.aliases', (newVal) => {
-            this.aliasRewriter.importFromString(state.setting('aliases'));
-        });
+        watch(
+            () => {
+                if (state.user_settings?.aliases) {
+                    return state.user_settings.aliases;
+                } else {
+                    return reactive({});
+                }
+            },
+            (newVal) => {
+                this.aliasRewriter.importFromString(state.setting('aliases'));
+            }
+        );
 
         this.listenForInput();
     }
diff --git a/src/libs/IrcClient.js b/src/libs/IrcClient.js
index 26e624b9a7..eebf3e9f55 100644
--- a/src/libs/IrcClient.js
+++ b/src/libs/IrcClient.js
@@ -531,7 +531,7 @@ function clientMiddleware(state, network) {
             if (event.nick === client.user.nick) {
                 network.buffers.forEach((b) => {
                     if ((b.flags.redirect_to || '').toLowerCase() === event.channel.toLowerCase()) {
-                        state.$delete(b.flags, 'redirect_to');
+                        delete b.flags.redirect_to;
                         b.rename(event.channel);
                     }
                 });
@@ -1040,9 +1040,9 @@ function clientMiddleware(state, network) {
                     let modeChar = mode.mode.substr(1);
 
                     if (adding) {
-                        state.$set(buffer.modes, modeChar, mode.param);
+                        buffer.modes[modeChar] = mode.param;
                     } else if (!adding) {
-                        state.$delete(buffer.modes, modeChar);
+                        delete buffer.modes[modeChar];
                     }
 
                     modeStrs.push(mode.mode + (mode.param ? ' ' + mode.param : ''));
@@ -1114,9 +1114,9 @@ function clientMiddleware(state, network) {
                         let modeChar = mode.mode.substr(1);
 
                         if (adding) {
-                            state.$set(buffer.modes, modeChar, mode.param);
+                            buffer.modes[modeChar] = mode.param;
                         } else if (!adding) {
-                            state.$delete(buffer.modes, modeChar);
+                            delete buffer.modes[modeChar];
                         }
 
                         modeStrs[mode.mode].push({ target: buffer.name, param: mode.param });
diff --git a/src/libs/Message.js b/src/libs/Message.js
index f335af421b..5c5885ba6a 100644
--- a/src/libs/Message.js
+++ b/src/libs/Message.js
@@ -1,6 +1,7 @@
 'kiwi public';
 
-import Vue from 'vue';
+import { shallowReactive } from 'vue';
+
 import parseMessage from '@/libs/MessageParser';
 import toHtml from '@/libs/renderers/Html';
 import GlobalApi from '@/libs/GlobalApi';
@@ -40,7 +41,7 @@ export default class Message {
         def(this, 'ignore', false);
         def(this, 'mentioned_urls', []);
         // If embed.payload is truthy, it will be embedded within the message
-        this.embed = { type: 'url', payload: null };
+        this.embed = shallowReactive({ type: 'url', payload: null });
         this.html = '';
         this.blocks = [];
         def(this, 'hasRendered', false);
@@ -55,7 +56,7 @@ export default class Message {
         // We don't want the user object to be enumerable
         Object.defineProperty(this, 'user', { value: user });
 
-        Vue.observable(this);
+        // Vue.observable(this);
     }
 
     get time() {
diff --git a/src/libs/SidebarState.js b/src/libs/SidebarState.js
new file mode 100644
index 0000000000..8bcf27a344
--- /dev/null
+++ b/src/libs/SidebarState.js
@@ -0,0 +1,170 @@
+import { computed, nextTick, ref } from 'vue';
+
+import getState from '@/libs/state';
+import GlobalApi from '@/libs/GlobalApi';
+
+export default function useSidebarState() {
+    const sidebarOpen = ref(false);
+    const sidebarSection = ref('');
+    const sidebarUser = ref(null);
+    const activeComponent = ref(null);
+    const activeComponentProps = ref(null);
+
+    function resetSidebarState() {
+        sidebarOpen.value = false;
+        sidebarSection.value = '';
+        sidebarUser.value = null;
+        activeComponent.value = null;
+        activeComponentProps.value = null;
+    }
+
+    const api = GlobalApi.singleton();
+    api.on('sidebar.component', (component, props) => {
+        resetSidebarState();
+        sidebarOpen.value = !!component;
+        activeComponent.value = component;
+        activeComponentProps.value = props || {};
+        sidebarSection.value = sidebarOpen.value ? 'component' : '';
+    });
+
+    // Allow forcing the sidebar open at startup
+    nextTick(() => {
+        const state = getState();
+        const sidebarDefault = state.setting('sidebarDefault');
+        if (sidebarDefault && state.ui.app_width > 769) {
+            sidebarOpen.value = true;
+            sidebarSection.value = sidebarDefault;
+        }
+    });
+
+    function section() {
+        if (!sidebarOpen.value) {
+            return '';
+        }
+
+        let currentSection = sidebarSection.value;
+        if (currentSection === 'component') {
+            return section;
+        }
+
+        const state = getState();
+        const buffer = state.getActiveBuffer();
+        if (buffer.isQuery()) {
+            // This is a query with only one possible sidebar dont change the current state
+            // instead attempt to show the user, this allows channels to show their nicklist
+            let user = state.getUser(buffer.getNetwork().id, buffer.name);
+            if (user) {
+                sidebarUser.value = user;
+                return 'user';
+            }
+            return '';
+        }
+
+        // The following code is for channels only
+        if (!buffer.isChannel()) {
+            return '';
+        }
+
+        if (currentSection === 'user' && sidebarUser.value) {
+            if (buffer.hasNick(sidebarUser.value.nick)) {
+                return 'user';
+            }
+            // This was going to show a user that is not even present in the current channel
+            // permantly switch back to nicklist so it does not jump back to user
+            // when they switch to a channel with that user
+            sidebarSection.value = 'nicklist';
+            return sidebarSection.value;
+        } else if (currentSection === 'nicklist') {
+            return 'nicklist';
+        } else if (currentSection === 'settings') {
+            return 'settings';
+        } else if (currentSection === 'about') {
+            return 'about';
+        }
+
+        return '';
+    }
+
+    function close() {
+        resetSidebarState();
+    }
+
+    function showUser(user) {
+        resetSidebarState();
+        sidebarOpen.value = true;
+        sidebarUser.value = user;
+        sidebarSection.value = 'user';
+    }
+
+    function showNicklist() {
+        resetSidebarState();
+        sidebarOpen.value = true;
+        sidebarSection.value = 'nicklist';
+    }
+
+    function showBufferSettings() {
+        resetSidebarState();
+        sidebarOpen.value = true;
+        sidebarSection.value = 'settings';
+    }
+
+    function showAbout() {
+        resetSidebarState();
+        sidebarOpen.value = true;
+        sidebarSection.value = 'about';
+    }
+
+    function toggleUser(user) {
+        section() === 'user' ?
+            close() :
+            showUser(user);
+    }
+
+    function toggleNicklist() {
+        section() === 'nicklist' ?
+            close() :
+            showNicklist();
+    }
+
+    function toggleBufferSettings() {
+        section() === 'settings' ?
+            close() :
+            showBufferSettings();
+    }
+
+    function toggleAbout() {
+        section() === 'about' ?
+            close() :
+            showAbout();
+    }
+
+    const isOpen = computed(() => {
+        const state = getState();
+        return sidebarOpen.value && section() && state.ui.app_width > 769;
+    });
+
+    const isDrawn = computed(() => {
+        const state = getState();
+        return sidebarOpen.value && section() && state.ui.app_width <= 769;
+    });
+
+    return {
+        sidebarOpen,
+        sidebarSection,
+        sidebarUser,
+        activeComponent,
+        activeComponentProps,
+        section,
+        close,
+        showUser,
+        showNicklist,
+        showBufferSettings,
+        showAbout,
+        toggleUser,
+        toggleNicklist,
+        toggleBufferSettings,
+        toggleAbout,
+        isOpen,
+        isDrawn,
+    };
+}
diff --git a/src/libs/StatePersistence.js b/src/libs/StatePersistence.js
index 5a13e8a97d..b3b19eb4ef 100644
--- a/src/libs/StatePersistence.js
+++ b/src/libs/StatePersistence.js
@@ -1,6 +1,7 @@
 'kiwi public';
 
 import _ from 'lodash';
+import { watch } from 'vue';
 
 export default class StatePersistence {
     constructor(storageKey, state, storage, logger) {
@@ -52,12 +53,12 @@ export default class StatePersistence {
             this.storage.set(this.storageKey, this.state.exportState(this.includeBuffers));
         }, 1000);
 
-        this.state.$watch('networks', debouncedSaveState, { deep: true });
-        this.state.$watch('user_settings', debouncedSaveState, { deep: true });
+        watch(this.state.networks, debouncedSaveState, { deep: true });
+        watch(this.state.user_settings, debouncedSaveState, { deep: true });
 
         // We need to touch each property of each buffer for that we want to save our state on.
         // If any of the properties change then the $watch()er will call debouncedSaveState()
-        this.watcher = this.state.$watch(() => {
+        this.watcher = watch(() => {
             let watchVals = [];
 
             this.state.networks.forEach((network) => {
diff --git a/src/libs/WindowTitle.js b/src/libs/WindowTitle.js
index cedfccba08..d2fc0bd6ec 100644
--- a/src/libs/WindowTitle.js
+++ b/src/libs/WindowTitle.js
@@ -1,3 +1,5 @@
+import { toRef, watch } from 'vue';
+
 export default class WindowTitle {
     constructor(state) {
         this.state = state;
@@ -9,11 +11,11 @@ export default class WindowTitle {
             this.updateTitle();
         }
 
-        state.$watch('settings.windowTitle', (newVal) => {
+        watch(toRef(state, 'settings.windowTitle'), (newVal) => {
             this.updateTitle(newVal);
         });
 
-        state.$watch('ui.app_has_focus', (newVal) => {
+        watch(toRef(state, 'ui.app_has_focus'), (newVal) => {
             if (newVal && this.alertTmr) {
                 this.stopAlert();
             }
diff --git a/src/libs/bufferTools.js b/src/libs/bufferTools.js
index 77c63c70ca..bd57944a49 100644
--- a/src/libs/bufferTools.js
+++ b/src/libs/bufferTools.js
@@ -31,13 +31,6 @@ export function orderedMessages(buffer, opts = {}) {
     let currentNick = network.nick;
     let bufferMessages = buffer.getMessages();
 
-    // Hack; We need to make vue aware that we depend on buffer.message_count in order to
-    // get the messagelist to update its DOM, as the change of message_count alerts
-    // us that the messages have changed. This is done so that vue does not have to make
-    // every emssage reactive which gets very expensive.
-    /* eslint-disable no-unused-vars */
-    let ignoredVar = buffer.message_count;
-
     let messages = [];
     if (opts.inPlace) {
         messages = bufferMessages;
diff --git a/src/libs/state.js b/src/libs/state.js
index 5c2aaa7242..770916b3a9 100644
--- a/src/libs/state.js
+++ b/src/libs/state.js
@@ -1,7 +1,8 @@
 'kiwi public';
 
-import Vue from 'vue';
+import { computed, reactive, shallowReactive } from 'vue';
 import _ from 'lodash';
+import EventEmitter from 'eventemitter3';
 
 import * as Misc from '@/helpers/Misc';
 import * as TextFormatting from '@/helpers/TextFormatting';
@@ -18,14 +19,8 @@ function createNewState() {
 
         // Settings may be overridden via config.json
         settings: configTemplates.default,
-        user_settings: {
-        },
-        connection: {
-            // disconnected / connecting / connected
-            status: 'connected',
-            sessionId: '',
-        },
-        ui: {
+        user_settings: reactive({}),
+        ui: reactive({
             active_network: 0,
             active_buffer: '',
             last_active_buffers: [],
@@ -40,37 +35,29 @@ function createNewState() {
             input_history: [],
             input_history_pos: 0,
             show_advanced_tab: false,
-        },
-        networks: [],
+        }),
+        networks: shallowReactive([]),
     };
 
-    const userDict = new Vue({
-        data() {
-            return {
-                networks: {},
-            };
-        },
+    const userDict = {
+        networks: {},
         /*
         (network id): {
             (lowercase nick): UserState,
             (lowercase nick): UserState,
         },
         */
-    });
+    };
 
-    const bufferDict = new Vue({
-        data() {
-            return {
-                networks: {},
-            };
-        },
+    const bufferDict = {
+        networks: {},
         /*
         (network id): [
             BufferState,
             BufferState,
         ]
         */
-    });
+    };
 
     // Messages are seperate from the above state object to keep them from being reactive. Saves CPU
     const messages = [
@@ -86,8 +73,7 @@ function createNewState() {
 
     const availableStartups = Object.create(null);
 
-    const state = new Vue({
-        data: stateObj,
+    const oldState = {
         methods: {
             // Export enough state so that it can be imported in future to resume
             exportState(includeBuffers) {
@@ -150,12 +136,12 @@ function createNewState() {
                 if (importObj && importObj.networks) {
                     this.resetState();
                     importObj.networks.forEach((importNetwork) => {
-                        let network = new NetworkState(
+                        let network = reactive(new NetworkState(
                             importNetwork.id,
                             state,
                             userDict,
                             bufferDict
-                        );
+                        ));
                         network.name = importNetwork.name;
                         network.connection = { ...network.connection, ...importNetwork.connection };
                         network.auto_commands = importNetwork.auto_commands || '';
@@ -175,12 +161,12 @@ function createNewState() {
                         this.networks.push(network);
 
                         importNetwork.buffers.forEach((impBuffer) => {
-                            let buffer = new BufferState(
+                            let buffer = reactive(new BufferState(
                                 impBuffer.name,
                                 network.id,
                                 state,
                                 messages
-                            );
+                            ));
                             buffer.key = impBuffer.key;
                             buffer.enabled = !!impBuffer.enabled;
                             buffer.settings = impBuffer.settings;
@@ -201,8 +187,8 @@ function createNewState() {
             },
 
             resetState() {
-                this.$set(this.$data, 'user_settings', {});
-                this.$set(this.$data, 'networks', []);
+                this.user_settings = {};
+                this.networks = [];
                 messages.splice(0);
             },
 
@@ -225,10 +211,14 @@ function createNewState() {
                 return result;
             },
 
+            settingComputed(name) {
+                return computed(() => this.setting(name));
+            },
+
             // Accept 'dotted.notation' to read a state property of any depth
             getSetting(name) {
                 let parts = name.split('.');
-                let val = this.$data;
+                let val = this;
 
                 for (let i = 0; i < parts.length; i++) {
                     val = val[parts[i]];
@@ -243,19 +233,20 @@ function createNewState() {
             // Accept 'dotted.notation' to set a state property of any depth
             setSetting(name, newVal) {
                 let parts = name.split('.');
-                let val = this.$data;
+                let val = this;
 
                 for (let i = 0; i < parts.length; i++) {
                     let propName = parts[i];
                     let nextVal = val[propName];
 
                     if (i < parts.length - 1 && typeof nextVal === 'undefined') {
-                        nextVal = this.$set(val, propName, {});
+                        val[propName] = {};
+                        nextVal = val[propName];
                     } else if (i === parts.length - 1) {
                         if (newVal === null) {
-                            this.$delete(val, propName);
+                            delete val[propName];
                         } else {
-                            this.$set(val, propName, newVal);
+                            val[propName] = newVal;
                         }
                     }
 
@@ -299,7 +290,7 @@ function createNewState() {
                     parseInt(serverInfo.channelId, 10) :
                     _.reduce(this.networks, networkidReduce, 0) + 1;
 
-                let network = new NetworkState(networkid, state, userDict, bufferDict);
+                let network = reactive(new NetworkState(networkid, state, userDict, bufferDict));
                 network.name = name;
                 network.username = serverInfo.username;
                 network.gecos = serverInfo.gecos;
@@ -365,40 +356,35 @@ function createNewState() {
             },
 
             setActiveBuffer(networkid, bufferName) {
-                if (this.ui.active_network && this.ui.active_buffer) {
-                    const oldBuffer = this.getBufferByName(
-                        this.ui.active_network,
-                        this.ui.active_buffer,
-                    );
-                    if (oldBuffer) {
-                        oldBuffer.isVisible = false;
-                    }
-                }
-
                 if (!networkid) {
                     this.ui.active_network = 0;
                     this.ui.active_buffer = '';
-                    return;
-                }
+                } else {
+                    if (this.settings.useBufferHistory && this.ui.active_network) {
+                        // Keep track of last 20 viewed buffers. When closing buffers we can go back
+                        // to one of the previous ones
+                        this.ui.last_active_buffers.push({
+                            networkid: this.ui.active_network,
+                            bufferName: this.ui.active_buffer,
+                        });
 
-                if (this.setting('useBufferHistory') && this.ui.active_network) {
-                    // Keep track of last 20 viewed buffers. When closing buffers we can go back
-                    // to one of the previous ones
-                    this.ui.last_active_buffers.push({
-                        networkid: this.ui.active_network,
-                        bufferName: this.ui.active_buffer,
-                    });
+                        let lastActive = this.ui.last_active_buffers;
+                        this.ui.last_active_buffers = lastActive.splice(lastActive.length - 20);
+                    }
 
-                    let lastActive = this.ui.last_active_buffers;
-                    this.ui.last_active_buffers = lastActive.splice(lastActive.length - 20);
-                }
+                    this.ui.active_network = networkid;
+                    this.ui.active_buffer = bufferName;
 
-                this.ui.active_network = networkid;
-                this.ui.active_buffer = bufferName;
+                    // Clear any unread messages counters for this buffer
+                    let buffer = this.getBufferByName(networkid, bufferName);
+                    if (buffer && buffer.flags.unread) {
+                        buffer.flags.unread = 0;
+                    }
 
-                let buffer = this.getBufferByName(networkid, bufferName);
-                if (buffer) {
-                    buffer.isVisible = true;
+                    // Update the buffers last read time
+                    if (buffer) {
+                        buffer.markAsRead(true);
+                    }
                 }
             },
 
@@ -511,7 +497,7 @@ function createNewState() {
                     return false;
                 }
 
-                buffer = new BufferState(bufferName, network.id, state, messages);
+                buffer = reactive(new BufferState(bufferName, network.id, state, messages));
                 network.buffers.push(buffer);
 
                 let eventObj = { buffer };
@@ -600,9 +586,14 @@ function createNewState() {
                     includeAsActivity = true;
                 }
 
+                let isActiveBuffer = (
+                    buffer.networkid === this.ui.active_network &&
+                    buffer.name === this.ui.active_buffer
+                );
+
                 let network = buffer.getNetwork();
                 let isNewMessage = message.time >= buffer.last_read;
-                let isHighlight = !network || buffer.isRaw() ?
+                let isHighlight = !network ?
                     false :
                     Misc.mentionsNick(bufferMessage.message, network.ircClient.user.nick);
 
@@ -613,7 +604,7 @@ function createNewState() {
 
                 // Check for extra custom highlight words
                 let extraHighlights = (state.setting('highlights') || '').toLowerCase().split(' ');
-                if (!isHighlight && !buffer.isRaw() && extraHighlights.length > 0) {
+                if (!isHighlight && extraHighlights.length > 0) {
                     extraHighlights.forEach((word) => {
                         if (!word) {
                             return;
@@ -625,7 +616,7 @@ function createNewState() {
                     });
                 }
 
-                if (!buffer.isRaw() && state.setting('teamHighlights')) {
+                if (state.setting('teamHighlights')) {
                     let m = bufferMessage.message;
                     let patterns = {
                         everyone: /(^|\s)@everybody($|\s|[,.;])/,
@@ -643,16 +634,16 @@ function createNewState() {
 
                 bufferMessage.isHighlight = isHighlight;
 
-                if (isNewMessage && buffer.isVisible) {
+                if (isNewMessage && isActiveBuffer && state.ui.app_has_focus) {
                     buffer.last_read = message.time;
                 }
 
                 // Handle buffer flags
                 if (
-                    isNewMessage &&
-                    includeAsActivity &&
-                    !buffer.isVisible &&
-                    !bufferMessage.ignore
+                    isNewMessage
+                    && includeAsActivity
+                    && !isActiveBuffer
+                    && !bufferMessage.ignore
                 ) {
                     buffer.incrementFlag('unread');
                     if (isHighlight) {
@@ -706,6 +697,7 @@ function createNewState() {
                 }
 
                 if (
+                    isActiveBuffer &&
                     !state.ui.app_has_focus &&
                     message.type !== 'traffic' &&
                     (
@@ -810,12 +802,12 @@ function createNewState() {
                     state.removeUserFromBuffer(buffer, user.nick);
                 });
 
-                this.$delete(network.users, user.nick.toUpperCase());
+                delete network.users[user.nick.toUpperCase()];
             },
 
             addMultipleUsersToBuffer(buffer, newUsers) {
                 let network = this.getNetwork(buffer.networkid);
-                let bufUsers = Object.assign(Object.create(null), buffer.users);
+                let bufUsers = Object.create(null);
 
                 state.usersTransaction(network.id, (users) => {
                     newUsers.forEach((newUser) => {
@@ -830,17 +822,16 @@ function createNewState() {
 
                         // Add the buffer to the users buffer list
                         if (!userObj.buffers[buffer.id]) {
-                            state.$set(userObj.buffers, buffer.id, {
+                            userObj.buffers[buffer.id] = {
                                 modes: modes || [],
                                 buffer: buffer,
-                            });
+                            };
                         } else {
                             userObj.buffers[buffer.id].modes = modes || [];
                         }
                     });
                 });
-
-                buffer.users = bufUsers;
+                Object.assign(buffer.users, bufUsers);
             },
 
             addUserToBuffer(buffer, user, modes) {
@@ -862,12 +853,12 @@ function createNewState() {
 
                 // Add the buffer to the users buffer list
                 if (!userObj.buffers[buffer.id]) {
-                    state.$set(userObj.buffers, buffer.id, {
+                    userObj.buffers[buffer.id] = {
                         modes: modes || [],
                         buffer: buffer,
-                    });
+                    };
                 } else {
-                    state.$set(userObj.buffers[buffer.id], 'modes', modes || []);
+                    userObj.buffers[buffer.id].modes = modes || [];
                 }
             },
 
@@ -921,15 +912,15 @@ function createNewState() {
                 // If the nick has completely changed (ie. not just a case change) then update all
                 // associated buffers user lists
                 if (normalisedOld !== normalisedNew) {
-                    state.$set(network.users, normalisedNew, network.users[normalisedOld]);
-                    state.$delete(network.users, normalisedOld);
+                    network.users[normalisedNew] = network.users[normalisedOld];
+                    delete network.users[normalisedOld];
 
                     Object.keys(user.buffers).forEach((bufferId) => {
                         let buffer = user.buffers[bufferId].buffer;
                         if (!buffer.addUserBatch.queue().includes(user)) {
                             // The user is not in the queue to be added to the buffer
-                            state.$set(buffer.users, normalisedNew, buffer.users[normalisedOld]);
-                            state.$delete(buffer.users, normalisedOld);
+                            buffer.users[normalisedNew] = buffer.users[normalisedOld];
+                            delete buffer.users[normalisedOld];
                         }
                     });
                 }
@@ -944,6 +935,14 @@ function createNewState() {
                 return availableStartups;
             },
         },
+    };
+
+    const state = new EventEmitter();
+    Object.assign(state, stateObj, oldState.methods, {
+        $on: state.on,
+        $off: state.off,
+        $once: state.once,
+        $emit: state.emit,
     });
 
     return state;
diff --git a/src/libs/state/BufferState.js b/src/libs/state/BufferState.js
index 5e1e510a0a..0d6cd0bd2c 100644
--- a/src/libs/state/BufferState.js
+++ b/src/libs/state/BufferState.js
@@ -1,6 +1,6 @@
 /** @module */
 
-import Vue from 'vue';
+import { shallowReactive } from 'vue';
 import _ from 'lodash';
 import { def } from './common';
 import batchedAdd from '../batchedAdd';
@@ -51,8 +51,6 @@ export default class BufferState {
         // still loading messages
         this.chathistory_request_count = 0;
 
-        Vue.observable(this);
-
         // Some non-enumerable properties (vues $watch won't cover these properties)
         def(this, 'state', state, false);
         def(this, 'messageDict', messageDict, false);
@@ -60,7 +58,7 @@ export default class BufferState {
         let messagesObj = {
             networkid: this.networkid,
             buffer: this.name,
-            messages: [],
+            messages: shallowReactive([]),
             messageIds: Object.create(null),
         };
         this.messageDict.push(messagesObj);
@@ -313,7 +311,7 @@ export default class BufferState {
 
     setting(name, val) {
         if (typeof val !== 'undefined') {
-            this.state.$set(this.settings, name, val);
+            this.settings[name] = val;
             return val;
         }
 
@@ -342,7 +340,7 @@ export default class BufferState {
 
     flag(name, val) {
         if (typeof val !== 'undefined') {
-            this.state.$set(this.flags, name, val);
+            this.flags[name] = val;
             return val;
         }
 
@@ -469,7 +467,7 @@ export default class BufferState {
         // would just be added again. Eg. user joins/parts during a flood
         _.pull(this.addUserBatch.queue(), userObj);
 
-        this.state.$delete(this.users, nick.toUpperCase());
+        delete this.users[nick.toUpperCase()];
 
         if (userObj) {
             delete userObj.buffers[this.id];
@@ -485,7 +483,7 @@ export default class BufferState {
             delete userObj.buffers[this.id];
         });
 
-        this.state.$set(this, 'users', {});
+        Object.keys(this.users).forEach((key) => delete this.users[key]);
     }
 
     addMessage(message) {
@@ -602,14 +600,14 @@ export default class BufferState {
  */
 function createUserBatch(bufferState) {
     let addSingleUser = (u) => {
-        bufferState.state.$set(bufferState.users, u.nick.toUpperCase(), u);
+        bufferState.users[u.nick.toUpperCase()] = u;
     };
     let addMultipleUsers = (users) => {
-        let o = Object.assign(Object.create(null), bufferState.users);
+        let o = Object.create(null);
         users.forEach((u) => {
             o[u.nick.toUpperCase()] = u;
         });
-        bufferState.users = o;
+        Object.assign(bufferState.users, o);
     };
 
     return batchedAdd(addSingleUser, addMultipleUsers, 2);
diff --git a/src/libs/state/NetworkState.js b/src/libs/state/NetworkState.js
index b7929760f4..11c134e3b3 100644
--- a/src/libs/state/NetworkState.js
+++ b/src/libs/state/NetworkState.js
@@ -1,6 +1,5 @@
 /** @module */
 
-import Vue from 'vue';
 import { def } from './common';
 import * as IrcClient from '../IrcClient';
 
@@ -50,8 +49,6 @@ export default class NetworkState {
         this.password = '';
         this.away = '';
 
-        Vue.observable(this);
-
         // Some non-enumerable properties (vues $watch won't cover these properties)
         def(this, 'appState', appState, false);
         def(this, 'userDict', userDict, false);
@@ -59,13 +56,13 @@ export default class NetworkState {
         def(this, 'frameworkClient', null, true);
 
         def(this, 'users', Object.create(null), (newVal) => {
-            appState.$set(userDict.networks, this.id, newVal);
+            userDict.networks[this.id] = newVal;
         });
 
         // Pending prviate messages awaiting whois operator check
         def(this, 'pendingPms', [], false);
 
-        bufferDict.$set(bufferDict.networks, this.id, []);
+        bufferDict.networks[this.id] = [];
     }
 
     get ircClient() {
@@ -94,7 +91,7 @@ export default class NetworkState {
 
     setting(name, val) {
         if (typeof val !== 'undefined') {
-            this.appState.$set(this.settings, name, val);
+            this.settings[name] = val;
             return val;
         }
 
diff --git a/src/libs/state/UserState.js b/src/libs/state/UserState.js
index 1d46fda2a8..2e486c16c2 100644
--- a/src/libs/state/UserState.js
+++ b/src/libs/state/UserState.js
@@ -1,6 +1,5 @@
 /** @module */
 
-import Vue from 'vue';
 import * as TextFormatting from '@/helpers/TextFormatting';
 import { def } from './common';
 
@@ -21,8 +20,6 @@ export default class UserState {
         this.avatar = user.avatar || { small: '', large: '' };
         this.ignore = false;
 
-        Vue.observable(this);
-
         // Whois details are non-enumerable properties (vues $watch won't cover these properties)
         // watch hasWhois to know when this data is populated
         def(this, 'whois', {
@@ -64,7 +61,7 @@ export default class UserState {
 
         let typing = this.typingState[target];
         if (!typing) {
-            Vue.set(this.typingState, target, { started: 0, status: '' });
+            this.typingState[target] = { started: 0, status: '' };
             typing = this.typingState[target];
         }
 
@@ -74,7 +71,7 @@ export default class UserState {
         }
 
         if (status === 'done') {
-            Vue.delete(this.typingState, target);
+            delete this.typingState[target];
             return null;
         }
 
diff --git a/src/main.js b/src/main.js
index aedc9fc00f..668e1c8ca1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,16 +1,14 @@
 import _ from 'lodash';
-import Vue from 'vue';
+import { createApp, watch } from 'vue';
 import JSON5 from 'json5';
 import i18next from 'i18next';
 import i18nextHTTP from 'i18next-http-backend';
-import VueI18Next from '@panter/vue-i18next';
+import VueI18Next from 'i18next-vue';
 import VueVirtualScroller from 'vue-virtual-scroller';
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 
 // fetch polyfill
 import 'whatwg-fetch';
-// polyfill for vue-virtual-scroller & ie11
-import 'intersection-observer';
 
 import App from '@/components/App';
 import StartupError from '@/components/StartupError';
@@ -28,18 +26,18 @@ import { SoundBleep } from '@/libs/SoundBleep';
 import WindowTitle from '@/libs/WindowTitle';
 import { configTemplates } from '@/res/configTemplates';
 
-import AvailableLocales from '@/res/locales/available.json';
-import FallbackLocale from '@/../static/locales/en-us.json';
-
 // Global utilities
-import '@/components/utils/TabbedView';
-import '@/components/utils/InputText';
-import '@/components/utils/IrcInput';
-import '@/components/utils/InputPrompt';
-import '@/components/utils/InputConfirm';
-import '@/components/utils/TransitionExpand';
+import InputConfirm from '@/components/utils/InputConfirm';
+import InputPrompt from '@/components/utils/InputPrompt';
+import InputText from '@/components/utils/InputText';
+import IrcInput from '@/components/utils/IrcInput';
+import TabbedView from '@/components/utils/TabbedView';
+import TransitionExpand from '@/components/utils/TransitionExpand';
+
+import AvailableLocales from '@/res/locales/available.json';
+import FallbackLocale from '@/../static/locales/dev.json';
 
-Vue.use(VueVirtualScroller);
+const log = Logger.namespace('main');
 
 let logLevelMatch = window.location.href.match(/kiwi-loglevel=(\d)/);
 if (logLevelMatch && logLevelMatch[1]) {
@@ -48,14 +46,21 @@ if (logLevelMatch && logLevelMatch[1]) {
     Logger('Logging level set to', newLevel);
 }
 
-let log = Logger.namespace('main');
+const app = createApp(App);
+
+app.use(VueVirtualScroller);
+
+app.component('InputConfirm', InputConfirm);
+app.component('InputPrompt', InputPrompt);
+app.component('InputText', InputText);
+app.component('IrcInput', IrcInput);
+app.component('TabbedView', TabbedView);
+app.component('TabbedTab', TabbedView.Tab);
+app.component('TransitionExpand', TransitionExpand);
 
 // Add the global API as soon as possible so that things can start listening to it
 let api = window.kiwi = GlobalApi.singleton();
-
-// Third party imports now have access to the state and api
-/* eslint-disable import/first */
-import '@/thirdparty/';
+api.app = app;
 
 function getQueryVariable(variable) {
     let query = window.location.search.substring(1);
@@ -72,12 +77,12 @@ function getQueryVariable(variable) {
 
 // Add a handy this.listen() fn to Vue instances. Saves on the need to add an event listener
 // and then manually remove them all the time.
-Vue.mixin({
-    beforeDestroy: function beforeDestroy() {
+app.mixin({
+    beforeUnmount() {
         (this.listeningEvents || []).forEach((fn) => fn());
     },
     methods: {
-        listen: function listen(source, event, fn) {
+        listen(source, event, fn) {
             this.listeningEvents = this.listeningEvents || [];
             let off = () => {
                 (source.removeEventListener || source.$off || source.off).call(source, event, fn);
@@ -86,7 +91,7 @@ Vue.mixin({
             (source.addEventListener || source.$on || source.on).call(source, event, fn);
             return off;
         },
-        listenOnce: function listenOnce(source, event, _fn) {
+        listenOnce(source, event, _fn) {
             let fn = _fn;
             this.listeningEvents = this.listeningEvents || [];
             let off = () => {
@@ -112,8 +117,8 @@ Vue.mixin({
 });
 
 // Timer functions that are auto cleaned up when a component is destroyed
-Vue.mixin({
-    beforeDestroy: function beforeDestroy() {
+app.mixin({
+    beforeUnmount() {
         (this.timerEvents || []).forEach((tmr) => clearTimeout(tmr));
     },
     methods: {
@@ -147,7 +152,7 @@ Vue.mixin({
 });
 
 // Make the state available to all components by default
-Vue.mixin({
+app.mixin({
     computed: {
         $state() {
             return getState();
@@ -158,8 +163,8 @@ Vue.mixin({
 // Allow adding existing raw elements to component templates
 // Eg: <div v-rawElement="domElement"></div>
 // Eg: <div v-rawElement="{el: domElement, data:{foo:'bar'}}"></div>
-Vue.directive('rawElement', {
-    bind(el, binding) {
+app.directive('rawElement', {
+    beforeMount(el, binding) {
         if (binding.value.nodeName) {
             el.appendChild(binding.value);
         } else if (binding.value.el) {
@@ -184,13 +189,13 @@ Vue.directive('rawElement', {
 });
 
 // Register a global custom directive called `v-focus`
-Vue.directive('focus', {
+app.directive('focus', {
     // Support conditional eg. v-focus="false"
-    bind(el, bindings) {
+    beforeMount(el, bindings) {
         el.dataset.focus = bindings.value === undefined || !!bindings.value;
     },
     // When the bound element is inserted into the DOM...
-    inserted(el) {
+    mounted(el) {
         // dataset properties are strings
         if (el.dataset.focus !== 'true') {
             return;
@@ -209,13 +214,13 @@ Vue.directive('focus', {
 });
 
 let ROSymbol = Symbol('resizeobserver');
-Vue.directive('resizeobserver', {
-    bind(el, bindings) {
+app.directive('resizeobserver', {
+    beforeMount(el, bindings) {
         let cb = bindings.value || function noop() {};
         el[ROSymbol] = new ResizeObserver(cb);
         el[ROSymbol].observe(el);
     },
-    unbind(el) {
+    unmounted(el) {
         el[ROSymbol].unobserve(el);
     },
 });
@@ -295,7 +300,7 @@ function applyConfig(config) {
     applyConfigObj(config, getState().settings);
 }
 
-// Recursively merge an object onto another via Vue.$set
+// Recursively merge an object onto another
 function applyConfigObj(obj, target) {
     // Keys in the newObjects array will get new objects created (empty) before merging from config
     let newObjects = ['emojis', 'autocompleteTokens'];
@@ -312,11 +317,11 @@ function applyConfigObj(obj, target) {
                     [] :
                     {};
 
-                Vue.set(target, key, newVal);
+                target[key] = newVal;
             }
             applyConfigObj(val, target[key]);
         } else {
-            Vue.set(target, key, val);
+            target[key] = val;
         }
     });
 }
@@ -388,13 +393,13 @@ function loadPlugins() {
 }
 
 function initLocales() {
-    Vue.use(VueI18Next);
+    app.use(VueI18Next, { i18next });
 
     i18next.use(i18nextHTTP);
     i18next.init({
         supportedLngs: AvailableLocales.locales,
+        fallbackLng: 'dev',
         compatibilityJSON: 'v3',
-        fallbackLng: 'en-us',
         lowerCaseLng: true,
         backend: {
             loadPath: (langs, namespaces) => {
@@ -422,29 +427,10 @@ function initLocales() {
     });
 
     // Build in the english translation so it can be used as a fallback
-    i18next.addResourceBundle('en-us', 'translation', FallbackLocale);
+    i18next.addResourceBundle('dev', 'translation', FallbackLocale);
 
     // Make the translation services available via the global API
     api.i18n = i18next;
-    api.vueI18n = new VueI18Next(i18next);
-
-    // Override the $t function so that empty translations fallback to en-us
-    Vue.mixin({
-        computed: {
-            $t() {
-                return (key, options) => {
-                    const vueI18n = this.$i18n || api.vueI18n;
-                    let val = vueI18n.i18next.t(key, options, vueI18n.i18nLoadedAt);
-                    if (!val) {
-                        let opts = options || {};
-                        opts.lng = 'en-us';
-                        val = vueI18n.i18next.t(key, opts, vueI18n.i18nLoadedAt);
-                    }
-                    return val;
-                };
-            },
-        },
-    });
 
     const setDefaultLanguage = () => {
         let defaultLang = getState().setting('language');
@@ -482,7 +468,7 @@ function initLocales() {
     setDefaultLanguage();
 
     // Update the language if the setting changes.
-    getState().$watch('user_settings.language', (lang) => {
+    watch(getState().settingComputed('language'), (lang) => {
         if (!lang && !getState().setting('language')) {
             setDefaultLanguage();
         } else {
@@ -538,12 +524,7 @@ function startApp() {
 
     api.emit('init');
 
-    /* eslint-disable no-new */
-    new Vue({
-        el: '#app',
-        render: (h) => h(App),
-        i18n: api.vueI18n,
-    });
+    app.mount('#app');
 
     api.emit('ready');
 }
@@ -555,12 +536,8 @@ function showError(err) {
         log.error('Unknown error starting Kiwi IRC');
     }
 
-    /* eslint-disable no-new */
-    new Vue({
-        el: '#app',
-        render: (h) => h(
-            StartupError,
-            { props: { error: err } },
-        ),
-    });
+    createApp(
+        StartupError,
+        { error: err }
+    ).mount('#app');
 }
diff --git a/index.html b/static/index.html
similarity index 100%
rename from index.html
rename to static/index.html
diff --git a/tests/unit/NetworkState.spec.js b/tests/unit/NetworkState.spec.js
index 1d0a9f8214..2fbddc45b6 100644
--- a/tests/unit/NetworkState.spec.js
+++ b/tests/unit/NetworkState.spec.js
@@ -8,7 +8,7 @@ describe('NetworkState', () => {
         expect(network).toBeInstanceOf(NetworkState);
         expect(network.name).toBe('TestNetwork');
         expect(network.connection.nick).toBe('TestNick');
-        expect(network.appState).toBe(s);
+        expect(network.appState).toStrictEqual(s);
     });
 
     it('should add a NetworkState to the global state', () => {
diff --git a/tests/unit/StartupError.spec.js b/tests/unit/StartupError.spec.js
index 983551a1bf..d9a57c2260 100644
--- a/tests/unit/StartupError.spec.js
+++ b/tests/unit/StartupError.spec.js
@@ -1,20 +1,24 @@
-import Vue from 'vue';
-import StartupError from '@/components/StartupError';
-
-Vue.mixin({
-    computed: {
-        $t() {
-            return (key, options) => key;
-        },
-    },
-});
+import { createApp } from 'vue';
+import StartupError from '@/components/StartupError.vue';
 
 describe('StartupError.vue', () => {
     it('should render correct contents', () => {
-        const vm = new Vue({
-            el: document.createElement('div'),
-            render: (h) => h(StartupError, { props: { error: 'some error' } }),
+        const el = document.createElement('div');
+        const app = createApp(
+            StartupError,
+            { error: 'some error' }
+        );
+
+        app.mixin({
+            computed: {
+                $t() {
+                    return (key, options) => key;
+                },
+            },
         });
-        expect(vm.$el.querySelector('div').textContent).toEqual('some error');
+
+        app.mount(el);
+
+        expect(el.querySelector('.kiwi-wrap > div').textContent).toEqual('some error');
     });
 });