energy-components v1.5.0
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 >= 0.0.10 or the latest.
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:
You need to import the energy-foundations styles in your application. If you haven't installed the library yet, follow this documentation.
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 in main.css, below the energy-foundations CSS.
// main.scss @import 'energy-foundations/dist/style.css'; @import 'energy-components/style';
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
10 months ago
11 months ago
11 months ago