Skip to main content

Vuetify

Vuetify

mDIS usage

Internally, mDIS uses Vuetifyopen in new window, the Material Design Component Framework. Vuetify is a Vue UI Libraryopen in new window that 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, release 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 Darkopen in 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.

Tips

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

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

TBC

The 'dark' theme

TBC