interface EntrolyticsOptions {
  /** Website ID (required) */
  websiteId: string
  /** Link ID for link tracking */
  linkId?: string
  /** Pixel ID for conversion tracking */
  pixelId?: string
  /** Custom analytics host URL */
  host?: string
  /** Auto-track page views (default: true) */
  autoTrack?: boolean
  /** Tag for A/B testing */
  tag?: string
  /** Restrict to specific domains */
  domains?: string[]
  /** Strip query params from URLs */
  excludeSearch?: boolean
  /** Strip hash fragments from URLs */
  excludeHash?: boolean
  /** Honor Do Not Track */
  respectDnt?: boolean
  /** Disable on localhost */
  ignoreLocalhost?: boolean
}

app.use(createEntrolytics({
  websiteId: 'abc-123-def',
  host: 'https://analytics.company.com',
  autoTrack: true,
  domains: ['example.com', 'app.example.com'],
  excludeSearch: true,
  ignoreLocalhost: true,
}))

<script setup lang="ts">
import { useEntrolytics } from '@entro314labs/entro-vue'

const {
  track,        // Track custom events
  identify,     // Identify users
  isLoaded,     // Check if script loaded
  config,       // Access configuration
} = useEntrolytics()

// Track event
function handleClick() {
  track('button-click', { location: 'hero' })
}

// Identify user
function handleLogin(user) {
  identify(user.id, {
    email: user.email,
    plan: user.subscription
  })
}
</script>

<script setup lang="ts">
import { useTrackEvent } from '@entro314labs/entro-vue'

const { track } = useTrackEvent()

function handlePurchase(product) {
  track('purchase', {
    revenue: product.price,
    currency: 'USD',
    productId: product.id,
    category: product.category
  })
}
</script>

<template>
  <button @click="handlePurchase(product)">
    Buy Now - ${{ product.price }}
  </button>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { useTrackPageView } from '@entro314labs/entro-vue'

const route = useRoute()

// Auto-track route changes
useTrackPageView(() => route.fullPath)
</script>

<script setup lang="ts">
import { watch } from 'vue'
import { useIdentify } from '@entro314labs/entro-vue'
import { useAuthStore } from '@/stores/auth'

const { identify } = useIdentify()
const authStore = useAuthStore()

// Identify user when they log in
watch(() => authStore.user, (user) => {
  if (user) {
    identify(user.id, {
      email: user.email,
      name: user.name,
      plan: user.subscription,
      company: user.company
    })
  }
})
</script>

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [/* your routes */]
})

// Auto-track page views on route change
router.afterEach((to) => {
  // The plugin's autoTrack option handles this automatically
  // Or manually track with custom data:
  window.$entrolytics?.track('pageview', {
    path: to.path,
    name: to.name,
    params: to.params
  })
})

export default router

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { useTrackPageView } from '@entro314labs/entro-vue'

const route = useRoute()

// Automatically track page views when route changes
useTrackPageView(() => route.fullPath)
</script>

<template>
  <div class="app-layout">
    <header>
      <Navigation />
    </header>
    <main>
      <router-view />
    </main>
    <footer>
      <Footer />
    </footer>
  </div>
</template>

<script>
export default {
  name: 'LegacyComponent',
  
  methods: {
    trackButtonClick() {
      // Access via global property
      this.$entrolytics.track('button-click', {
        component: 'legacy',
        action: 'click'
      })
    },
    
    handleLogin(user) {
      this.$entrolytics.identify(user.id, {
        email: user.email,
        role: user.role
      })
    }
  },
  
  mounted() {
    // Track component mount
    this.$entrolytics.track('component-mounted', {
      name: this.$options.name
    })
  }
}
</script>

<template>
  <button @click="trackButtonClick">
    Click Me
  </button>
</template>

import { createEntrolytics } from '@entro314labs/entro-vue'

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()
  
  nuxtApp.vueApp.use(createEntrolytics({
    websiteId: config.public.entrolyticsWebsiteId,
    host: config.public.entrolyticsHost,
    autoTrack: true,
  }))
})

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      entrolyticsWebsiteId: process.env.NUXT_PUBLIC_ENTROLYTICS_WEBSITE_ID,
      entrolyticsHost: process.env.NUXT_PUBLIC_ENTROLYTICS_HOST,
    }
  }
})

import { createApp } from 'vue'
import { createEntrolytics } from '@entro314labs/entro-vue'
import App from './App.vue'

const app = createApp(App)

app.use(createEntrolytics({
  websiteId: import.meta.env.VITE_ENTROLYTICS_WEBSITE_ID,
  host: import.meta.env.VITE_ENTROLYTICS_HOST,
}))

app.mount('#app')

import { boot } from 'quasar/wrappers'
import { createEntrolytics } from '@entro314labs/entro-vue'

export default boot(({ app }) => {
  app.use(createEntrolytics({
    websiteId: process.env.ENTROLYTICS_WEBSITE_ID,
    autoTrack: true,
  }))
})

import type {
  EntrolyticsOptions,
  EntrolyticsInstance,
  TrackEventData,
  IdentifyTraits,
} from '@entro314labs/entro-vue'

// Type-safe configuration
const options: EntrolyticsOptions = {
  websiteId: 'abc-123',
  autoTrack: true,
}

// Type-safe event data
const eventData: TrackEventData = {
  revenue: 99.99,
  currency: 'USD',
  productId: 'pro-plan'
}

// Use in component
const { track, identify } = useEntrolytics()

track('purchase', eventData)
identify('user-123', { email: 'user@example.com' })