vue-unif-js v1.1.3

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

Events

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