email

Vue.js integration

Start with the installation of Fluid Design System in the Vue.js framework

• Installation
• Fonts and icons
• Stylesheets
• JavaScript
• Vuetify
• Troubleshooting

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

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.