Platform360 User Vue Plugin

Overview

This Vue plugin facilitates streamlined access to user data via $jwtUser and $user global variables, fetches user data once and clears the user cache upon logout.

Installation

npm install @kocdigital/p360-user-vue-plugin

yarn add @kocdigital/p360-user-vue-plugin

or

yarn add git+https://github.com/kocdigital/p360-user-vue-plugin.git

npm install git+https://github.com/kocdigital/p360-user-vue-plugin.git

Usage

After installation, you can import the plugin in your Vue application as follows:

import Vue from 'vue';
import user from '@kocdigital/p360-user-vue-plugin';

Vue.use(user);

Access user models to customize user or jwt user data:

import Vue from 'vue';
import user from '@kocdigital/p360-user-vue-plugin';
import {User as DefaultUser} from '@kocdigital/p360-user-vue-plugin/models';

export class MyCustomUser extends DefaultUser {
  // Your customizations here
}

Vue.use(user, {
  CustomUser: MyCustomUser
});

import Vue from 'vue';
import user from '@kocdigital/p360-user-vue-plugin';
import {JwtUser as DefaultJwtUser} from '@kocdigital/p360-user-vue-plugin/models';

export class MyCustomJwtUser extends DefaultJwtUser {
  // Your customizations here
}

Vue.use(user, {
  CustomJwtUser: MyCustomJwtUser
});

Customize the user fetching logic by providing your own fetchUserById function:

import Vue from 'vue';
import user from '@kocdigital/p360-user-vue-plugin';

import type {IUser} from '@kocdigital/p360-user-vue-plugin/models';

Vue.use(user, {
  fetchUserById: async (userId): Promise<IUser> => {
    // Your custom fetch logic here
    const response = await fetch(`/api/users/${userId}`);
    const data: IUser = await response.json();

    return data; // Must return `IUser`, otherwise throw type error
  }
});

Customize user cache target by providing storage options:

   import Vue from 'vue';
   import user from '@kocdigital/p360-user-vue-plugin';
 
   Vue.use(user, {
     storage: sessionStorage, // default is `localStorage`
     storageKey: 'my-custom-user-cache' // default is "x-user"
   });

Contributing

If you would like to contribute to this project, please fork the repository and submit a pull request with your changes.

Prerequisites

• Install Node.js 18.x
• Install npm (included with Node.js).

Setup

1. Clone the repository:

   git clone https://github.com/kocdigital/p360-user-vue-plugin.git
   cd p360-user-vue-plugin

2. Install the dependencies:

   npm install

Building the Plugin

To build the plugin, you can use the following commands:

• One-time build:

  npm run build

• Continuous build:

  npm run dev

The npm run build command will create a production-ready build of the plugin, while npm run dev will run the build in watch mode, rebuilding automatically on changes.

Linking with npm

To link this vue plugin with your main application using npm, follow these steps:

1. In the root directory of the plugin, run:

   npm link

2. Navigate to your main application directory:

   cd path/to/your/main/application

3. Link the plugin to your main application:

   npm link "@kocdigital/p360-user-vue-plugin"

4. Now you can develop features or fix bugs in the plugin and see the changes reflected in your main application without needing to publish the plugin to npm.