You're Invited: Meet the Socket team at BSidesSF and RSAC - April 27 - May 1.RSVP

vue3-google-adsense

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-google-adsense

Google Adsense Component for Vue 3

1.2.2
latest
Version published
Weekly downloads
33
6.45%
Maintainers
0
Weekly downloads
 
Created

vue3-google-adsense

vue 3 component for google adsense

demo is here

Installation

npm install vue3-google-adsense

Usage

Import the component and use it.

<template>
  <Adsense adStyle="display:inline-block;width:300px;height:300px"
           clientId="ca-pub-xxxxxxxx"
           slotId="xxxxxxxx">
    
  </Adsense>
</template>

<script>
  
  import { Adsense } from 'vue3-google-adsense';

  export default {
    name: 'Sample-AdsView',
    
    components:{
      Adsense
    }
    
  }

</script>

Usage Examples

Display Ads (Responsive)

  <Adsense adStyle="display:block"
           clientId="ca-pub-xxxxxxxx"
           slotId="xxxxxxxx"
           format="auto"
           fullWidthResponsive="true">
  </Adsense>

Display Ads (fixed)

  <Adsense adStyle="display:inline-block;width:300px;height:300px"
           clientId="ca-pub-xxxxxxxx"
           slotId="xxxxxxxx">
    
  </Adsense>

In-feed Ads

  <Adsense adStyle="display:block"
           format="fluid"
           layoutKey="-6t+ed+2i-1n-4w"
           clientId="ca-pub-xxxxxxxx"
           slotId="xxxxxxxx">

  </Adsense>

In-article Ads


  <Adsense adStyle="display:block; text-align:center;"
         layout="in-article"
         format="fluid"
         clientId="ca-pub-xxxxxxxx"
         slotId="xxxxxxxx">
  </Adsense>

Multiplex Ads (Responsive)


  <Adsense adStyle="display:block"
         format="autorelaxed"
         clientId="ca-pub-xxxxxxxx"
         slotId="xxxxxxxx">
      
  </Adsense>

Multiplex Ads (fixed)


  <Adsense adStyle="display:inline-block;width:360px;height:800px"
         clientId="ca-pub-xxxxxxxx"
         slotId="xxxxxxxx">
      
  </Adsense>

Props

AttributeDefaultOrigin adsense tagRequired
clientIddata-ad-clienttrue
slotIddata-ad-slottrue
adStyledisplay: blockstylefasle
formatempty String ('')data-ad-formatfalse
fullWidthResponsivefalsedata-full-width-responsivefalse
layoutKeyempty String ('')data-ad-layout-keyfalse
layoutempty String ('')data-ad-layoutfalse

Contributors

Made with contrib.rocks.

FAQs

Package last updated on 01 Jan 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts