AOSSIE-Org / AOSSIE-Org/SocialShareButton

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

Open
#48 4 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
25
Forks
64
Avg merge
2d 11h
Merged PRs (30d)
1

Description

## 🎯 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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.