Vue Feed Widget

A Vue 3 widget for displaying feeds and activities with real-time socket updates.

Features

• 🔐 Authentication with client id/secret
• 📡 Real-time updates via Socket.IO
• 📱 Responsive design
• 🎨 Customizable styling
• 📊 Separate feeds and activities tabs
• ⚡ Automatic reconnection handling
• 🔔 Visual indicators for new items

Installation

npm install vue-feed-widget

Usage

Import and Register Globally

import { createApp } from 'vue';
import App from './App.vue';
import FeedWidget from 'vue-feed-widget';
import 'vue-feed-widget/dist/feed-widget.css';

const app = createApp(App);
app.use(FeedWidget);
app.mount('#app');

Import Component Locally

<template>
  <FeedWidget
    :client-id="ClientId"
    :client-secret="ClientSecret"
    :environment-id="environmentId"
    :organization-id="organizationId"
    title="My Feeds"
  />
</template>

<script>
import { FeedWidget } from 'vue-feed-widget';
import 'vue-feed-widget/dist/feed-widget.css';

export default {
  components: {
    FeedWidget
  },
  data() {
    return {
      clientId: 'your-client-id',
      ClientSecret: 'your-client-secret',
      environmentId: 'environment-id',
      organizationIdL 'organization-id'
    };
  }
};
</script>

Composition API (Script Setup)

<template>
  <FeedWidget
    :client-id="ClientId"
    :client-secret="ClientSecret"
    :environment-id="environmentId"
    :organization-id="organizationId"
    title="My Feeds"
  />
</template>

<script setup>
import { ref } from 'vue';
import { FeedWidget } from 'vue-feed-widget';
import 'vue-feed-widget/dist/feed-widget.css';

const ClientId = ref('your-client-id');
const privateKey = ref('your-client-secret');
const environmentId = ref('your-environment-id');
const organizationId = ref('your-organization-id');
</script>

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | ClientId | String | Yes | - | Client ID for authentication | | ClientSecret | String | Yes | - | Client Secret for authentication | | EnvironmentId | String | Yes | - | Environment Id for authentication | | OrganizationId | String | Yes | - | Organization Id for authentication | | title | String | No | 'Feed & Activities' | Widget title |

API Endpoints

The widget expects the following API endpoints:

Authentication

• POST /auth
  • Body: { ClientId, ClientSecret, EnvironmentId, OrganizationId }
  • Response: { token: 'jwt-token' }

Get Feeds

• GET /feeds
  • Headers: Authorization: Bearer {token}
  • Response: { feeds: [...] } or [...]

Get Activities

• GET /activities
  • Headers: Authorization: Bearer {token}
  • Response: { activities: [...] } or [...]

Socket Events

The widget listens for the following socket events:

Incoming Events

• new_feed - New feed item created
• new_activity - New activity item created
• feed_update - Existing feed updated
• feed_delete - Feed deleted

Event Data Structure

Feed Object

{
  id: 'unique-id',
  title: 'Feed Title',
  content: 'Feed content',
  author: 'Author Name',
  timestamp: '2024-01-01T00:00:00Z',
  createdAt: '2024-01-01T00:00:00Z'
}

Activity Object

{
  id: 'unique-id',
  description: 'Activity description',
  content: 'Activity content',
  timestamp: '2024-01-01T00:00:00Z',
  createdAt: '2024-01-01T00:00:00Z'
}

Using Services Directly

You can also use the API and Socket services independently:

import { ApiService, SocketService } from 'vue-feed-widget';

// API Service
const apiService = new );
await apiService.authenticate('client-id', 'client-secret', 'environment-id', 'organization-id');
const feeds = await apiService.getFeeds();
const activities = await apiService.getActivities();

// Socket Service
const socketService = new SocketService();
socketService.on('new_feed', (data) => {
  console.log('New feed:', data);
});
socketService.connect('https://socket.example.com', token);

Development

Setup

npm install

Build

npm run build

Development Mode

npm run dev

Styling

The widget comes with default styling, but you can override it with custom CSS:

/* Override widget styles */
.feed-widget {
  max-width: 800px;
}

.widget-title {
  color: #your-color;
}

/* And so on... */

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT