Simple Google Font Picker Component For Vue.js

Install & Download:

# Yarn
$ yarn add @mikk3lro/mc-fontpicker
# NPM
$ npm i @mikk3lro/mc-fontpicker

Description:

A simple, easy font picker component that allows you to select Google fonts from a dropdown, with live preview support.

How to use it:

1. Import and register the Google font picker component.

import McFontpicker from '@mikk3lro/mc-fontpicker';
import '@mikk3lro/mc-fontpicker/dist/mc-fontpicker.css';

Vue.component("McFontpicker", McFontpicker);

2. Add the McFontpicker component to the app.

<McFontpicker v-model="font-demo" />

Current value: <span :style="'font-family: ' + font-demo">{{ font-demo }}</span>

3. Available component props.

value: {
  type: [String],
  default: 'Open Sans',
},
noMatches: {
  type: [String],
  default: 'No matches',
},
autoLoad: {
  type: Boolean,
  default: false,
},
loaderOnly: {
  type: Boolean,
  default: false,
},
loadAllVariants: {
  type: Boolean,
  default: false,
},
loadFonts: {
  type: [Array, String],
  default: '',
},
googleFonts: {
  type: [Array, String],
  default: () => 'all',
},
localFonts: {
  type: Array,
  default: () => [],
},