AOSSIE-Org / AOSSIE-Org/SocialShareButton

Enhancement: Add Nuxt.js Integration — new wrapper component and demo page section

Đang mở
#48 4 bình luận 0 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
TypeScript
Star
25
Fork
64
Merge trung bình
2 ngày 11 giờ
Pull request đã merge (30 ngày)
1

Mô tả

## 🎯 Direction

SocialShareButton is a **lightweight, zero-dependency, framework-agnostic** social sharing component. The goal of this issue is to extend first-class support to Nuxt.js (the Vue meta-framework), which is SSR-first. Since Nuxt renders on the server, the wrapper **must guard all browser APIs** with `typeof window !== 'undefined'` checks and only initialize the button on the client side using `onMounted`.

📹 **See the button in action**: https://youtu.be/cLJaT-8rEvQ?si=CLipA0Db4WL0EqKM

---

## 📁 Files to Create / Modify

### ✅ New File: `src/social-share-button-nuxt.vue`

A Vue 3 Composition API component (compatible with Nuxt 3) wrapping the core vanilla JS library, following the same lifecycle pattern as `src/social-share-button-react.jsx`:

```vue

import { ref, onMounted, onBeforeUnmount, watch } from 'vue';

const props = defineProps({
url: { type: String, default: '' },
title: { type: String, default: '' },
description: { type: String, default: '' },
hashtags: { type: Array, default: () => [] },
via: { type: String, default: '' },
platforms: { type: Array, default: () => ['whatsapp', 'facebook', 'twitter', 'linkedin', 'telegram', 'reddit'] },
theme: { type: String, default: 'dark' },
buttonText: { type: String, default: 'Share' },
customClass: { type: String, default: '' },
onShare: { type: Function, default: null },
onCopy: { type: Function, default: null },
buttonStyle: { type: String, default: 'default' },
modalPosition: { type: String, default: 'center' }
});

const container = ref(null);
let shareButton = null;

onMounted(() => {
// SSR guard — Nuxt pre-renders on the server
if (typeof window !== 'undefined' && window.SocialShareButton) {
shareButton = new window.SocialShareButton({
container: container.value,
url: props.url || window.location.href,
title: props.title || document.title,
description: props.description,
hashtags: props.hashtags,
via: props.via,
platforms: props.platforms,
theme: props.theme,
buttonText: props.buttonText,
customClass: props.customClass,
onShare: props.onShare,
onCopy: props.onCopy,
buttonStyle: props.buttonStyle,
modalPosition: props.modalPosition
});
}
});

onBeforeUnmount(() => {
if (shareButton) {
shareButton.destroy();
shareButton = null;
}
});

// Sync prop changes to the underlying vanilla JS instance (e.g. Nuxt route changes)
watch(props, (newProps) => {
if (shareButton) {
shareButton.updateOptions(newProps);
}
}, { deep: true });
<\/script>
```

---

### ✅ Existing File: `index.html` — Add Nuxt.js Integration Section

Mirror the existing `⚛️ React Integration` section. Add a new section block with:
- Section heading: `💚 Nuxt.js Integration`
- Step 1: Include CSS and JS via CDN (same as Quick Start)
- Step 2: Register the component (auto-imported in Nuxt 3 if placed in `components/`)
- Step 3: Show usage in a `pages/index.vue` file

Example code snippet to display in the demo section:

```vue
<!-- pages/index.vue -->
<template>
<SocialShareButton
url="https://your-website.com"
title="Check this out!"
description="An amazing website"
theme="dark"
button-text="Share"
/>
</template>

<script setup>
// Component is auto-imported from components/ in Nuxt 3
<\/script>
```

---

## ✅ Acceptance Criteria

- [ ] `src/social-share-button-nuxt.vue` created using Vue 3 Composition API (`script setup`)
- [ ] SSR guard (`typeof window !== 'undefined'`) present on all browser API usages inside `onMounted`
- [ ] `onMounted` used for initialization, `onBeforeUnmount` calls `destroy()` to prevent memory leaks
- [ ] `watch(props, ...)` with `{ deep: true }` calls `updateOptions()` on prop changes
- [ ] Component works with Nuxt 3 auto-import when placed in the `components/` directory
- [ ] `index.html` updated with a Nuxt.js section containing install + usage code snippets
- [ ] Copy-to-clipboard button present on new code blocks in `index.html`
- [ ] README updated to list Nuxt.js as a supported framework

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.