diff --git a/babel.config.js b/babel.config.js
index 6103f602..bcc386b5 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,10 +1,7 @@
 module.exports = {
-  presets: [
-    "@vue/cli-plugin-babel/preset",
-    "@babel/preset-env"
-  ],
+  presets: ["@babel/preset-env"],
   plugins: [
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-private-methods'
-  ]
-};
\ No newline at end of file
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-private-methods",
+  ],
+};
diff --git a/jest-setup.js b/jest-setup.js
index 4d86a230..9bb9ad84 100644
--- a/jest-setup.js
+++ b/jest-setup.js
@@ -1,6 +1,10 @@
+/*
 import Vue from 'vue'
 import Vuetify from 'vuetify'
 import Particles from 'vue2-particles'
 
 Vue.use(Particles);
-Vue.use(Vuetify);
\ No newline at end of file
+Vue.use(Vuetify);
+*/
+
+// Nothing to see here, please move along...
diff --git a/jest.config.js b/jest.config.js
index 0218f3f5..adff31ff 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,9 +1,7 @@
 module.exports = {
-  preset: "@vue/cli-plugin-unit-jest",
+  testEnvironment: "jsdom",
   collectCoverage: true,
-  coverageReporters: [
-    "lcov"
-  ],
+  coverageReporters: ["lcov", "html"],
   collectCoverageFrom: [
     "src/**/*.{js,vue}",
     "!src/main.js",
@@ -13,21 +11,20 @@ module.exports = {
     "!src/router/routes.js",
     "!src/components/Icon/Icon.vue",
   ],
+  coveragePathIgnorePatterns: ["/node_modules/", "/tests/"],
   testMatch: [
-    "**/**.spec.js", "**/**/**.spec.js", "tests/**/**.spec.js", "tests/**/**/**.spec.js"
-  ],
-  setupFiles: [
-    "./jest-setup.js",
-    "trace-unhandled/register"
-  ],
-  "moduleFileExtensions": [
-    "js",
-    "json",
-    "vue"
+    "**/**.spec.js",
+    "**/**/**.spec.js",
+    "tests/**/**.spec.js",
+    "tests/**/**/**.spec.js",
   ],
+  setupFiles: ["./jest-setup.js", "trace-unhandled/register"],
+  moduleFileExtensions: ["js", "json", "vue"],
   transform: {
-    '^.*\\.js$': 'babel-jest',
-    '.*\\.(vue)$': 'vue-jest'
+    "^.*\\.js$": "babel-jest",
+    ".*\\.(vue)$": "@vue/vue3-jest",
   },
-  transformIgnorePatterns: ['node_modules/(?!vue-router|@babel|vuetify|vue2-particles)']
-};
\ No newline at end of file
+  transformIgnorePatterns: [
+    "node_modules/(?!vue-router|@babel|vuetify|tsparticles)",
+  ],
+};
diff --git a/package.json b/package.json
index 08604548..43c5d08d 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,11 @@
 {
   "name": "FAIRsharing-Assistant",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --port 8082",
     "build": "vue-cli-service build --modern",
-    "test:unit": "vue-cli-service test:unit --coverage",
+    "test:unit": "jest --coverage=true",
     "lint": "vue-cli-service lint",
     "lint:fix": "vue-cli-service lint --fix",
     "codacy": "cat ./coverage/lcov.info | codacy-coverage -t ",
@@ -16,27 +16,24 @@
     "@babel/polyfill": "^7.12.1",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/vue-fontawesome": "^0.1.9",
+    "@fortawesome/vue-fontawesome": "^3.0.0",
+    "@tsparticles/vue3": "^3.0.1",
     "axios": "^0.27.2",
     "babel-core": "^7.0.0-bridge.0",
     "core-js": "^3.28.0",
     "dotenv": "^16.0.3",
-    "jest": "^27.5.1",
     "jest-offline": "^1.0.1",
     "lodash": "^4.17.21",
     "roboto-fontface": "*",
     "trace-unhandled": "^2.0.1",
-    "tsparticles": "^2.8.0",
-    "vue": "^2.7.16",
-    "vue-class-component": "^7.2.6",
+    "tsparticles": "^3.5.0",
+    "vue": "^3.1.0",
+    "vue-3-sanitize": "^0.1.4",
     "vue-eslint-parser": "^9.1.0",
-    "vue-jest": "^3.0.7",
     "vue-loader": "^17.2.2",
-    "vue-router": "^3.4.3",
-    "vue-sanitize": "^0.2.3",
-    "vue2-particles": "^2.8.0",
-    "vuetify": "^2.6.10",
-    "vuex": "^3.6.2",
+    "vue-router": "^4.0.0",
+    "vuetify": "^3.6.13",
+    "vuex": "^4.0.2",
     "webpack": "^5.88.0"
   },
   "devDependencies": {
@@ -44,13 +41,14 @@
     "@babel/eslint-parser": "^7.21.8",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/plugin-proposal-private-methods": "^7.16.11",
-    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-env": "^7.24.8",
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-eslint": "^5.0.7",
-    "@vue/cli-plugin-unit-jest": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
-    "@vue/test-utils": "^1.1.3",
-    "@vue/vue2-jest": "^27.0.0-alpha.3",
+    "@vue/compiler-sfc": "^3.1.0",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/vue3-jest": "^29.2.6",
+    "babel-jest": "^29.7.0",
     "codacy-coverage": "^3.4.0",
     "compression-webpack-plugin": "^10.0.0",
     "css-loader": "^5.2.7",
@@ -58,15 +56,15 @@
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-vue": "^8.0.3",
     "ink-docstrap": "^1.3.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jsdoc": "^4.0.0",
     "jsdoc-vuejs": "^3.0.9",
     "jsdoc-vuex-plugin": "^1.0.0",
     "sass": "~1.32.12",
     "sass-loader": "^10.1.1",
     "sinon": "^7.5.0",
-    "vue-cli-plugin-vuetify": "~2.5.8",
-    "vue-template-compiler": "^2.7.15",
-    "vuetify-loader": "^1.7.0"
+    "vue-cli-plugin-vuetify": "~2.5.8"
   },
   "browserslist": [
     "> 1%",
diff --git a/src/App.vue b/src/App.vue
index a19b25bc..d2fa108c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,8 @@
 <template>
   <v-app id="app">
-    <div class="d-flex appWrapper fill-height flex-column justify-space-between">
+    <div
+      class="d-flex appWrapper fill-height flex-column justify-space-between"
+    >
       <router-view />
       <Footer />
     </div>
@@ -10,19 +12,19 @@
 <script>
 import Footer from "@/components/Others/Footer.vue";
 export default {
-  name: 'App',
-  components:{Footer},
+  name: "App",
+  components: { Footer },
   data() {
     return {
-      loading:true,
-    }
+      loading: true,
+    };
   },
   /* istanbul ignore next */
   async updated() {
     // very important line of code which prevents layout shifting which is considered as one negative point for SEO
-    await this.$nextTick()
+    await this.$nextTick();
     this.loading = false;
-  }
+  },
 };
 </script>
 
