Energy Components:

energy-components is a library of atomic components implemented using Vue3 + TypeScript technologies.

For its functionality, energy-components also integrates another library developed by the Webbap Platforms team: energy-foundations, which is also available for use.

Installation

You need Vue.js version 3.2+ to use this library. It's also necessary to install energy-foundations on its latest version.

Yarn

yarn add energy-components

If you use Yarn, you may see a warning indicating that the energy-foundations library is required. This is the moment to install it if you haven't done so already.

yarn add energy-foundations

NPM

npm i energy-components

If you use npm version >=7.0.0, it will automatically install the energy-foundations library.

Usage

Before You Begin

Import Foundations CSS once at app entry, before any component styles. If you haven't installed the library yet, follow this documentation.

// main.ts
import 'energy-foundations/dist/style.css';

Recommended: Independent Components (tree-shaking)

This approach includes only the components you use in the final bundle of your application. There's no need to import styles, as each component imports its own.

Although you can customize the component names, we recommend using the same names as in the library to maintain consistency.

<div class="doc-notification">
  <div class="doc-notification__body">
    <p>Important: remember to import components from <b>'energy-components/components'</b> as shown below</p>
  </div>
</div>

Declaring Components Globally

// main.ts import { RDSButton, RDSTextField } from 'energy-components/components'; const app =
createApp(App); app.component('RDSButton', RDSButton); app.component('RDSTextField', RDSTextField);
app.mount('#app');

Declaring Components Locally

With this approach, you'll also only use the components you import. However, they will only be available within the component where you do the import.

// *.vue
<script setup lang="ts">
import { RDSButton } from 'energy-components/components'
</script>

Not Recommended: Entire Library

Due to the large number of components available in the library, using this approach may significantly increase your bundle size, affecting the performance of your application.

// main.ts import RDSLibrary from 'energy-components'; const app = createApp(App);
app.use(RDSLibrary);

Important: If you choose this method of importing the library, you must add an additional CSS file below the energy-foundations CSS.

Recommended in JS entry:

// main.ts
import 'energy-foundations/dist/style.css';
import 'energy-components/style';

Optional Sass alternative (do not mix both to avoid duplicates):

// src/styles/index.scss
@use 'energy-foundations/dist/style.scss';