RDS Vue 3:

RDS-vue3 es la librería de componentes basada en los estilos de Repsol Design Sistem implementada en la tecnología Vue3 + typescript para aprovechar las ventajas de ambas y poder construir las aplicaciones web corporativas mucho más rápido.

En ella podemos encontrar un amplio catálogo de componentes atómicos listos para usarse, cuya documentación se puede encontrar en este mismo portal.

Para su funcionamiento, rds-vue3 a su vez integra otras librerías desarrolladas por el equipo de modelo de gobierno como son rds-foundations y rds-components

Features

• Build tool Vite
• TypeScript build tool
• Framework Vue 3
• Type system TypeScript / Vue tsc
• Vue SFC (Single File Components) Setup script setup

Quick start

Necesitas Vue.js versión 3.2+ para usar esta biblioteca.

Yarn (recomendado) Para instalar la biblioteca usando yarn, ejecuta el siguiente comando:

yarn add rds-vue3

Instalación via npm Para instalar la biblioteca usando npm, ejecuta el siguiente comando:

npm i rds-vue3

Uso

Puedes importar la biblioteca dependiendo de las necesidades de tu proyecto. Importa todos los componentes globalmente, importa componentes individuales globalmente o importa componentes individuales donde se utilizan.

Declarar todos los componentes globalmente

// archivo -> main.ts import RDSLibrary from 'rds-vue3';
const app = createApp(App); app.use(RDSLibrary);

Declarar componentes globales (Treeshaking)

// archivo -> main.ts import { RDSButton } from 'rds-vue3';
const app = createApp(App); app.component('RDSButton',
RDSButton);

Declarar componentes localmente

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

Cargar estilos: recomenadmos cargarlos en otra hoja de estilos, por ejemplo en main.scss

// main.scss @import 'rds-vue3/style';

Y a su vez, este debe ir en el fichero app.vue, sin el atributo scoped:

<style lang="scss" src="./styles/main.scss"></style>