Nuxt Nitropay

A Nitropay Ads module for nuxt

• ✨  Release Notes

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 ad id 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

Local development

# 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