Guides
Start typing to search…

Front-End Library

The Worklio Embedded Payroll Front-End (WEP FE) library is a versatile tool for Front-End developers. It streamlines interactions with the WEP API, enabling the effortless integration of a native U.S. Payroll solution into your codebase.

Getting Started

This section walks you through access, setup, and a quick local run so you can verify everything works end to end.

  1. Contact Worklio support to request access to the private GitHub repository: worklio.com/contact-us.
  2. Ensure prerequisites are installed (Node.js 22.x from nodejs.org).
  3. Clone the repository locally.
  4. Install dependencies with npm ci.

Requirements

These are the minimum versions and dependencies expected by the repo and component packages.

  • Node.js 22.x (download from nodejs.org)
  • Vue 3.5+ for @worklio/wep-vue
  • React 18.3+ for @worklio/wep-react
  • @googlemaps/js-api-loader when using address autocomplete features

Your bundler must be able to resolve CSS imports from node_modules.

Packages

Library packages are the production-ready libraries you integrate into your app.

  • packages/wep: Core types, enums, API utilities, and shared helpers.
  • packages/wep-vue: Vue components and forms.
  • packages/wep-react: React components and forms.

Playground packages are example apps to explore components in a real flow.

  • packages/playground: Shared functionality for playgrounds.
  • packages/playground-vue: Vue app example.
  • packages/playground-react: React app example.

Repository Setup

Use npm ci for a clean, repeatable install that matches the lockfile.

npm ci

Build Library and Run Playgrounds

Vue

npm run build -w @worklio/wep -w @worklio/wep-vue
npm run dev -w playground-vue

React

npm run build -w @worklio/wep -w @worklio/wep-react
npm run dev -w playground-react

Usage

Start with a simple field to verify rendering and bindings in your framework.

Vue

<script setup lang="ts">
import { ref } from 'vue';
import { WepFormField, WepTextBox } from '@worklio/wep-vue';

const value = ref('');
</script>

<template>
  <WepFormField label="Display name">
    <WepTextBox v-model="value" />
  </WepFormField>
</template>

React

import { WepFormField, WepTextBox } from '@worklio/wep-react';

export function Example() {
  return (
    <WepFormField label="Display name">
      <WepTextBox value="" onValueUpdate={() => {}} />
    </WepFormField>
  );
}

Component Documentation

Story-driven documentation lives next to the components and can be viewed through stories. You can run them locally or use the published sites:

Vue components and forms

npm run story -w @worklio/wep-vue

React components and forms

npm run story -w @worklio/wep-react

Recommended IDE Setup

These tools provide the best editing and TypeScript experience for this repo.

Updated 9 days ago