open-index/open-npm huggingface dataset:
npm package: @likecoin/nuxt-gre-pixel-module
Description: A nuxt module for integrating event pixel for Vertex AI Search for retail
Latest version: 0.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# nuxt-gre-pixel-module

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
[![Codecov][codecov-src]][codecov-href]
[![License][license-src]][license-href]

> A nuxt module for integrating event pixel for Vertex AI Search for retail

Please refer to the [official documentation](https://cloud.google.com/generative-ai-app-builder/docs/record-user-events#record-with-javascript-pixel) for more information on how to use the retail event pixel.

[📖 **Release Notes**](./CHANGELOG.md)

## Setup

1. Add `nuxt-gre-pixel-module` dependency to your project

```bash
yarn add nuxt-gre-pixel-module # or npm install nuxt-gre-pixel-module
```

2. Add `nuxt-gre-pixel-module` to the `modules` section of `nuxt.config.js`

```js
{
  modules: [
    // Simple usage
    "nuxt-gre-pixel-module",

    // With options
    [
      "nuxt-gre-pixel-module",
      {
        /* module options */
        apiKey: "your-google-cloud-api-credentials-key",
        projectId: "your-google-cloud-project-id",
        locationId: "global",
        catalogId: "default_catalog",
        debug: false,
      },
    ],
  ];
}
```

Please refer to the [official documentation](https://cloud.google.com/generative-ai-app-builder/docs/record-user-events#create-key) on how to obtain the `apiKey` for retail event pixel.

## Usage

### Set visitor ID (Required)

```js
this.$gre.setVisitorId("visitor-id");
```

### Set user ID (Optional)

```js
this.$gre.setUserId("user-id");
```

### Record event

```js
this.$gre.logEvent("search", {
  searchQuery: "search this",
  pageCategories: ["category > subcategory"],
  productDetails: [
    {
      product: { id: "item-id" },
      quantity: 1,
    },
  ],
});
```

## Development

1. Clone this repository
2. Install dependencies using `yarn install` or `npm install`
3. Start development server using `npm run dev`

## License

[MIT License](./LICENSE)

Copyright (c) William Chong <me@williamchong.cloud>

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/@likecoin/nuxt-gre-pixel-module/latest.svg
[npm-version-href]: https://npmjs.com/package/@likecoin/nuxt-gre-pixel-module
[npm-downloads-src]: https://img.shields.io/npm/dt/@likecoin/nuxt-gre-pixel-module.svg
[npm-downloads-href]: https://npmjs.com/package/@likecoin/nuxt-gre-pixel-module
[github-actions-ci-src]: https://github.com/likecoin/nuxt-gre-pixel-module/workflows/ci/badge.svg
[github-actions-ci-href]: https://github.com/likecoin/nuxt-gre-pixel-module/actions?query=workflow%3Aci
[codecov-src]: https://img.shields.io/codecov/c/github/likecoin/nuxt-gre-pixel-module.svg
[codecov-href]: https://codecov.io/gh/likecoin/nuxt-gre-pixel-module
[license-src]: https://img.shields.io/npm/l/@likecoin/nuxt-gre-pixel-module.svg
[license-href]: https://npmjs.com/package/@likecoin/nuxt-gre-pixel-module
npm package: @likecoin/pwa
Description: 👉 Please refer to [nuxt-community/pwa-module](https://github.com/nuxt-community/pwa-module) for documentation.
Latest version: 2.7.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

👉 Please refer to [nuxt-community/pwa-module](https://github.com/nuxt-community/pwa-module) for documentation.
npm package: @likecoin/vue-intercom
Description: An Intercom plugin for Vue.js
Latest version: 1.0.12-like.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# vue-intercom

A reactive wrapper for [Intercom's](https://www.intercom.com/) [JavaScript API](https://developers.intercom.com/docs/intercom-javascript)

## Installation

```bash
npm install --save vue-intercom
```

```javascript
import Vue from 'vue';
import VueIntercom from 'vue-intercom';

Vue.use(VueIntercom, { appId: 'your-app-id' });
```

## Usage

`vue-intercom` handles the injection of Intercom's script into your html and wraps calls to the Intercom API with methods and exposes them through the `$intercom` object in your components.

```javascript
new Vue({
  el: '#app',
  data() {
    return {
      userId: 1,
      name: 'Foo Bar',
      email: 'foo@bar.com',
    };
  },
  mounted() {
    this.$intercom.boot({
      user_id: this.userId,
      name: this.name,
      email: this.email,
    });
    this.$intercom.show();
  },
  watch: {
    email(email) {
      this.$intercom.update({ email });
    },
  }
});
```

## Example App

```
cd example
yarn
yarn dev
```

## API

### Values

#### `$intercom.ready`

Set to `true` once the Intercom script has been loaded.

#### `$intercom.visible`

Set via the `onShow`/`onHide` events.

#### `$intercom.unreadCount`

Set via the `onUnreadCountChange` event.

### Methods

#### `$intercom.boot(/* optional */options)`

Calls `Intercom('boot')`. Automatically sets the `app_id` unless specified in the options object.

#### `$intercom.shutdown()`

Calls `Intercom('shutdown')`.

#### `$intercom.update(/* optional */options)`

Calls `Intercom('update')`. If the options object is set, calls `Intercom('update', options)`

#### `$intercom.show()`

Calls `Intercom('show')`.

#### `$intercom.hide()`

Calls `Intercom('hide')`.

#### `$intercom.showMessages()`

Calls `Intercom('showMessages')`.

#### `$intercom.showNewMessage(/* optional */content)`

Calls `Intercom('showNewMessage')` with pre-populated content if provided.

#### `$intercom.trackEvent(name, /* optional */metadata)`

Calls `Intercom('trackEvent')` with extra metadata if provided.

#### `$intercom.getVisitorId()`

Calls `Intercom('getVisitorId')`.

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2017 Continuon
npm package: @likecoin/vue-simple-svg
Description: A simple Vue.js plugin that allows you to use a component that loads a SVG image as an inline SVG so you can easily control its fill color from the parent component.
Author: Seiya Kobayashi
Latest version: 1.4.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# vue-simple-svg
A simple Vue.js plugin that allows you to use a component that loads a .svg image as an inline SVG so you can easily control its fill color from the parent component. No jQuery required.

### Installation:
```sh
$ npm install vue-simple-svg
```

### Usage:
initialize in your Vue's main file,
```javascript
// as a plugin
import VueSimpleSVG from 'vue-simple-svg'
Vue.use(VueSimpleSVG)

// or as a component
import {SimpleSVG} from 'vue-simple-svg'
Vue.component('simple-svg', SimpleSVG)
```

and use in your component,
```html
<simple-svg
  :filepath="'/PATH_/TO_/YOUR_/FILE.svg'"
  :fill="getFillColor"
  :stroke="getStrokeColor"
  :width="'400px'"
  :height="'400px'"
  :id="'custom-id'"
  @ready="onSvgReady()"
  />
```

### Available props and events:
| props | type | description | default |
| ------ | ------ | ------ | ------ |
| filepath | string | path to your svg file | |
| fill | string | svg's fill color | 'black' |
| stroke | string | svg's stroke color | 'black' |
| width | string | svg's width | '1em' |
| height | string | svg's height | '1em' |
| id | string | custom color | '' |
| preserve | boolean | preserve original color | false |

| events | description |
| ------ | ------ |
| @ready | called when the svg is loaded |


### Notes:
- inline svg element has a class '.simple-svg'
- inline svg has a div wrapper with a class '.simple-svg-wrapper'
- fill/stroke style set to a path of a SVG will be removed unless its value is 'none' or preserveColor is true

### Demo:
![result](https://media.giphy.com/media/26FeVejNWHXsZiaIM/giphy.gif)

To run demo in your local environment,
```sh
$ npm run dev-demo
```
You can find the code of an example component that has a simple-svg component as its child in demo/components/SvgButton.vue


### Todo:
- enable applying various colors to multiple paths in an SVG


### Reference:
- Loading a SVG with XMLHttpRequest and DOMParser https://github.com/jonnyhaynes/inline-svg
- Parsing inline svg tags https://github.com/MMF-FE/vue-svgicon