@@ -33,7 +35,8 @@ export default {
   min-height: 99vh;
 }
 
-html, body {
+html,
+body {
   height: 100%;
 }
 
diff --git a/src/components/Navigation/Jumbotron.vue b/src/components/Navigation/Jumbotron.vue
index dd82c4cc..dcaee21a 100644
--- a/src/components/Navigation/Jumbotron.vue
+++ b/src/components/Navigation/Jumbotron.vue
@@ -1,17 +1,21 @@
 <template>
   <section
     class="px-md-10 pa-5 d-flex flex-column justify-center mb-6"
-    :style="['z-index: 2', {
-      backgroundImage: 'linear-gradient(180deg, rgba(37, 52, 66, 1) 0%, rgba(39, 170, 225, 1) 200%),url(' + '/assets/Home/BlockHero/pattern3.jpg',
-      backgroundRepeat: 'repeat',
-      backgroundBlendMode: 'multiply',
-    }]"
+    :style="[
+      'z-index: 2',
+      {
+        backgroundImage:
+          'linear-gradient(180deg, rgba(37, 52, 66, 1) 0%, rgba(39, 170, 225, 1) 200%),url(' +
+          '/assets/Home/BlockHero/pattern3.jpg',
+        backgroundRepeat: 'repeat',
+        backgroundBlendMode: 'multiply',
+      },
+    ]"
     :class="getJumbotronData['pageName'] === 'HomeView' ? 'heroBlock' : null"
   >
     <!-- eslint-disable vue/no-v-html -->
