vue-unif-js

1.1.3 • Public • Published

vue-unif-js

A VueJS plugin to use unif-js.

Installation

npm install vue-unif-js --save

// or

yarn add vue-unif-js

Add file plugins/unif-js.js in src of the project.

// 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

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:

<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:

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:

// ./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%

Readme

Keywords

none

Package Sidebar

Install

npm i vue-unif-js

Weekly Downloads

3

Version

1.1.3

License

MIT

Unpacked Size

8.47 kB

Total Files

7

Last publish

Collaborators

  • selfirius