Nuxt Social Share

https://nuxt-social-share.stefanobartoletti.it
Admin
Nuxt Social Share provides simple, customizable, and accessible social sharing buttons for Nuxt...
Tokens:4,996
Snippets:69
Trust Score:6.9
Update:4 months ago
Show doc for...
Tokens:
Raw
### Basic useSocialShare Composable

Source: https://nuxt-social-share.stefanobartoletti.it/usage/composable

Demonstrates the minimal required setup for the 'useSocialShare' composable, specifying the network property.

```javascript
<script setup>
// Basic minimal use, network property is required
const shareFacebook = useSocialShare({ network: 'facebook' })
</script>

```

--------------------------------

### Install Nuxt Social Share using npm

Source: https://nuxt-social-share.stefanobartoletti.it/getting-started

Add the Nuxt Social Share dependency to your project using npm.

```bash
npm install -D @stefanobartoletti/nuxt-social-share

```

--------------------------------

### Install Nuxt Social Share using pnpm

Source: https://nuxt-social-share.stefanobartoletti.it/getting-started

Add the Nuxt Social Share dependency to your project using pnpm.

```bash
pnpm i -D @stefanobartoletti/nuxt-social-share

```

--------------------------------

### Install Nuxt Social Share using Nuxi

Source: https://nuxt-social-share.stefanobartoletti.it/getting-started

Use this command to add the Nuxt Social Share module to your project via Nuxi.

```bash
npx nuxi@latest module add nuxt-social-share

```

--------------------------------

### Install Nuxt Social Share using yarn

Source: https://nuxt-social-share.stefanobartoletti.it/getting-started

Add the Nuxt Social Share dependency to your project using yarn.

```bash
yarn add -D @stefanobartoletti/nuxt-social-share

```

--------------------------------

### Tailwind v3 Build Error Example

Source: https://nuxt-social-share.stefanobartoletti.it/usage/styling-with-tailwind

This is an example of a build error that may occur when using Nuxt Social Share v2 with Tailwind v3 due to incompatible CSS layer implementations. It indicates that '@layer components' is used without a corresponding '@tailwind components' directive.

```bash
[plugin:vite:css] [postcss] /path/to/project/node_modules/@stefanobartoletti/nuxt-social-share/dist/runtime/SocialShare.vue?vue&type=style&index=0&lang.css:2:1: @layer components is used but no matching @tailwind components directive is present.

```

--------------------------------

### Customizing Label with Slot

Source: https://nuxt-social-share.stefanobartoletti.it/usage/component

Demonstrates how to use the 'label' slot to customize the text displayed on the social share button. This example iterates through networks and uses the network name as the label.

```html
<SocialShare
  v-for="network in ['facebook', 'x', 'linkedin', 'email']"
  :key="network"
  :network="network"
>
  <template #label>{{ network }}</template>
</SocialShare>
```

--------------------------------

### Localize Social Share Buttons to Italian

Source: https://nuxt-social-share.stefanobartoletti.it/examples/localization

This example shows how to override the default label and aria-label for social sharing buttons to display them in Italian. It iterates through several networks, setting a custom label via the #label slot and a dynamic aria-label.

```html
<SocialShare
  v-for="network in ['facebook', 'x', 'linkedin', 'email']"
  :key="network"
  :network="network"
  :aria-label="`Condividi con ${network}`"
>
  <template #label>Condividi</template>
</SocialShare>

```

--------------------------------

### Apply Tailwind Classes to SocialShare Component

Source: https://nuxt-social-share.stefanobartoletti.it/usage/styling-with-tailwind

Apply custom Tailwind CSS classes to the SocialShare component for styling. This example demonstrates rounded corners, transparent background, and border colors based on the network's brand color using the --color-brand CSS variable.

```html
<SocialShare
    network="facebook"
    :styled="true"
    class="rounded-full bg-transparent text-(--color-brand) border-2 border-(--color-brand)"
/>

```

--------------------------------

### Advanced useSocialShare Composable Options

Source: https://nuxt-social-share.stefanobartoletti.it/usage/composable

Illustrates how to configure the 'useSocialShare' composable with all available optional properties for advanced customization.

```javascript
<script setup>
// All possible options
const shareFacebook = useSocialShare({
  network: 'facebook', // Required!
  url: 'https://www.example.com', // Optional, defaults to current page URL if not provided
  title: 'My Custom Title', // Optional, available on networks supporting it
  user: 'twitter_user', // Optional, available on networks supporting it
  hashtags: 'list,of,hashtags', // Optional, available on networks supporting it
  image: 'https://www.example.com/path/to/image.jpg', // Optional, available on networks supporting it
})
</script>

```

--------------------------------

### Netlify Dynamic baseUrl Configuration

Source: https://nuxt-social-share.stefanobartoletti.it/examples/dynamic-baseurl

