nuxt-nitropay
v1.0.9
Published
Nitropay Ad Module for Nuxt.js
Downloads
27
Readme
Nuxt Nitropay
A Nitropay Ads module for nuxt
Features
- ✨ One stop shop for setting up Nitropay on your site
- 📦
NitroAd.vue
component - 📦
useNitropay
composable
Quick Setup
Install the module to your Nuxt application with one command:
npx nuxi module add nuxt-nitropay
// nuxt.config.ts
{
modules: ['nuxt-nitropay'],
nitropay: {
siteId: '####'
test: true, // optional, default=true in dev mode
}
}
That's it! You can now use Nitropay ads in your Nuxt app ✨
Usage
NitroAd.vue component accepts a prop
config
. Config must have a unique adid
and optionally include any of nitropay's ad configuration options.The ad will load & refresh automatically. To trigger manually, the component exposes the
refreshAd
&loadAd
functions with defineExpose.
<template>
<div>
<NitroAd :config="{
id: 'home-leaderboard',
refreshTime: 30,
renderVisibleOnly: false,
demo: true,
sizes: [
[
'970',
'90',
],
],
report: {
enabled: true,
icon: true,
wording: 'Report Ad',
position: 'top-right',
},
}" />
</div>
</template>
- Under the hood, the component uses the
useNitropay
composable. You can use the composable to create your own component.
Contribution
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release