Vuetify

mDIS usage

Internally, mDIS uses Vuetify (opens new window), the Material Design Component Framework. Vuetify is a Vue UI Library (opens new window) which contains dozens of Widgets and Components such as buttons, toolbars, grid system etc.

mDIS uses Vuetify Version 1.5. (Current is v2.3. Upcoming is v3.0, relaese planned for Q3/2020.) Vuetify is registered as a Vue plugin, as src/plugins/vuetify.js

Vuetify also comes with a few predefined Themes and Layouts. Specifically, mDIS uses the Dark (opens new window) pre-made layout.

Vuetify basics

Loading

Vuetify gets loaded via the src/App.vue file, with the

<v-app id="inspire" :dark="isDark"> directive.

TIP

In Vuetify, the notion of a Property prop has slightly differing meaning than in "plain-vanilla" Vue.

• Vuetify's props are prameterizable Modifiers of the components which get addded just like an HTML attribute, e.g. <v-toolbar height="140" dark>...</v-toolbar>. Here height and darkare props.
• Vue's props are attributes of the components set in the data: block of the <sscript> element in .vue files.

TBC

The 'dark' theme

TBC