Vue.js integration
Start with the installation of Fluid Design System in the Vue.js framework
Installation
To consume Fluid Design System with Vue.js, the best way is via npm
(or yarn
if you prefer).
npm install @engie-group/fluid-design-system
Fonts and icons
The Fluid Design System uses the Lato font as global font family, read more about the typography bias on the dedicated section.
ENGIE has selected the Google material font as default icons pack, read more on the icons documentation.
Be sure to include these fonts into the main .vue
file (default is App.vue
).
<!-- App.vue file -->
<style>
@import url("https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&display=swap");
</style>
Stylesheets
Import the stylesheets of the library in your Vue.js application into the main .vue
file (default is App.vue
).
CSS version
Import the entire library
<!-- App.vue file -->
<style>
@import "~@engie-group/fluid-design-system/lib/fluid-design-system.css";
</style>
… or an alternatively component
<!-- App.vue file -->
<style>
@import "~@engie-group/fluid-design-system/lib/components/button/index.css";
</style>
SCSS version
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:
npm install --save-dev node-sass sass-loader
In the first instance, create an main.scss
and add the following lines:
// main.scss file
// Required import in SCSS version if you choose full SCSS file or icon component
$icon-font-path: '~@engie-group/fluid-design-system/src/components/icon/fonts/';
// 1- You can import full SCSS file like this:
@import "~@engie-group/fluid-design-system/src/fluid-design-system.scss";
// 2- Or alternately, import an alternatively component in SCSS version:
// @import "~@engie-group/fluid-design-system/src/reboot.scss";
// @import "~@engie-group/fluid-design-system/src/components/button/_index.scss";
Then, import this file into your Vue.js application like this:
<!-- App.vue file -->
<style lang="scss">
// If there are variables to be configured, it's recommanded to write Fluid SCSS logic in separated file
@import "./main";
</style>
JavaScript
NEW
Automatic component initialization
Set an id attribute named root
on a global container from where components will be watched for initialization.
<div id="root"></div>
Import lib/fluid-design-system.js
then lib/auto-init.js
directly in your main app code.
import '@engie-group/fluid-design-system';
import '@engie-group/fluid-design-system/lib/auto-init';
Don’t use custom tags unless you want to.
<nj-alert> <- remove custom tag
<div class="nj-alert nj-alert--primary" role="alert">
...
</div>
Initialization via WebComponents
1) Install additional modules
Required npm modules |
---|
Popper.js |
web-animations-js |
@webcomponents/webcomponentsjs |
@webcomponents/custom-elements |
If your application build es5 javascript, you need to include custom-elements-es5-adapter.js
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
If your application must be compatible with browser not supporting custom tag, you also have to install the @webcomponents/custom-elements
polyfill:
import '@webcomponents/custom-elements/custom-elements.min.js';
3) Initiate components
// src/main.js
...
import { NJWC } from '@engie-group/fluid-design-system/lib-esm/fluid-design-system';
...
new Vue({
...
created: () => {
// Initialize every components
NJWC.AutoInit();
// Initialize a single component
// NJWC.Form.init();
}
...
}).$mount('#root')
Import a single component
// src/main.js
...
import { TextInputWC } from '@engie-group/fluid-design-system/lib-esm/components/form/text-input';
...
new Vue({
...
mounted: () => TextInputWC.init()
...
}).$mount('#root')
Example
You could have a look at a todo list application example.
Vuetify
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.
Troubleshooting
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.