-    <Particles
+    <vue-particles
       id="particles"
-      :particles-init="particlesInit"
       :particles-loaded="particlesLoaded"
       :options="options"
     />
@@ -23,17 +27,15 @@
       :class="getJumbotronData['pageName'] === 'HomeView' ? 'text-center' : getJumbotronData['pageName'] === 'Licence'? 'text-center' : 'text-left'"
       // This goes in the h1 above, should it be needed again.
       -->
-      {{ getJumbotronData["title"] }} <em
+      {{ getJumbotronData["title"] }}
+      <em
         v-if="getJumbotronData['tempSubTitle']"
         class="green--text"
-      >{{ getJumbotronData["tempSubTitle"] }}</em>
+      >
+        {{ getJumbotronData["tempSubTitle"] }}
+      </em>
     </h1>
 
-    <!--
-    ,
-        getJumbotronData['pageName'] === 'HomeView' ? 'text-center' : 'text-left'
-        // removed from class in block below
-    -->
     <h2
       v-if="getJumbotronData['subTitle']"
       :class="[
@@ -41,8 +43,8 @@
         {
           'lato-text-md': $vuetify.breakpoint.mdOnly,
           'lato-text-lg': $vuetify.breakpoint.lgAndUp,
-          'lato-text-sm': $vuetify.breakpoint.smAndDown
-        }
+          'lato-text-sm': $vuetify.breakpoint.smAndDown,
+        },
       ]"
       style="z-index: 2"
     >
@@ -53,121 +55,120 @@
 
 <script>
 import jumbotronData from "@/data/jumbotronData.json";
-import { loadFull } from "tsparticles";
+//import { loadFull } from "tsparticles";
 
 // These consts appear to be called by the tests but aren't shown as covered.
 /* istanbul ignore next */
-const particlesInit = async engine => {
-  await loadFull(engine);
-};
+//const particlesInit = async (engine) => {
+//  await loadFull(engine);
+//};
 /* istanbul ignore next */
 // eslint-disable-next-line no-unused-vars
-const particlesLoaded = async container => {
-  //console.log("Particles container loaded", container);
+const particlesLoaded = async (container) => {
+  console.log("Particles container loaded", container);
 };
 
 export default {
   name: "Jumbotron",
-  data:() => {
+  data: () => {
     return {
-      particlesInit,
       particlesLoaded,
       options: {
         background: {
           color: {
-            value: 'transparent'
-          }
+            value: "transparent",
+          },
         },
         fullScreen: { enable: false },
         fpsLimit: 60,
         particles: {
           color: {
-            value: '#1F8EBF'
+            value: "#1F8EBF",
           },
           links: {
-            color: '#1F8EBF',
+            color: "#1F8EBF",
             distance: 100,
             enable: true,
             opacity: 0.5,
-            width: 2
+            width: 2,
           },
           collisions: {
-            enable: true
+            enable: true,
           },
           move: {
-            direction: 'none',
+            direction: "none",
             enable: true,
-            outModes: 'bounce',
+            outModes: "bounce",
             random: false,
             speed: 1,
-            straight: false
+            straight: false,
           },
           number: {
             density: {
               enable: true,
-              value_area: 300
+              value_area: 300,
             },
-            value: 100
+            value: 100,
           },
           opacity: {
-            value: 0.5
+            value: 0.5,
           },
           shape: {
-            type: null
+            type: null,
           },
           size: {
             random: true,
-            value: 5
-          }
+            value: 5,
+          },
         },
-        detectRetina: true
+        detectRetina: true,
       },
-      jumbotronData
-    }
+      jumbotronData,
+    };
   },
   computed: {
-    getJumbotronData(){
-      let currentPage = []
+    getJumbotronData() {
+      let currentPage = [];
       if (this.$route.name) {
         let route = this.$route.name;
-        currentPage = jumbotronData.filter(({pageName}) => pageName === route)
+        currentPage = jumbotronData.filter(
+          ({ pageName }) => pageName === route
+        );
       }
-      return currentPage[0]
-    }
-  }
-}
+      return currentPage[0];
+    },
+  },
+};
 </script>
 
-
 <style>
 .heroBlock {
   transition-duration: inherit;
   transform: translateX(0);
   animation: smooth-text 2500ms ease-in forwards;
 }
-  @keyframes smooth-text {
-    0%,
-    25% {
-      opacity: 0;
-    }
-    75%,
-    100% {
-      opacity: 1;
-    }
+@keyframes smooth-text {
+  0%,
+  25% {
+    opacity: 0;
   }
-
-  #particles canvas{
-    position: absolute;
-    width: 100% !important;
-    height: 50px !important;
-    z-index: 1;
-    left:0;
-    top: 0;
+  75%,
+  100% {
+    opacity: 1;
   }
+}
 
-  #subtitle a {
-    color: white;
-    text-decoration: underline;
-  }
+#particles canvas {
+  position: absolute;
+  width: 100% !important;
+  height: 50px !important;
+  z-index: 1;
+  left: 0;
+  top: 0;
+}
 
-</style>
\ No newline at end of file
+#subtitle a {
+  color: white;
+  text-decoration: underline;
+}
+</style>
diff --git a/src/components/RefineSelection/RefineQuestionSelection.vue b/src/components/RefineSelection/RefineQuestionSelection.vue
index 83530ed5..a055e336 100644
--- a/src/components/RefineSelection/RefineQuestionSelection.vue
+++ b/src/components/RefineSelection/RefineQuestionSelection.vue
@@ -12,31 +12,26 @@
       </v-overlay>
     </v-fade-transition>
     <!-- how many results so far? -->
-    <ResultPreviewBanner :show-banner="Object.keys(getQueryParams).length > 0" />
+    <ResultPreviewBanner
+      :show-banner="Object.keys(getQueryParams).length > 0"
+    />
     <!-- breadcrumb trail -->
     <Breadcrumbs />
     <!-- tags query -->
-    <p
-      class="mt-5 pa-5"
-    >
-      The filters below will allow you to further refine the type of record you're looking for.
-      Hover over the tooltip question mark on each one to see more information about that field.
-      Additionally, you can add/remove subject (and other) tags at this stage. If you prefer,
-      you could return to an earlier stage of the questions by clicking on the relevant part of the
+    <p class="mt-5 pa-5">
+      The filters below will allow you to further refine the type of record
+      you're looking for. Hover over the tooltip question mark on each one to
+      see more information about that field. Additionally, you can add/remove
+      subject (and other) tags at this stage. If you prefer, you could return to
+      an earlier stage of the questions by clicking on the relevant part of the
       breadcrumb trail above.
     </p>
     <v-row>
-      <v-col
-        cols="12"
-        class="ml-4"
-      >
+      <v-col cols="12" class="ml-4">
         <!-- A list here of selected tags is shown just above the text box -->
-        <v-chip-group
-          class="pl-2"
-          column
-        >
+        <v-chip-group class="pl-2" column>
           <v-chip
-            v-for="tag in (recordTags)"
+            v-for="tag in recordTags"
             :key="tag.label"
             class="ma-2"
             :color="colors[tag.model]"
@@ -46,15 +41,8 @@
             <v-tooltip bottom>
               <template #activator="{ on, attrs }">
                 <!-- this is a dreadful cheat; without it the close icon becomes unreadable -->
-                <div
-                  @click="deleteTag(tag.id, tag.model)"
-                >
-                  <v-icon
-                    v-bind="attrs"
-                    small
-                    class="ml-1"
-                    v-on="on"
-                  >
+                <div @click="deleteTag(tag.id, tag.model)">
+                  <v-icon small class="ml-1" v-on="on" v-bind="attrs">
                     fa-times-circle
                   </v-icon>
                 </div>
