Fluid VueJs

npm (tag) Fluid Vue Licence

This library is in development.

The Fluid core team will not actively develop components. This library is fully opened to contribution. If you are interested to contribute, contact us!

Vue Fluid Design System by ENGIE

Quick Start

Install the package inside your application:

npm install --save-exact @engie-group/fluid-design-system-vue

How to use

Font & css

<!-- Font and icon font used by Fluid. -->

  Fluid tokens as CSS variables.
  Can also be imported from the package, see instructions below.

You can also import the stylesheet from the @engie-group/fluid-design-tokens package.

import "@engie-group/fluid-design-system/lib/tokens.css";

Using the component library with the “Single File Component” syntax

<script setup>
  import { Button } from "@engie-group/fluid-design-system-vue";

  function sayHello() {
    console.log("Hello world!");

  <button emphasis="subtle" @click="sayHello">Do an action</button>

Using the component library directly in the browser

  <div id="app">
    <nj-button emphasis="subtle" @click="sayHello">Do an action</nj-button>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system-vue/dist/reboot.umd.cjs"></script>

    const { createApp } = Vue;
    const { Button: NjButton } = FluidVue;

      components: { NjButton },
      methods: {
        sayHello() {
          console.log("Hello world");

How to Contribute new Components

  • Create a component folder inside src/components:
src/components -
  / componentName -
    / ComponentName.vue
    / ComponentName.test.ts
  • Update src/main.ts by adding component import/export

  • Create a component folder inside fluid-doc-vue package: