Fluid VueJs

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 Storybook Go to documentation

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. -->
<link
  href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&amp;display=swap"
  rel="stylesheet"
/>

<!-- 
  Fluid tokens as CSS variables.
  Can also be imported from the package, see instructions below.
-->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-tokens/lib/css/tokens.css"
/>

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!");
  }
</script>

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

Using the component library directly in the browser

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

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

  <script>
    const { createApp } = Vue;
    const { Button: NjButton } = FluidVue;

    createApp({
      components: { NjButton },
      methods: {
        sayHello() {
          console.log("Hello world");
        },
      },
    }).mount("#app");
  </script>
</body>

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:

src/stories/componentName/ComponentName.stories.ts