@@ -82,7 +70,7 @@
           :headers="tagHeaders"
           :items="tags"
           :items-per-page="10"
-          :footer-props="{'items-per-page-options': [10, 20, 30, 40, 50]}"
+          :footer-props="{ 'items-per-page-options': [10, 20, 30, 40, 50] }"
           item-key="label"
           class="elevation-1 mr-10"
           show-select
@@ -91,42 +79,30 @@
           :search-input.sync="searchString"
         >
           <template #[`item.model`]="{ item }">
-            <div
-              :class="colors[item.model] + '--text'"
-              class="noBreak"
-            >
+            <div :class="colors[item.model] + '--text'" class="noBreak">
               {{ item.model.toUpperCase().replace(/_/g, " ") }}
             </div>
           </template>
           <template #[`item.label`]="{ item }">
-            <v-chip
-              :class="colors[item.model] + ' white--text noBreak'"
-            >
+            <v-chip :class="colors[item.model] + ' white--text noBreak'">
               {{ capitaliseText(item.label, item.model) }}
             </v-chip>
           </template>
           <template #[`item.synonyms`]="{ item }">
-            <div
-              v-if="item.synonyms"
-              class="font-italic limitWidth"
-            >
+            <div v-if="item.synonyms" class="font-italic limitWidth">
               {{ item.synonyms.join(", ") }}
             </div>
           </template>
         </v-data-table>
       </v-col>
     </v-row>
-    <AddOnFilters @filterSource="capitaliseText(getQueryParams['fairsharingRegistry'][0], null)" />
-    <v-col
-      cols="6"
-      class="ml-4"
-    >
-      <v-btn
-        color="primary"
-        @click="goToResults"
-      >
-        View Results
-      </v-btn>
+    <AddOnFilters
+      @filterSource="
+        capitaliseText(getQueryParams['fairsharingRegistry'][0], null)
+      "
+    />
+    <v-col cols="6" class="ml-4">
+      <v-btn color="primary" @click="goToResults"> View Results </v-btn>
     </v-col>
   </v-container>
 </template>
@@ -136,7 +112,7 @@ import Breadcrumbs from "@/components/Navigation/Breadcrumbs.vue";
 import Loaders from "@/components/Loaders/Loaders.vue";
 import ResultPreviewBanner from "@/components/Results/ResultPreviewBanner.vue";
 import stringUtils from "@/utils/stringUtils";
-import {mapActions, mapGetters} from "vuex";
+import { mapActions, mapGetters } from "vuex";
 import tagsQuery from "@/lib/GraphClient/queries/geTags.json";
 import GraphClient from "@/lib/GraphClient/GraphClient";
 import AddOnFilters from "@/components/Others/AddOnFilters.vue";
