energy-components is a library of atomic components implemented using Vue3 + TypeScript technologies.
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.
You need Vue.js version 3.2+ to use this library.
It's also necessary to install energy-foundations on its latest version.
Yarn
``bash`
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.
`bash`
yarn add energy-foundations
NPM
`bash`
npm i energy-components
If you use npm version >=7.0.0, it will automatically install the energy-foundations library.
Import Foundations CSS once at app entry, before any component styles. If you haven't installed the library yet, follow
this documentation.
`ts`
// main.ts
import 'energy-foundations/dist/style.css';
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.
` Important: remember to import components from 'energy-components/components' as shown below
`vue`
// main.ts import { RDSButton, RDSTextField } from 'energy-components/components'; const app =
createApp(App); app.component('RDSButton', RDSButton); app.component('RDSTextField', RDSTextField);
app.mount('#app');
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`
// *.vue
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.
`vue`
// 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:
`ts`
// main.ts
import 'energy-foundations/dist/style.css';
import 'energy-components/style';
Optional Sass alternative (do not mix both to avoid duplicates):
`scss``
// src/styles/index.scss
@use 'energy-foundations/dist/style.scss';