eVISO UI Library 3.0

A collection of ready to use UI elements offering out of the box functionality and styling in accordance with eVISO's enterprise design standards.

Contents

• Components
• Technical Requirements
• Use
  • Install
  • Configure
• Contribute
  • Install
  • Develop

Components

You can find a list of all components and their documentation here.

Technical Requirements

The eVISO UI Library was developed with:

• Node v22
• Vue.js v3
• Vuetify
• FontAwesome Icons v7
• Vue I18n v11
• Moment.js

Note: If your project is not using any of the above, we don't guarantee a successful integration of the library.

Use

This section explains how to setup the eVISO UI Library on your project.

Install

Use the package manager npm to install eviso-ui-library.

npm install eviso-ui-library-3

If you prefer, you can also use yarn to install it.

yarn add eviso-ui-library-3

Configure

If you've a Nuxt project create a Nuxt Plugin as follows:

// plugins/eviso-ui-library-3.js
import { defineNuxtPlugin } from '#app'
import EvisoUILibrary3 from 'eviso-ui-library-3'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(EvisoUILibrary3)
})

And add the plugin to the nuxt.config.js file:

// nuxt.config.js
css: [
    'eviso-ui-library-3/dist/eviso-ui-library-3.css',
  ],
build: {
    transpile: [
      'eviso-ui-library-3'
    ]
  },

Now you're all set to use the components everywhere in your project! 🎉

Thank you for using our library :star:

Contribute

This section explains how to contribute to the development of eVISO UI Library.

Install

Use git to clone this repository into your computer.

git clone https://gitlab.com/wsenergia/apps-acceleration/app-integrations/eviso-ui-library-3.0.git

Make sure you're using Node version 22.

nvm use 22
nvm list

Use the package manager npm to install all dependencies.

npm install

Develop

When you're ready to start contributing, create a feature branch based on staging and start developing.

Run the code to render a default page defined in App.vue and start developing new components.

npm run dev

If you would like to merge a new feature into staging please request our approval before merging.

Test

Make sure to test the package locally before publishing. To do so execute the following commands on the package folder:

npm run build
npm link

On the project's folder in which you would like to test the package you'll need to link to the package.

npm link <path-to-library-folder>/eviso-ui-library-3

If you run the project locally you should be able to test the package.

Publish

To publish the package, the first thing you need to do is to update its version on package.json file. To do so follow the Semantic Versioning convention.

Afterwards, build your package successfully and confirm that a folder named dist was generated in the root of your package's folder tree shown as follows.

npm run build

- dist
  -- eviso-ui-library-3.css
  -- eviso-ui-library-3.es.js
  -- eviso-ui-library-3.umd.js

Finally, publish your package to NPM.

npm publish

Thank you for collaborating :star: