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

Full library

Import lib/fluid-design-system.js directly in your main app code.

import '@engie-group/fluid-design-system';
import '@engie-group/fluid-design-system/lib/auto-init';

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.