Google Tag Manager - v1.0.0

Vue

The Vue components in resources/js/vue/ mirror the React and Livewire pairs. They fetch from the package's HTTP routes and share the same backend behavior.

Publishing

php artisan vendor:publish --tag=google-tag-manager-js

Vue components land at resources/js/vendor/google-tag-manager/vue/. Or point your bundler at vendor/artisanpack-ui/google-tag-manager/resources/js/vue/ directly.

`GtmSnippet`

Client-side snippet installer. See Snippet Installer.

`ContainerOverview`

<script setup>
import { ContainerOverview } from '@/js/vendor/google-tag-manager/vue'
</script>

<template>
    <ContainerOverview
        account-id="123456"
        container-id="654321"
        workspace-id="1"
    />
</template>

Props (kebab-case in templates, camelCase in <script setup>):

Prop	Type	Required	Purpose
`accountId`	string	Yes	GTM account ID.
`containerId`	string	Yes	GTM container ID.
`workspaceId`	string \| null	No	Specific workspace. When null, the fetcher uses the default workspace.
`baseUrl`	string	No	Base URL for the package's routes. Defaults to `window.__apGtmRoutes` (see below).

`TagList`

<TagList account-id="123456" container-id="654321" workspace-id="1" />

workspaceId is required here.

Route discovery

Same mechanism as the React components — emit @gtmRoutes in your Blade layout before your bundle loads, and the Vue components pick up the resolved URLs from window.__apGtmRoutes.

Composition-API–only

The Vue components are Composition-API single-file components. If you're on the Options API, wrap them in a small adapter or use the React components as reference and re-implement in your own SFC.