@@ -144,8 +120,8 @@ import AddOnFilters from "@/components/Others/AddOnFilters.vue";
 const graphClient = new GraphClient();
 
 export default {
-  name: 'RefineQuestionSelection',
-  components: {AddOnFilters, ResultPreviewBanner, Loaders, Breadcrumbs},
+  name: "RefineQuestionSelection",
+  components: { AddOnFilters, ResultPreviewBanner, Loaders, Breadcrumbs },
   mixins: [stringUtils],
   data: () => {
     return {
@@ -158,38 +134,43 @@ export default {
         {
           text: "Type of keyword",
           sortable: false,
-          value: "model"
+          value: "model",
         },
         {
           text: "Name",
           sortable: false,
-          value: "label"
+          value: "label",
         },
         {
           text: "Definition",
           sortable: false,
           value: "definitions",
-          filterable: false
+          filterable: false,
         },
         {
           text: "Alternative names",
           sortable: false,
-          value: "synonyms"
-        }
+          value: "synonyms",
+        },
       ],
       colors: {
-        domain: 'domain_color',
-        taxonomy: 'taxonomic_color',
-        subject: 'subject_color',
-        user_defined_tag: 'tags_color'
+        domain: "domain_color",
+        taxonomy: "taxonomic_color",
+        subject: "subject_color",
+        user_defined_tag: "tags_color",
       },
-    }
+    };
   },
   computed: {
-    ...mapGetters('multiTagsStore', ["getFairSharingRecords", "getCurrentRegistry", "getQueryParams", "getSelectedTags"])
+    ...mapGetters("multiTagsStore", [
+      "getFairSharingRecords",
+      "getCurrentRegistry",
+      "getQueryParams",
+      "getSelectedTags",
+    ]),
   },
   watch: {
-    async searchString(val){
+    async searchString(val) {
       if (!val || val.length < 3) {
         return;
       }
@@ -197,39 +178,39 @@ export default {
       val = val.trim();
       await this.getResults(val);
     },
-    async recordTags (val) {
+    async recordTags(val) {
       let _module = this;
       if (_module.mounted) {
         _module.loading = true;
-        let queryParam =  _module.generateQuery(val);
+        let queryParam = _module.generateQuery(val);
         await _module.fetchMultiTagData(queryParam);
         // TODO: Handle errors from the server.
         _module.recordsFound = _module.getFairSharingRecords;
-        _module.$store.commit('multiTagsStore/setQueryParams', queryParam);
-        _module.$store.commit('multiTagsStore/setSelectedTags', val);
+        _module.$store.commit("multiTagsStore/setQueryParams", queryParam);
+        _module.$store.commit("multiTagsStore/setSelectedTags", val);
         _module.loading = false;
       }
-    }
+    },
   },
   mounted() {
     let _module = this;
     _module.mounted = false;
-    _module.getSelectedTags.forEach(function(tag) {
+    _module.getSelectedTags.forEach(function (tag) {
       _module.recordTags.push(tag);
     });
     _module.mounted = true;
   },
   methods: {
-    ...mapActions('multiTagsStore', ['fetchMultiTagData', 'resetMultiTags']),
+    ...mapActions("multiTagsStore", ["fetchMultiTagData", "resetMultiTags"]),
     async getResults(queryString) {
       let _module = this;
       let tagQueryCopy = JSON.parse(JSON.stringify(tagsQuery));
-      if (queryString) tagQueryCopy.queryParam = {q: queryString};
-      let taggedRecords = this.getFairSharingRecords.map(x => x.id);
+      if (queryString) tagQueryCopy.queryParam = { q: queryString };
+      let taggedRecords = this.getFairSharingRecords.map((x) => x.id);
       if (taggedRecords.length) {
         tagQueryCopy.queryParam.taggedRecords = taggedRecords;
-      }
-      else {
+        // eslint-disable-next-line brace-style
+      } else {
         delete tagQueryCopy.taggedRecords;
       }
       let tags = await graphClient.executeQuery(tagQueryCopy);
@@ -241,11 +222,11 @@ export default {
         tags = tags.searchTags;
         tags.forEach((tag) => {
           tag.parents.forEach((parent) => {
-            parent.model = tag.model
-            parents.push(parent)
-          })
+            parent.model = tag.model;
+            parents.push(parent);
+          });
           delete tag.parents;
-        })
+        });
         // TODO: process here to handle nested parents.
         _module.tags = tags.concat(parents);
       }
@@ -260,26 +241,34 @@ export default {
       delete query.subjects;
       delete query.taxonomies;
       delete query.userDefinedTags;
-      let domains = val.filter(x => x.model === 'domain').map(x => x.label);
+      let domains = val.filter((x) => x.model === "domain").map((x) => x.label);
       if (domains.length) {
-        query['domains'] = domains;
+        query["domains"] = domains;
       }
-      let subjects = val.filter(x => x.model === 'subject').map(x => x.label);
+      let subjects = val
+        .filter((x) => x.model === "subject")
+        .map((x) => x.label);
       if (subjects.length) {
-        query['subjects'] = subjects;
+        query["subjects"] = subjects;
       }
-      let taxonomies = val.filter(x => x.model === 'taxonomy').map(x => x.label);
+      let taxonomies = val
+        .filter((x) => x.model === "taxonomy")
+        .map((x) => x.label);
       if (taxonomies.length) {
-        query['taxonomies'] = taxonomies;
+        query["taxonomies"] = taxonomies;
       }
-      let user_defined_tags = val.filter(x => x.model === 'user_defined_tag').map(x => x.label);
+      let user_defined_tags = val
+        .filter((x) => x.model === "user_defined_tag")
+        .map((x) => x.label);
       if (user_defined_tags.length) {
-        query['userDefinedTags'] = user_defined_tags;
+        query["userDefinedTags"] = user_defined_tags;
       }
       return query;
     },
     deleteTag(tagId, tagModel) {
-      this.recordTags = this.recordTags.filter(el => el.id !== tagId && el.model !== tagModel);
+      this.recordTags = this.recordTags.filter(
+        (el) => el.id !== tagId && el.model !== tagModel
+      );
     },
     goToResults() {
       let _module = this;
@@ -287,26 +276,34 @@ export default {
       let breadcrumb = {
         id: "refine_crumb",
         text: "Refine your choice",
-        link: '/refine'
-      }
+        link: "/refine",
+      };
       // ...now add too many textual elements to it!
       let extra_text = [];
-      Object.keys(this.getQueryParams).forEach(function(key) {
-        if (!(['fairsharingRegistry', 'subjects', 'domains', 'taxonomies', 'userDefinedTags'].indexOf(key) > -1)) {
+      Object.keys(this.getQueryParams).forEach(function (key) {
+        if (
+          !(
+            [
+              "fairsharingRegistry",
+              "subjects",
+              "domains",
+              "taxonomies",
+              "userDefinedTags",
+            ].indexOf(key) > -1
+          )
+        ) {
           extra_text.push(_module.humaniseKey(key));
         }
       });
       if (extra_text.length > 0) {
-        breadcrumb.text = `Refine your choice: <b>${extra_text.join(', ')}</b>`
+        breadcrumb.text = `Refine your choice: <b>${extra_text.join(", ")}</b>`;
       }
       // Finally, go to the result, pushing this outrageous breadcrumb as we go.
-      this.$store.commit('navigationStore/addBreadcrumb', breadcrumb);
-      this.$router.push('/results');
-    }
-  }
-}
+      this.$store.commit("navigationStore/addBreadcrumb", breadcrumb);
+      this.$router.push("/results");
+    },
+  },
+};
 </script>
 
