Font tooling directives For Vue.js

Vue plugins

Font plugin

usage

import FontDirectivesPlugin from '../plugins/FontDirectivesPlugin';

createApp(App)
    .use(FontDirectivesPlugin)
    .mount('#app')

Plugin imports scss file

import '../style/global.scss';
  • v-font-size
<span v-font-size:bold="21"> v-font-size:fontWeight="fontSize" </span>
  • v-heading

<span v-font-size:bold v-heading:h3> v-heading:h1 </span>
(available: options h1 - h6)
  • v-font-style

<span v-font-style:italic> v-font-style:italic </span>
(available options: initial, inherit, italic, normal, revert, oblique, unset)
  • v-font-color

<span v-font-color:#41b884>#41b884</span>
</span>
  • v-font-bg-color
<span v-font-bg-color:#41b884 v-font-color:#fff>#41b884</span>
  • v-font-weight
<span v-font-weight:bold> v-font-weight:bold </span>

Alert

usage

import AlertPlugin from '../plugins/AlertPlugin';

createApp(App)
    .use(AlertPlugin)
    .mount('#app')

View:

<base-alert alert-type="secondary">
    <p>This is secondary alert</p>
</base-alert>

alert-type: primary (default), secondary, success, danger, warning, info, light, dark

GitHub

View Github