@engie-group/fluid-design-system-vue
v0.6.13
Published
This package is no longer maintained. Please use @engie-group/fluid-design-system-webcomponents instead, which can be used with Vue.js.
Readme
Engie's Vue components of the Fluid design system
⚠️ DEPRECATED - This package is no longer maintained
We recommend using @engie-group/fluid-design-system-webcomponents instead, which provides better compatibility across frameworks including Vue.
Fluid is the Engie's design system, a collection of reusable components and styles used to build Engie's digital products.
~~Here is the package to benefit from Fluid's components and styles in your Vue project.~~ Please use the web components package for new projects.
- Migration to Web Components
- Versioning
- Getting started
- Documentation and usage
- Troubleshooting and feature requests
Migration to Web Components
This Vue package is deprecated. We strongly recommend migrating to @engie-group/fluid-design-system-webcomponents for the following benefits:
- Better maintenance: Actively maintained and updated
- Framework agnostic: Works with Vue, React, Angular, and vanilla JavaScript
- Modern standards: Built with latest web standards
Installation
# Using npm
npm install --save-exact @engie-group/fluid-design-system-webcomponents @engie-group/fluid-design-tokens
# Using pnpm
pnpm add --save-exact @engie-group/fluid-design-system-webcomponents @engie-group/fluid-design-tokens
# Using yarn
yarn add --save-exact @engie-group/fluid-design-system-webcomponents @engie-group/fluid-design-tokensUsage in Vue
<script setup>
import "@engie-group/fluid-design-system-webcomponents";
function sayHello() {
console.log("Hello world!");
}
</script>
<template>
<nj-button emphasis="subtle" @click="sayHello">Do an action</nj-button>
</template>For more information, please check the web components NPM package.
Versioning
⚠️ This package is deprecated and no longer maintained. Please migrate to @engie-group/fluid-design-system-webcomponents.
No new version will be published.
Getting started
⚠️ For new projects, please use @engie-group/fluid-design-system-webcomponents instead. See the Migration to Web Components section above.
This package can be installed directly with NPM:
# Using npm
npm install --save-exact @engie-group/fluid-design-system-vue @engie-group/fluid-design-tokens
# Using pnpm
pnpm add --save-exact @engie-group/fluid-design-system-vue @engie-group/fluid-design-tokens
# Using yarn
yarn add --save-exact @engie-group/fluid-design-system-vue @engie-group/fluid-design-tokensℹ️ If you use deprecated components or need the reboot.css, you will need to install and use some styles from the
@engie-group/fluid-4-deprecatedpackage.Please refer to the
@engie-group/fluid-4-deprecatedREADME.mdfor more information.# Using npm npm install @engie-group/fluid-4-deprecated # Using pnpm pnpm add @engie-group/fluid-4-deprecated # Using yarn yarn add @engie-group/fluid-4-deprecated
Fonts and Icons
In order for the components to work properly, you need to include the Material Icons and Lato font in your project.
You should include them in your HTML <head>:
<!-- Material icons, Lato font and Roboto Mono font -->
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900|Roboto+Mono:300,400,700,900&display=swap" rel="stylesheet" />CSS
Component styling is based on CSS classes and some CSS variables (called design tokens). In order for each component to be rendered as expected, you need to include a CSS file as global stylesheet in your project.
You must include it in your HTML <head>:
<!-- Fluid design tokens as CSS variables -->
<link href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-tokens/lib/css/tokens.css" rel="stylesheet" />or import it in your main JavaScript file:
import "@engie-group/fluid-design-tokens/css";or in your CSS entry file :
@import "@engie-group/fluid-design-tokens/css";ℹ️ We recommend including it before your own stylesheets to avoid any conflicts.
Documentation and usage
For a better comprehension of the components and their usage, we recommend checking our Storybook documentation.
For Fluid overall documentation, you can check our Fluid documentation.
If you have correctly followed the installation steps, you should be able to use Fluid components in your project.
All components are exported in @engie-group/fluid-design-system-vue:
<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>Troubleshooting and feature requests
If you encounter any issues, or you want any component or feature to be implemented, please create an issue or a feature request on our GitHub repository.