Draft: BULL-1608 - attempting to update to vuetify 3

Merge Request Checklist

Review

• Make sure the pipeline has passed. You may have to check the mirrored repo in code.il2.dso.mil to see the pipelines.
• Make sure that there are no errors in the development console.
• Make sure everything in the the ticket is addressed and that the acceptance criteria (if applicable) is met.
• Make sure all components and images match the design file or instruction given (if applicable).
• Make sure to take out any unused code.
• Make sure that common mistakes are not present in the code base. (See list under Common Mistakes below).
• Make sure the page is responsive (see the list for Responsiveness below for checklist).
• Check if any other issues may need to be checked (some examples can be found under Other items to look out for)

Common Mistakes

• Make sure all words are spelled correctly (if applicable).
• Make sure the right images are used (if applicable).
• Do not use any inline styles in the HTML component in files.
• Make sure everything is aligned correctly.
• Please avoid making global variables.
• Make sure error handling is in appropriate places.
• Remove all test code within the working sections when ready to push to master.

Responsiveness

For all below check the following breakpoints for Vue apps

Devices	Code	Screen sizes
Extra Small	xs	< 600px
Small	sm	600px > < 960px
Medium	md	960px > < 1264px
Large	lg	1264px > < 1904px
Extra Large	xl	> 1904px

• Check for bad word breaks within each breakpoint.
• Check to see if components are misaligned or have bad spacing, padding, or margin.
• Check to see if components overflow to either side of the viewport.
• Check if there are any weird visual glitches at different breakpoints.

Other items to look out for

• Make sure new API calls use the correct HTTP verb and when working with JSON make sure it is validated.
• With GETs, make sure that text/html return type is avoided and application/json is used when dealing with json data.
• Avoid transmission of confidental data in URL parameters and unnecessary parameters.
• Make sure all API calls are within a try catch block with appropriate error handling.
• If dealing with forms, make sure the form has input validation.
• Avoid logging confidental information.
• Make sure no-cache is on confidental web pages.
• Make sure rel="noopener noreferrer" is on any link that opens to a new tab.
• For browser performance, use .webp images instead of .png, .jpg, .jpeg, etc.

src/plugins/vuetify.js

 import "@mdi/font/css/materialdesignicons.css";
-import Vue from "vue";
-import Vuetify from "vuetify/lib";
+import "vuetify/styles"; // Global CSS has to be imported
+import { createVuetify } from "vuetify";
 import PictureAsPDFIcon from "@/components/Icons/PictureAsPDF";
 
-Vue.use(Vuetify);
-
-export default new Vuetify({
+export default createVuetify({
   // theme: { disable: true },
   icons: {
     iconfont: "mdi",