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.