fix!: add required baseUrl module option

It is now required to set a `baseUrl` option, to fix cases where `useRequesUrl` would return
`localhost` as the site URL.

README.md

@@ -26,7 +26,7 @@ Simple Social Sharing for Nuxt 3
 - A `useSocialShare` composable is exposed, to provide even more flexibility if needed
 - Many major social networks supported
 
-## 🛠️ Quick Setup
+## 🛠️ Setup & Configuraton
 
 1. Add `@stefanobartoletti/nuxt-social-share` dependency to your project
 
@@ -42,14 +42,32 @@ export default defineNuxtConfig({
   modules: [
     '@stefanobartoletti/nuxt-social-share'
   ],
-  // optional configuration, should be added manually
+})
+```
+
+3. Configure the module options to your needs:
+
+```ts
+export default defineNuxtConfig({
+  // configuration options
   socialShare: {
-    // module options
+    baseUrl: 'https://www.yoursite.com' // required!
+    // other optional module options
   }
 })
 ```
 
-That's it! You can now use Nuxt Social Share in your Nuxt app ✨
+Available options:
+
+| Name | Required | Type | Default | Notes |
+| ---- | -------- | ---- | ------- | ----- |
+| `baseUrl` | `Yes` | `String` | `''` | This is the base URL of your website, likely the address of the homepage. **It is required**, all URLs to be shared will be built as relative paths to this. |
+| `styled` | `No` | `Boolean` | `false` | Whether the `<SocialShare>` components should be styled or not. It is `false` by default to allow for easier custom styling (*). |
+| `label`  | `No` | `Boolean` | `true`  | Whether the text label in the `<SocialShare>` components should be rendered or not (*). |
+| `icon`  | `No` | `Boolean` | `true`  | Whether the icon in the `<SocialShare>` components should be rendered or not (*). |
+
+> [!TIP]
+> (*) It can be set also on a single component level via props, but it is usually better to set this from the module options to create your defaults, and override it with props only if needed.
 
 ## 🎨 Using the `<SocialShare>` component
 
@@ -227,30 +245,6 @@ It will return the following object:
 
 You can then use some or all the returned properties, according to your project setup and requirements.
 
-## 🎛️ Configuration
-
-Module options can be set from the `socialShare` key in `nuxt.config.ts`:
-
-```ts
-export default defineNuxtConfig({
-  // optional configuration
-  socialShare: {
-    // module options
-  }
-})
-```
-
-Available options:
-
-| Name | Type | Default | Notes |
-| ---- | ---- | ------- | ----- |
-| `styled` | `Boolean` | `false` | Whether the `<SocialShare>` components should be styled or not. It is `false` by default to allow for easier custom styling (*).                                      |
-| `label`  | `Boolean` | `true`  | Whether the text label in the `<SocialShare>` components should be rendered or not (*). |
-| `icon`  | `Boolean` | `true`  | Whether the icon in the `<SocialShare>` components should be rendered or not (*). |
-
-> [!TIP]
-> (*) It can be set also on a single component level via props, but it is usually better to set this from the module options to create your defaults, and override it with props only if needed.
-
 ## ↗️ Supported networks
 
 A list of the currently supported networks and of their URL parameters

playground/nuxt.config.ts

@@ -7,6 +7,8 @@ export default defineNuxtConfig({
   socialShare: {
     // styled: true,
     // label: false,
+    // icon: false,
+    baseUrl: 'https://stefanobartoletti.github.io/nuxt-social-share/',
   },
 
   devtools: { enabled: true },

src/module.ts

@@ -3,6 +3,7 @@ import { defu } from 'defu'
 
 // Module options TypeScript interface definition
 export interface ModuleOptions {
+  baseUrl?: string
   styled?: boolean
   label?: boolean
   icon?: boolean
@@ -15,6 +16,7 @@ export default defineNuxtModule<ModuleOptions>({
   },
   // Default configuration options of the Nuxt module
   defaults: {
+    baseUrl: '',
     styled: false,
     label: true,
     icon: true,

src/runtime/SocialShare.vue

@@ -36,11 +36,11 @@ const props = defineProps({
   image: { type: String, default: undefined },
 })
 
-const options = useRuntimeConfig().public.socialShare
+const moduleOptions = useRuntimeConfig().public.socialShare
 
-const isStyled = props.styled !== undefined ? props.styled : options.styled
-const isLabeled = props.label !== undefined ? props.label : options.label
-const hasIcon = props.icon !== undefined ? props.icon : options.icon
+const isStyled = props.styled !== undefined ? props.styled : moduleOptions.styled
+const isLabeled = props.label !== undefined ? props.label : moduleOptions.label
+const hasIcon = props.icon !== undefined ? props.icon : moduleOptions.icon
 
 const selectedNetwork = useSocialShare({
   network: props.network,

src/runtime/useSocialShare.ts

@@ -1,7 +1,7 @@
 import type { Options } from './types/'
 
 import { networksIndex } from './networksIndex'
-import { ref, useRequestURL } from '#imports'
+import { computed, ref, useRoute, useRuntimeConfig } from '#imports'
 
 const defaultOptions = {
   network: '',
@@ -14,12 +14,25 @@ const defaultOptions = {
 
 export function useSocialShare(options: Options = defaultOptions) {
   const { network, url, title, user, hashtags, image } = options
+  const moduleOptions = useRuntimeConfig().public.socialShare
 
   // Get network. Using a shallow copy to avoid mutating the original object
   const selectedNetwork = ref({ ...networksIndex[network] })
 
   // Set default value for url if not provided from options
-  const pageUrl = url !== undefined ? url : useRequestURL().href
+
+  const pageUrl = computed(() => {
+    if (url !== undefined) {
+      return url
+    }
+
+    if (moduleOptions.baseUrl !== '') {
+      const baseUrl = moduleOptions.baseUrl.replace(/\/$/, '')
+      return `${baseUrl}${useRoute().fullPath}`
+    }
+
+    return ''
+  })
 
   // Build full share raw url
   const shareUrl = selectedNetwork.value.shareUrl
@@ -32,7 +45,7 @@ export function useSocialShare(options: Options = defaultOptions) {
 
   // Replace placeholders with actual values
   fullUrl = fullUrl
-    .replace(/\[u\]/i, pageUrl)
+    .replace(/\[u\]/i, pageUrl.value)
     .replace(/\[t\]/i, title || '')
     .replace(/\[uid\]/i, user || '')
     .replace(/\[h\]/i, hashtags || '')