# vue-unif-js

> Vue components to use unif-js

Latest version **1.1.3** (published 2019-11-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-unif-js
pnpm add vue-unif-js
yarn add vue-unif-js
bun add vue-unif-js
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2019-11-15 |
| First published | 2019-11-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Fernando Franco |
| Maintainers | selfirius |

## Links

- npm: https://www.npmjs.com/package/vue-unif-js
- Repository: https://github.com/FernandoFranco/vue-unif-js
- Homepage: https://github.com/FernandoFranco/vue-unif-js#readme
- Issues: https://github.com/FernandoFranco/vue-unif-js/issues
- npm.io page: https://npm.io/package/vue-unif-js

## Recent versions

- 1.1.3 (latest) — 2019-11-15
- 1.1.2 — 2019-11-15
- 1.1.1 — 2019-11-14
- 1.1.0 — 2019-11-14
- 1.0.1 — 2019-11-11
- 1.0.0 — 2019-11-11

## README

# vue-unif-js

A [VueJS](https://vuejs.org) plugin to use [unif-js](https://github.com/FernandoFranco/unif-js).

# Installation

```javascript
npm install vue-unif-js --save

// or

yarn add vue-unif-js
```

Add file `plugins/unif-js.js` in `src` of the project.
```javascript
// unif-js.js
import Vue from 'vue';
import VueUnifJS from 'vue-unif-js';

Vue.use(VueUnifJS, {
  fullPage: true, // The html, body and u-content in height 100%
});
```

Add line in `main.js`
```javascript
import './plugins/unif-js';
```

# Componentes

This plugin contains 2 components, u-container and u-session.

## UContainer

The component u-container is root element to use unif-js.  

Your Component.vue:
```html
<template>
  <u-container router>
    <view-first-session />
    <view-second-session />
  </u-container>
</template>

<script>
import ViewFirstSession from './views/FirstSession.vue';
import ViewSecondSession from './views/SecondSession.vue';

export default {
  components: {
    ViewFirstSession,
    ViewSecondSession,
  },
};
</script>
```

### Using Vue Router

If you get controll session by Vue Router, set the route like this:

```javascript
const routes = [
  // Any another routes before
  {
    path: '/login',
    component: Components,
  },
  // Route with sessions
  {
    path: '/',
    component: Home,
    children: [{ path: ':session', name: 'unifjs' }], // Important name unifjs
  },
  // Redirect
  {
    path: '*',
    redirect: '/',
  },
];
```

### Props

| Prop                  | Type    | Default   | Description                                 |
| --------------------- | ------- | --------- | ------------------------------------------- |
| value                 | String  | undefined | The current session identifier              |
| router                | Boolean | false     | Use the Vue Router to controll sessions     |
| tag                   | String  | 'div'     | The tag of content                          |
| disable-hash          | Boolean | false     | Disable hash navigation                     |
| disable-wheel         | Boolean | false     | Disable capture wheel events                |
| disable-touch         | Boolean | false     | Disable capture touch events                |
| disable-keys          | Boolean | false     | Disable capture any key events              |
| disable-arrow-keys    | Boolean | false     | Disable arrow up and arrow down keys events |
| disable-page-keys     | Boolean | false     | Disable page up and page down keys events   |
| disable-space-bar-key | Boolean | false     | Disable space bar key event                 |
| disable-home-end-keys | Boolean | false     | Disable home and end keys events            |

### Events

| Event  | Value                                | Description        |
| ------ | ------------------------------------ | ------------------ |
| input  | String                               | Session Identifier |
| change | Object { from: String , to: String } | Changed session    |

## USession

The component u-session is a session of content in page.  

The session is a component like this:
```html
// ./views/FirstSession.vue
<template functional>
  <u-session id="about" fill-height>
    <h1>First Session</h1>
  </u-session>
</template>
```

### Props

| Prop        | Type    | Default | Description                          |
| ----------- | ------- | ------- | ------------------------------------ |
| id          | String  | 'page#' | Change the hash in url if is enabled |
| fill-height | Boolean | false   | The session contains height 100%     |

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