@zafir.co.ao/lightray v1.0.0-beta.5

Lightray Vue Component Library

Lightray is a Vue component library designed for seamlessly managing content in the Antbox ECM server. With four meticulously crafted components, Lightray streamlines interactions with Antbox, making your development faster and more intuitive. Whether you're integrating a single component or utilizing the entire plugin, Lightray is here to illuminate the path for you.

Table of Contents

• Installation
• Quick Start
• Usage
  • Using Single Component
  • Using as a Plugin
• Components

Installation

Installing Lightray is a breeze, simply run the following command:

npm install @zafir.co.ao/lightray

Quick Start

1. To use Lightray in your Vue project, first, install the package:

   npm install @zafir.co.ao/lightray

2. Next, add the following line to your src/main.ts:

   import "@zafir.co.ao/lightray/style.css";

Usage

Import the desired component or the entire plugin.

Using Single Component

For importing specific components into your Single File Components (SFC):

<!-- Inside your .vue file-->

<script lang="ts" setup>
	import { LrHelloLight } from "@zafir.co.ao/lightray";
</script>

<template>
	<LrHelloLight />
</template>

Using as a Plugin

For a more holistic approach, where you'd like to use all of Lightray's offerings, you can integrate it as a plugin:

// main.ts

import { createApp } from "vue";

import "./style.css";
import App from "./App.vue";

import { LightrayPlugin } from "@zafir.co.ao/lightray";
import "@zafir.co.ao/lightray/style.css";

createApp(App).use(LightrayPlugin).mount("#app");

Components

LrDiscovery

The LrDiscovery component serves as an interface to the Antbox ECM server.

LrWebContent

The LrWebContent component is designed to display and optionally allow the edition of web content based on the provided language.

Events:

• edit: Emitted when the web content is edited.

LrHelloLight

The LrHelloLight component is a simple greeting component.

(This component does not have any properties.)

(Optional) Configure project as PWA

To configure your project as a PWA, follow the steps at Vite PWA.