Fluid Design System 3.1 introduce a new feature that allows to dynamically add components to the DOM.
So make sure to use version 3.1 to get the most out of Fluid Design System.
1) To consume Fluid Design System with Vue.js, the best way is via npm (or yarn if you prefer).
Popper.js is required to use the Tooltip component. Be sure to install if you want to use all the library or only Tooltip.
‘web-animations-js’required to use the Alert, Fab, Tag components..
2) Now add the required @webcomponents/webcomponentsjs polyfill and the copy-webpack-plugin package:
If your application must be compatible with the Edge web browser (under 44.19041 or EdgeHTML 18.19041), you also have to install the @webcomponents/custom-elements polyfill:
3) Now add the following configurations to the vue.config.js file:
4) Finally, insert the following line(s) in the public/index.html file:
Fonts and icons
The Fluid Design System uses the Lato font as global font family, read more about the typography bias on the
ENGIE has selected the Google material font as default icons pack, read more on the
Be sure to include these fonts into the main .vue file (default is App.vue).
Import the stylesheets of the library in your Vue.js application into the main .vue file (default is App.vue).
Import the entire library
… or an alternatively component
If you choose to import the entire library or at least the icon component, SCSS version need to be configured path of font icon $icon-font-path. So, the SCSS logic should be in a dedicated .scss file.
If this is not the case or you’re using a project not based upon Vue CLI, let’s start by installing the required SASS dependencies:
In the first instance, create an main.scss and add the following lines:
Then, import this file into your Vue.js application like this:
Vuetify is a famous Vue.js UI Library using the Material Design specification. You can use Vuetify in combination with Fluid Design System to take advantages of a rich ecosystem of tooling and massive community.
Fluid Design System customizes Vuetify theme with exposed Colors Design Tokens. To be configured in the src/plugins/vuetify.js file, we share with you an example here.
If you have any issues while getting set up with Fluid Design System, please create an issue or a request on our library git repository.