Configuration

Webpack

Ajouter @vue-unistra/formbuilder dans le tableau transpileDependencies,

// vue.config.js

const path = require('path');

module.exports = {
  lintOnSave: false,
  transpileDependencies: [
    'vuetify',
    '@vue-unistra/formbuilder',
  ],
  configureWebpack: {
    resolve: {
      symlinks: false,
      alias: {
        'vue$': path.resolve(__dirname, './node_modules/vue/dist/vue.esm.js'),
        '^vuetify': path.resolve(__dirname, './node_modules/vuetify'),
      },
    },
  },
};

Vuetify

Les composants VCard et Ripple doivent être ajoutés manuellement dans Vuetify.

// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify, { VCard } from 'vuetify/lib';
import Ripple from 'vuetify/lib/directives/ripple';
import fr from 'vuetify/es5/locale/fr';

Vue.use(Vuetify, {
  components: {
    VCard,
  },
  directives: {
    Ripple,
  },
});

export default new Vuetify({
  lang: {
    locales: { fr },
    current: 'fr',
  },
});

Vous pouvez personnaliser les couleurs des thèmes clair et sombre, avec l’option VuetifyThemeVariant, format :

const light: VuetifyThemeVariant = {
  accent: '#84E5E8',
  error: '#FF7E75',
  info: '#62B3FF',
  primary: '#105E82',
  secondary: '#FF7700',
  success: '#75D96C',
  warning: '#FFAF57',
}

new Vuetify({
  theme: {
    options: {
      customProperties: true,
    },
    themes: {
      light,
    },
  },
});

si vous personnalisez vos couleurs, vous pouvez la couleur de la police avec une option dans le plugin formbuilder.