Configure 'baseUrl' using Netlify's environment variable 'URL'. Provides a fallback for local development.

```typescript
export default defineNuxtConfig({

  socialShare: {
    baseUrl: process.env.URL || 'http://localhost:3000',
  }

})
```

--------------------------------

### Vercel Dynamic baseUrl Configuration

Source: https://nuxt-social-share.stefanobartoletti.it/examples/dynamic-baseurl

Configure 'baseUrl' using Vercel's environment variable 'VERCEL_PROJECT_PRODUCTION_URL'. Note that Vercel provides only the hostname, so 'https://' must be prepended. Includes a fallback for local development.

```typescript
export default defineNuxtConfig({

  socialShare: {
    // Vercel provides only the hostname, without the initial 'https://'
    baseUrl: `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}` || 'http://localhost:3000',
  }

})
```

--------------------------------

### Basic Component Usage

Source: https://nuxt-social-share.stefanobartoletti.it/usage/component

Demonstrates the basic usage of the SocialShare component for different social networks. Each network requires its own instance of the component.

```html
<SocialShare network="facebook" />

<SocialShare network="x" />

<SocialShare network="linkedin" />
```

--------------------------------

### Environment Variable for baseUrl

Source: https://nuxt-social-share.stefanobartoletti.it/examples/dynamic-baseurl

Use an environment variable to dynamically set the 'baseUrl'. This allows for different URLs based on the deployment environment (local, staging, production). Includes a fallback for local development.

```dotenv
SITE_BASE_URL=https://www.yoursiteurl.com
```

```typescript
export default defineNuxtConfig({

  socialShare: {
    baseUrl: process.env.SITE_BASE_URL || 'http://localhost:3000',
  }

})
```

--------------------------------

### Render Dynamic baseUrl Configuration

Source: https://nuxt-social-share.stefanobartoletti.it/examples/dynamic-baseurl

Configure 'baseUrl' using Render's environment variable 'RENDER_EXTERNAL_URL'. Provides a fallback for local development.

```typescript
export default defineNuxtConfig({

  socialShare: {
    baseUrl: process.env.RENDER_EXTERNAL_URL || 'http://localhost:3000',
  }

})
```

--------------------------------

### Basic Social Share Component Usage

Source: https://nuxt-social-share.stefanobartoletti.it/

Demonstrates how to use the SocialShare component to generate sharing buttons for multiple social networks. Ensure the component is imported and available in your template.

```vue
<SocialShare
  v-for="network in ['facebook', 'x', 'linkedin', '...']"
  :key="network"
  :network="network"
  :styled="true"
/>

```

--------------------------------

### Customizing Component with Props

Source: https://nuxt-social-share.stefanobartoletti.it/usage/component

Shows how to customize the SocialShare component's appearance and behavior using props like 'styled' and 'label'.

```html
<SocialShare network="facebook" :styled="true" :label="false" />
```

--------------------------------

### Nuxt Social Share Module Configuration

Source: https://nuxt-social-share.stefanobartoletti.it/getting-started/options

Configure the Nuxt Social Share module by setting the `socialShare` key in your `nuxt.config.ts`. The `baseUrl` is a required option for constructing shareable URLs.

```typescript
export default defineNuxtConfig({
  // module options
  socialShare: {
    baseUrl: 'https://www.yoursite.com' // required!
    // other optional module options
  }
})
```

--------------------------------

### Output Structure of useSocialShare

Source: https://nuxt-social-share.stefanobartoletti.it/usage/composable

Shows the structure of the object returned by the 'useSocialShare' composable, including network name, share URL, icon data, and brand color.

```json
{
  "name": "facebook", // Name of the selected social network
  "shareUrl": "https://www.facebook.com/sharer/sharer.php?u=https://www.example.com", // Sharing url
  "icon": {
    "viewBox": "0 0 24 24",
    "path": "M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"
  }, // SVG Icon attributes
  "color": "#0866FF" // Main brand color of the selected network
}

```

--------------------------------

### Basic baseUrl Configuration

Source: https://nuxt-social-share.stefanobartoletti.it/examples/dynamic-baseurl

Set a static URL for the 'baseUrl' option in your nuxt.config.ts file. This is the simplest way to configure the base URL for social sharing links.

```typescript
export default defineNuxtConfig({

  socialShare: {
    baseUrl: 'https://www.yoursiteurl.com'
  }

})
```

--------------------------------

### Outlined Social Share Buttons

Source: https://nuxt-social-share.stefanobartoletti.it/examples/custom-styling

Applies custom CSS to create outlined buttons with a brand color. Styles are scoped to prevent conflicts.

