@glance-project/fence-vue

fence-vue

Fence components library built with Vue

Documentation

Documentation can be found at https://cern.ch/fence-vue

Bug report

Errors should be reported at JIRA. You can also find there open, in progress and closed issues.

Keycloak authentication

main({ auth: { sso: 'keycloak', clientId, refreshInterval } }) signs the user in with keycloak-js 24 or later. CERN's Keycloak only puts the nonce claim in the ID token, and older adapters also expected it in the access and refresh tokens, which made them discard every login and loop back to the SSO page.

keycloak-js 24+ ships optional chaining, which the webpack 4 parser used by Vue CLI 4 cannot read. Applications built with Vue CLI 4 must transpile it in vue.config.js:

module.exports = {
    transpileDependencies: ['vuetify', 'keycloak-js'],
};

Styles

src/assets/style/main.scss is the global stylesheet (fence-vue styles and Bootstrap): import it once per application, for instance from main.js.

src/assets/style/variables.scss only holds variables, functions and mixins (fence-vue's $default-* values, Bootstrap's variables and mixins) and emits no CSS. It is the file to inject into component style blocks, for instance with sass-loader's additionalData in vue.config.js:

module.exports = {
    css: {
        loaderOptions: {
            scss: {
                additionalData: '@import "@glance-project/fence-vue/src/assets/style/variables";',
            },
        },
    },
};

Injecting main.scss instead compiles Bootstrap once per component and ships a copy of it in every component's CSS.

Icons

FenceIcon renders Font Awesome icons registered with registerIcons. fence-vue registers the icons its own components use; an application registers the icons it uses once, before the first render:

import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
import { registerIcons } from '@glance-project/fence-vue';

registerIcons(faPlus, faTrashAlt);

An icon that is not registered renders as a question mark and logs a warning outside production. Up to 0.19, FenceIcon loaded any icon on demand with a dynamic import(), which made webpack bundle the whole icon set (1000+ modules and chunks) in every application.