This pull request primarily focuses on the migration of the Vue.js application to Vuetify, a Material Design component framework. The changes involve the introduction of several new dependencies, modifications to the application's main structure, and the refactoring of existing components to use Vuetify's components and styles.
Dependency changes:
package.json: Added new dependencies such as @mdi/font, roboto-fontface, vuetify, webfontloader, @types/webfontloader, vue-cli-plugin-vuetify, and webpack-plugin-vuetify. Upgraded TypeScript from version ~4.5.5 to ^5.4.5. [1][2]
UI component modifications:
src/App.vue: Replaced AppHeader and MetricsViewer with a v-app containing a MainComponent.
src/components/MainComponent.vue: Created a new MainComponent that includes a v-card with a toolbar and window for displaying different metrics.
src/components/MetricsViewer.vue: Refactored the MetricsViewer component to use Vuetify components such as v-card, v-card-item, and v-main. Also adjusted the chartOptions in the defineComponent export. [1][2][3]
Configuration and setup:
public/index.html: Changed the language attribute in the html tag from an empty string to "en".
src/main.ts: Added usage of Vuetify and a call to loadFonts before mounting the app.
src/plugins/vuetify.js and src/plugins/vuetify.ts: Set up Vuetify with Material Design Icons. [1][2]
This pull request primarily focuses on the migration of the Vue.js application to Vuetify, a Material Design component framework. The changes involve the introduction of several new dependencies, modifications to the application's main structure, and the refactoring of existing components to use Vuetify's components and styles.
Dependency changes:
package.json
: Added new dependencies such as@mdi/font
,roboto-fontface
,vuetify
,webfontloader
,@types/webfontloader
,vue-cli-plugin-vuetify
, andwebpack-plugin-vuetify
. Upgraded TypeScript from version~4.5.5
to^5.4.5
. [1] [2]UI component modifications:
src/App.vue
: ReplacedAppHeader
andMetricsViewer
with av-app
containing aMainComponent
.src/components/MainComponent.vue
: Created a newMainComponent
that includes av-card
with a toolbar and window for displaying different metrics.src/components/MetricsViewer.vue
: Refactored theMetricsViewer
component to use Vuetify components such asv-card
,v-card-item
, andv-main
. Also adjusted thechartOptions
in thedefineComponent
export. [1] [2] [3]Configuration and setup:
public/index.html
: Changed the language attribute in thehtml
tag from an empty string to "en".src/main.ts
: Added usage of Vuetify and a call toloadFonts
before mounting the app.src/plugins/vuetify.js
andsrc/plugins/vuetify.ts
: Set up Vuetify with Material Design Icons. [1] [2]src/plugins/webfontloader.ts
: Implemented a function to load the Roboto font using thewebfontloader
package.vue.config.js
: Added Vuetify to the plugin options in the Vue configuration.