```vue
<template>
  <div class="share-buttons">
    <SocialShare
      v-for="network in ['facebook', 'x', 'linkedin']"
      :key="network"
      :network="network"
    />
  </div>
</template>

<style scoped>
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.social-share-button {
  color: var(--color-brand);
  border: 2px solid var(--color-brand);
  padding: 0.5rem 0.75rem;
}

.social-share-button:hover {
  background-color: var(--color-brand);
  color: white;
}
</style>
```

--------------------------------

### Rendered HTML Structure

Source: https://nuxt-social-share.stefanobartoletti.it/usage/component

Illustrates the default minimal HTML structure rendered by the SocialShare component, including classes, attributes, and placeholders for dynamic content.

```html
<a
  class="social-share-button social-share-button--{network}"
  href="{share url}"
  style="--color-brand: {network brand color};"
  aria-label="Share with {network}"
  rel="nofollow noopener noreferrer"
  target="_blank"
>
  <svg class="social-share-button__icon">{...}</svg>
  <span class="social-share-button__label">Share</span>
</a>
```

--------------------------------

### Configure Nuxt Social Share Base URL

Source: https://nuxt-social-share.stefanobartoletti.it/getting-started

Set your website's base URL in the module options within nuxt.config.ts. This is a required configuration.

```typescript
export default defineNuxtConfig({
  // module options
  socialShare: {
    baseUrl: 'https://www.yoursite.com' // required!
    // other optional module options
  }
})

```

--------------------------------

### Customizing Icon with Slot

Source: https://nuxt-social-share.stefanobartoletti.it/usage/component

Illustrates using the 'icon' slot to provide custom icons for the social share buttons. This can be done with raw SVG markup or by using icon components like those from NuxtIcon.

```html
<!-- Custom icon -->
<SocialShare
  v-for="network in ['facebook', 'x', 'linkedin', 'email']"
  :key="network"
  :network="network"
>
  <!-- Either with a custom SVG ... -->
  <template #icon><svg>{...}</svg></template>
  <!-- ... OR with a component, i.e. from NuxtIcon -->
  <template #icon><Icon name="mdi:${network}" /></template>
</SocialShare>
```

--------------------------------

### Colorizing Social Share Icons on Hover

Source: https://nuxt-social-share.stefanobartoletti.it/examples/custom-styling

Styles buttons to show only icons and changes their color on hover using CSS. Ensures a clean, interactive look.

```vue
<template>
  <div class="share-buttons">
    <SocialShare
      v-for="network in ['facebook', 'x', 'linkedin']"
      :key="network"
      :network="network"
      :label="false"
    />
  </div>
</template>

<style scoped>
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.social-share-button {
  color: #63738a;
  padding: 1rem;
}

.social-share-button:hover {
  color: var(--color-brand);
}
</style>
```

--------------------------------

### Square Social Share Buttons (Icons Only)

Source: https://nuxt-social-share.stefanobartoletti.it/examples/custom-styling

Creates square-shaped buttons that display only the icon, without labels. Uses aspect ratio to maintain square shape.

```vue
<template>
  <div class="share-buttons">
    <SocialShare
      v-for="network in ['facebook', 'x', 'linkedin']"
      :key="network"
      :network="network"
      :styled="true"
      :label="false"
    />
  </div>
</template>

<style scoped>
.share-buttons {
  display: flex;
  flex-wrap: wrap;
}

.social-share-button {
  color: #fff;
  padding: 1rem;
  aspect-ratio: 1;
  border-radius: 0;
}
</style>
```

--------------------------------

### Iterating SocialShare Component

Source: https://nuxt-social-share.stefanobartoletti.it/examples/multiple-buttons

Use `v-for` to create multiple social share buttons for different networks. This is a simple way to display buttons for Facebook, X, LinkedIn, and email.

```vue
<SocialShare
  v-for="network in ['facebook', 'x', 'linkedin', 'email']"
  :key="network"
  :network="network"
  :styled="true"
/>


```

--------------------------------

### Add Nuxt Social Share to nuxt.config.ts

Source: https://nuxt-social-share.stefanobartoletti.it/getting-started

Manually add the Nuxt Social Share module to the 'modules' section in your nuxt.config.ts file if Nuxi did not add it automatically.

```typescript
export default defineNuxtConfig({
  modules: [
    '@stefanobartoletti/nuxt-social-share'
  ],
})

```

--------------------------------

### Reusable Share Buttons Component

Source: https://nuxt-social-share.stefanobartoletti.it/examples/multiple-buttons

Create a custom Vue component to encapsulate multiple social share buttons. This promotes code reuse and visual consistency throughout your project. It includes custom styling and labels.

```vue
<template>
  <div class="flex gap-2 justify-center flex-wrap">
    <SocialShare
      v-for="network in ['facebook', 'x', 'linkedin', 'email']"
      :key="network"
      :network="network"
      :styled="true"
      :label="false"
      class="rounded-none"
    />
  </div>
</template>


```
Tokens:
Raw