Install the package inside your application:
npm install --save-exact @engie-group/fluid-design-system-vue<!-- Font and icon font used by Fluid. -->
<link
href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&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";<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><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>- 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