diff --git a/js/news.js b/js/news.js
index 9901e71..356e81a 100644
--- a/js/news.js
+++ b/js/news.js
@@ -1,4 +1,4 @@
-import { reactive } from 'vue';
+import { ref } from 'vue';
 import newsFiles from '../news/*.md';
 
 const news = Object.values(newsFiles)
@@ -11,37 +11,23 @@ const news = Object.values(newsFiles)
 
 const LAST_READ_NEWS_AT_LOCAL_STORAGE = 'lastReadNewsAt';
 
-const state = reactive({
-  hasNews: true,
-});
-
-export default {
-  data() {
-    return {
-      news,
-      internalState: state,
-    };
-  },
+function initHasUnreadNews() {
+  const lastReadNewsAt = localStorage.getItem(LAST_READ_NEWS_AT_LOCAL_STORAGE);
+  if (lastReadNewsAt) {
+    const date = new Date();
+    date.setTime(lastReadNewsAt);
+    return news[0].date > date;
+  }
+  return true;
+}
 
-  created() {
-    const lastReadNewsAt = localStorage.getItem(LAST_READ_NEWS_AT_LOCAL_STORAGE);
-    if (lastReadNewsAt) {
-      const date = new Date();
-      date.setTime(lastReadNewsAt);
-      state.hasNews = news[0].date > date;
-    }
-  },
+const hasUnreadNews = ref(initHasUnreadNews());
 
-  computed: {
-    hasNews() {
-      return this.internalState.hasNews;
-    }
-  },
+function markAsRead() {
+  localStorage.setItem(LAST_READ_NEWS_AT_LOCAL_STORAGE, news[0].date.getTime());
+  hasUnreadNews.value = false;
+}
 
-  methods: {
-    markAsRead() {
-      localStorage.setItem(LAST_READ_NEWS_AT_LOCAL_STORAGE, news[0].date.getTime());
-      state.hasNews = false;
-    }
-  }
-};
+export function useNews() {
+  return { hasUnreadNews, news, markAsRead };
+}
diff --git a/js/news_info.vue b/js/news_info.vue
index 745a435..68488ae 100644
--- a/js/news_info.vue
+++ b/js/news_info.vue
@@ -21,17 +21,14 @@
   </sub-sidebar>
 </template>
 
-<script>
-import news from './news';
+<script setup>
+import { onMounted } from 'vue';
+import { useNews } from './news';
 import SubSidebar from './sub_sidebar';
 
-export default {
-  components: { SubSidebar },
+const { news, markAsRead } = useNews();
 
-  mixins: [news],
-
-  mounted() {
-    this.markAsRead();
-  }
-};
+onMounted(() => {
+  markAsRead();
+});
 </script>
diff --git a/js/sidebar.vue b/js/sidebar.vue
index fde0f36..9308a86 100644
--- a/js/sidebar.vue
+++ b/js/sidebar.vue
@@ -60,7 +60,7 @@
         <v-list-item @click="display('news')">
           <template v-slot:prepend>
             <v-badge
-              :model-value="hasNews"
+              :model-value="hasUnreadNews"
               dot
             >
               <v-icon>{{ mdiNewspaperVariantOutline }}</v-icon>
@@ -149,7 +149,7 @@ import {
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { tilesUrl } from '../config.json';
-import news from './news';
+import { useNews } from './news';
 import logo from 'data-url:../icons/indoorequal.svg';
 
 dayjs.extend(relativeTime);
@@ -168,7 +168,10 @@ const fetchReplicationStatus = async function() {
 }
 
 export default {
-  mixins: [news],
+  setup() {
+    const { hasUnreadNews } = useNews();
+    return { hasUnreadNews};
+  },
 
   props: {
     menu: {
diff --git a/js/toolbar.vue b/js/toolbar.vue
index bb6b8be..b5c22f8 100644
--- a/js/toolbar.vue
+++ b/js/toolbar.vue
@@ -9,7 +9,7 @@
           v-bind="props"
         >
           <v-badge
-            :model-value="hasNews"
+            :model-value="hasUnreadNews"
             dot
           >
             <img
@@ -71,7 +71,7 @@
 <script>
 import { mdiPencilOutline } from '@mdi/js';
 import GeocoderInput from './geocoder';
-import news from './news';
+import { useNews } from './news';
 import equalLogo from 'data-url:../icons/equal.svg';
 
 export default {
@@ -79,7 +79,10 @@ export default {
     GeocoderInput
   },
 
-  mixins: [news],
+  setup() {
+    const { hasUnreadNews } = useNews();
+    return { hasUnreadNews};
+  },
 
   props: {
     mapBounds: {