Yammer Yammer Yammer email

Vue.js integration

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

v4.0.0-beta.3

Installation

1) 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

Popper.js is required to use the Tooltip component. Be sure to install if you want to use all the library or only Tooltip.

npm install popper.js

‘web-animations-js’required to use the Alert, Fab, Tag components..

npm install web-animations-js

2) Now add the required @webcomponents/webcomponentsjs polyfill and the copy-webpack-plugin package:

npm install @webcomponents/webcomponentsjs copy-webpack-plugin

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:

npm install @webcomponents/custom-elements

3) Now add the following configurations to the vue.config.js file:

  // vue.config.js
  ...
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([
        {
          context: 'node_modules/@webcomponents/webcomponentsjs',
          from: 'custom-elements-es5-adapter.js',
          to: 'webcomponents'
        },
        // Add this configuration only if your application must be compatible with the Edge web browser
        {
          context: 'node_modules/@webcomponents/custom-elements',
          from: 'custom-elements.min.js',
          to: 'webcomponents'
        }
      ])
    ]
  }
  ...

4) Finally, insert the following line(s) in the public/index.html file:

<!-- public/index.html -->
<head>
  ...
  <script src="webcomponents/custom-elements-es5-adapter.js"></script>
  <!-- Insert the line below only if your application must be compatible with the Edge web browser -->
  <!-- <script src="webcomponents/custom-elements.min.js"></script> -->
</head>

Usage

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

Import the library
// 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('#app')
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('#app')

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.