# @virsas/vue-components

> Virsas Vue3 and/or Quasar2 component library

Latest version **0.1.49** (published 2023-12-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @virsas/vue-components
pnpm add @virsas/vue-components
yarn add @virsas/vue-components
bun add @virsas/vue-components
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.49 |
| Published | 2023-12-07 |
| First published | 2023-06-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 18.0.0 |
| Dependencies | 0 |
| Unpacked size | 35.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Stefan Moravcik |
| Maintainers | virsas |
| Keywords | Virsas, Components, Vue component library, Quasar component library, Vue 3, Vue, Quasar 2, Quasar |

## Links

- npm: https://www.npmjs.com/package/@virsas/vue-components
- Repository: https://github.com/virsas/lib-vue-components
- Homepage: https://github.com/virsas/lib-vue-components#readme
- Issues: https://github.com/virsas/lib-vue-components/issues
- npm.io page: https://npm.io/package/@virsas/vue-components

## Recent versions

- 0.1.49 (latest) — 2023-12-07
- 0.1.48 — 2023-12-07
- 0.1.47 — 2023-11-13
- 0.1.46 — 2023-11-02
- 0.1.45 — 2023-11-02
- 0.1.44 — 2023-11-02
- 0.1.43 — 2023-11-02
- 0.1.42 — 2023-11-01
- 0.1.41 — 2023-10-06
- 0.1.40 — 2023-09-28
- 0.1.39 — 2023-09-28
- 0.1.38 — 2023-09-28
- 0.1.37 — 2023-09-28
- 0.1.36 — 2023-09-28
- 0.1.35 — 2023-09-28
- … 32 more at https://npm.io/package/@virsas/vue-components/versions

## README

# @virsas/vue-components

Virsas Vue3 / Quasar2 component and utility library

## Installation

### Install

```bash
cd vue3_project
npm install @virsas/vue-components
npm run dev
```

### Use plugin (edit main.js file)

```js
import { createApp } from "vue";

import App from "./App.vue";
import virsas from "@virsas/vue-components";

import "./main.css";

const app = createApp(App);

app.use(virsas);
app.mount("#app");
```

### Usage (edit any .vue file)

```vue
<script setup>
const assetsURL = import.meta.env.VITE_ASSETS_URL;
</script>

<template>
  <q-layout view="hHh LpR fff">
    <q-page-container>
      <q-page>
        <div class="row justify-center q-py-xl">
          <div class="col-xs-10 col-sm-6 col-md-3 col-3">
            <VLogo
              :darkable="true"
              :assets-url="assetsURL + '/logo'"
              logo-name="main"
            />
          </div>
        </div>
        <div class="row justify-center">
          <div class="col-xs-10 col-sm-8 col-md-4 col-4">
            <div class="text-center">
              <router-view />
            </div>
          </div>
        </div>
      </q-page>
    </q-page-container>
  </q-layout>
</template>
```

### Usage of utilities

```js
import { defineStore } from "pinia";
import axios from "axios";

import { apiHeaders, notify } from "@virsas/vue-components";

const api = import.meta.env.VITE_API_URL;

export const useStore = defineStore("item", {
  state: () => ({
    items: [],
  }),
  actions: {
    async list() {
      try {
        const res = await axios.get(`${api}/items`, apiHeaders());
        this.items = res.data;
        return true;
      } catch (e) {
        notify({ message: `error.${e.response.data.error}` });
        return false;
      }
    },
  },
});
```

## Utilities List

### Content

- setMetadata

### Date

- stringToDate
- stringToDatetime
- stringToTime
- stringToTimestamp
- currentYear

### Header

- apiHeaders

### Notification

- notify

### Pagination

- pagedArray

### Time

- sleep

### Validation

- isValidEmail
- isValidTelephone
- isValidLength
- isValidConfirmation
- isGoodPassword

## Components List

### Elements

- VElementBreadcrumb
- VElementButton
- VElementIteem
- VElementLogo
- VElementTable

### Form

- VForm
- VFormDate
- VFormInput
- VFormSelect
- VFormCheckbox

### Page

- VPageHeader
- VPageLegal
- VPageLoading
- VPagePopup

## Individual components

### VElementLogo

#### Description

This component can be used to show a clickable or non clickable logo with configurable assets url, website to point to and image source for dark and light theme.

#### Props

| Prop Name     | Required | Default Value | Example value              |
| ------------- | -------- | ------------- | -------------------------- |
| assetsURL     | &#10003; |               | https://assets.example.org |
| logoName      | &#10003; |               | logo                       |
| logoExtencion | &#10005; | png           | jpg                        |
| websiteURL    | &#10005; |               | https://www.example.com    |
| websiteLocale | &#10005; |               | en-US                      |
| darkable      | &#10005; | false         | true                       |
| width         | &#10005; | 100%          | 50px                       |
| class         | &#10005; |               | q-mt-xl                    |

---
_Source: https://npm.io/package/@virsas/vue-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._