i do declare

benchtop-fe/package.json

@@ -11,6 +11,8 @@
   "dependencies": {
     "@mdi/font": "^7.2.96",
     "@vuepic/vue-datepicker": "^7.0.0",
+    "vls": "^0.8.5",
+    "volar-service-vetur": "^0.0.13",
     "vue": "^3.3.4",
     "vue-upload-component": "^3.1.8"
   },

benchtop-fe/src/components/CalibrationDevice/NewCalibrationDeviceForm.vue

@@ -37,22 +37,15 @@
     </table>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, defineProps } from 'vue'
+
 import VueDatePicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
-
-export default {
-  components: {VueDatePicker},
-  name: 'NewCalibrationDeviceForm',
-  data() {
-    return {
-      calibration_model: "",
-      calibration_serial: "",
-      calibration_cert_id: "",
-      calibration_due_date: "",
-      calibration_date: "",
-      flow: ['year', 'month', 'calendar']
-    }
-  },
-}
+const calibration_model = ref( "")
+const calibration_serial = ref( "")
+const calibration_cert_id = ref( "")
+const calibration_due_date = ref( "")
+const calibration_date = ref( "")
+const flow = ref( ['year', 'month', 'calendar'])
 </script>

benchtop-fe/src/components/CustomerForm.vue

@@ -33,17 +33,11 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'CustomerForm',
-  data() {
-    return {
-      customer_name: "",
-      onsite_cal: false,
-      control_doc: "",
-      technician: "",
-    }
+<script setup>
+import { ref, defineProps } from 'vue'
 
-  }
-}
+const customer_name = ref("")
+const onsite_cal = ref(false)
+const control_doc = ref("")
+const technician = ref("")
 </script>

benchtop-fe/src/components/EnvironmentForm.vue

@@ -34,16 +34,11 @@
     </table>
   </div>
 </template>
-<script>
-export default {
-  name: 'EnvironmentForm',
-  data() {
-    return {
-      accuracy: 0.05,
-      barometric_pressure: 1013.25,
-      temperature: 50.0,
-      humidity: 50.0
-    }
-  }
-}
+<script setup>
+import { ref, defineProps } from 'vue'
+
+const accuracy = ref(0.05)
+const barometric_pressure = ref(1013.25)
+const temperature = ref(50.0)
+const humidity = ref(50.0)
 </script>

benchtop-fe/src/components/Instrument/NewInstrumentForm.vue

@@ -50,24 +50,18 @@
     </table>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, defineProps } from 'vue'
+
 import VueDatePicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 
-export default {
-  components: {VueDatePicker},
-  name: 'NewInstrumentForm',
-  data() {
-    return {
-      channel: "",
-      serial_number: "",
-      instrument_model: "",
-      transducer_model: "",
-      transducer_span: "",
-      instrument_calibration_due_date: "",
-      instrument_calibration_date: "",
-      flow: ['year', 'month', 'calendar']
-    }
-  },
-}
+const channel = ref("")
+const serial_number = ref("")
+const instrument_model = ref("")
+const transducer_model = ref("")
+const transducer_span = ref("")
+const instrument_calibration_due_date = ref("")
+const instrument_calibration_date = ref("")
+const flow = ['year', 'month', 'calendar']
 </script>

benchtop-fe/src/components/UploadForm.vue

@@ -65,30 +65,17 @@
     </table>
   </div>
 </template>
-<script>
-import {ref} from 'vue'
-import VueUploadComponent from 'vue-upload-component'
 
-export default {
-  name: 'UploadForm',
-  data: function () {
-    return {
-      report_type: "",
-      files: [],
-      upload: ref(null),
-    }
-  },
-  components: {
-    FileUpload: VueUploadComponent
-  },
-  methods: {
-    /**
-     * Has changed
-     * @param  Object|undefined   newFile   Read only
-     * @param  Object|undefined   oldFile   Read only
-     * @return undefined
-     */
-    inputFile(newFile, oldFile) {
+
+<script setup>
+import { ref, defineProps } from 'vue'
+import {VueUploadComponent as FileUpload} from 'vue-upload-component'
+
+const report_type = ref('')
+const files = ref([])
+const upload = ref(null)
+
+const inputFile = (newFile, oldFile) => {
   if (newFile && oldFile && !newFile.active && oldFile.active) {
     // Get response data
     console.log('response', newFile.response)
@@ -97,15 +84,9 @@ export default {
       console.log('status', newFile.xhr.status)
     }
   }
-    },
-    /**
-     * Pretreatment
-     * @param  Object|undefined   newFile   Read and write
-     * @param  Object|undefined   oldFile   Read only
-     * @param  Function           prevent   Prevent changing
-     * @return undefined
-     */
-    inputFilter(newFile, oldFile, prevent) {
+}
+
+const inputFilter = (newFile, oldFile, prevent) => {
   if (newFile && !oldFile) {
     // Filter non-image file
     if (!/\.(txt)$/i.test(newFile.name)) {
@@ -115,17 +96,16 @@ export default {
 
   // Create a blob field
   newFile.blob = ''
-      let URL = window.URL || window.webkitURL
+  const URL = window.URL || window.webkitURL
   if (URL && URL.createObjectURL) {
     newFile.blob = URL.createObjectURL(newFile.file)
   }
   console.log(URL)
-    },
-    kindChange(opt, file) {
+}
+
+const kindChange = (opt, file) => {
   // Change the file kind metadata, (both, as found, as left) for the uploaded file
   file.kind = opt
   console.log(file)
-    }
-  }
 }
 </script>

benchtop-fe/volar.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+	services: [
+		require('volar-service-vetur').create(),
+	],
+};