-<style>
-
-</style>
\ No newline at end of file
+<style></style>
diff --git a/src/main.js b/src/main.js
index 0a26c931..5adb17a6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,27 +1,26 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import vuetify from './plugins/vuetify'
-import store from './store'
-import Particles from "vue2-particles";
-import VueSanitize from "vue-sanitize";
-//import SimpleAnalytics from "simple-analytics-vue";
-import '@fortawesome/fontawesome-free/css/all.css'
-import 'core-js/stable'
-import 'roboto-fontface/css/roboto/roboto-fontface.css'
+import { createApp } from "vue";
+import { createVuetify } from "vuetify";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import Particles from "@tsparticles/vue3";
+import { loadFull } from "tsparticles";
+import Vue3Sanitize from "vue-3-sanitize";
+import "@fortawesome/fontawesome-free/css/all.css";
+import "core-js/stable";
+import "roboto-fontface/css/roboto/roboto-fontface.css";
 
-Vue.config.productionTip = false
-Vue.use(Particles);
-Vue.use(VueSanitize);
-/*
-Vue.use(SimpleAnalytics, {
-  skip: process.env.NODE_ENV !== 'production'
-})
- */
+const vuetify = createVuetify({});
 
-new Vue({
-  render: (h) => h(App),
-  router,
-  vuetify,
-  store
-}).$mount('#app')
+const app = createApp(App)
+  .use(vuetify)
+  .use(router)
+  .use(store)
+  .use(Particles, {
+    init: async (engine) => {
+      await loadFull(engine);
+    },
+  })
+  .use(Vue3Sanitize);
+
+app.mount("#app");
diff --git a/src/router/index.js b/src/router/index.js
index c0be52a7..f49698c5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,7 +1,4 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
-
-Vue.use(VueRouter);
+import { createMemoryHistory, createRouter } from "vue-router";
 
 import {
   HomeView,
@@ -13,8 +10,8 @@ import {
   AllTags,
   RefineRegistry,
   RefineFromQuestions,
-  Educational
-} from './routes'
+  Educational,
+} from "./routes";
 
 let routes = [
   // See below for further questions...
@@ -46,7 +43,7 @@ let routes = [
   {
     name: "ResultView",
     path: "/results",
-    component: ResultView
+    component: ResultView,
   },
   {
     name: "Licence",
@@ -56,32 +53,31 @@ let routes = [
   {
     name: "Educational",
     path: "/educational/:text",
-    component: Educational
+    component: Educational,
   },
   /* ERROR HANDLING */
   {
     name: "Error 404",
     path: "/error/404",
-    component: NotFound
+    component: NotFound,
   },
   /* SERVER ERROR HANDLING */
   {
     name: "Error 500",
     path: "/error/500",
-    component: ServerError
+    component: ServerError,
   },
   /* REDIRECTION */
   {
     name: "*",
-    path: "*/*",
-    component: NotFound
-  }
-]
-
+    path: "/*/*",
+    component: NotFound,
+  },
+];
 
-const router = new VueRouter({
-  mode: 'history',
+const router = createRouter({
+  history: createMemoryHistory(),
   routes,
 });
 
-export default router;
\ No newline at end of file
+export default router;
diff --git a/src/store/index.js b/src/store/index.js
index 7f71afde..f2d1bec6 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,11 +1,10 @@
-import Vue from "vue"
-import Vuex from "vuex"
+import { createStore } from 'vuex'
 import multiTagsStore from "./multiTagsStore"
 import navigationStore from "@/store/navigationStore";
 
-Vue.use(Vuex);
 
-export default new Vuex.Store({
+// Create a new store instance.
+const store = createStore({
   namespaced: true,
   modules: {
     multiTagsStore,
@@ -13,3 +12,4 @@ export default new Vuex.Store({
   }
 })
 
+export default store
diff --git a/tests/unit/App.spec.js b/tests/unit/App.spec.js
index 6f52da6d..b9c958db 100644
--- a/tests/unit/App.spec.js
+++ b/tests/unit/App.spec.js
@@ -1,27 +1,25 @@
-import {shallowMount, createLocalVue} from "@vue/test-utils";
+import { shallowMount } from "@vue/test-utils";
 import App from "@/App.vue";
-import Vuetify from "vuetify"
-import Vuex from "vuex";
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-let $route = { path: "/", name: "HomeView"};
+import { createApp } from "vue";
+import { createVuetify } from "vuetify";
 
+const vuetify = createVuetify({});
+const localVue = createApp();
+localVue.use(vuetify);
+let $route = { path: "/", name: "HomeView" };
 
 describe("App.vue", () => {
   let wrapper;
-  const vuetify = new Vuetify();
 
   it("can be instantiated", async () => {
     const title = "App";
-    wrapper = await shallowMount(App, {
+    wrapper = shallowMount(App, {
       localVue,
       vuetify,
-      mocks: {$route},
-      stubs: ['router-link', 'router-view']
+      mocks: { $route },
+      stubs: ["router-link", "router-view"],
     });
-    wrapper.vm.loading = false
+    wrapper.vm.loading = false;
     expect(wrapper.vm.$options.name).toMatch(title);
   });
-
 });
diff --git a/vue.config.js b/vue.config.js
index e9035117..de30c2f7 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -7,6 +7,19 @@ module.exports = {
   chainWebpack(config) {
     config.plugins.delete('prefetch');
     config.plugin('CompressionPlugin').use(CompressionPlugin);
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .tap((options) => {
+        return {
+          ...options,
+          compilerOptions: {
+            compatConfig: {
+              MODE: 2
+            }
+          }
+        }
+      })
   },
   css: {
     loaderOptions: {