Vue2 port of react-product-fruits.

Example

Register the component locally or globally and use it in templates as late as possible.

<product-fruits
    project-code="ABCDEFGHIJK"
    language="de"
    username="alice"
    email="alice@example.net"
    firstname="alice"
    lastname="supergirl"
    sign-up-at="2021-06-24T17:36:34.000Z"
    role="user"
    :props="{propA: 'A', propB: 'B'}"
/>

Routing

In order to properly work with Vue router, it is required to call window.productFruits.pageChanged(); after each routing. With optional chaining nothing happens in case the api is not loaded yet.

router.afterEach(() => {
    window.productFruits?.pageChanged?.();
});

Props

All props are equal to the react component or vanilla integration of Product Fruits.

Required

project-code string
ID of your workspace

language string
2-letter ISO language code, it has to match values you specified before in Product Fruits administration (see Workspace settings -> Supported Languages)

username string
a unique identifier of the currently logged-in user

User properties

email string

firstname string

lastname string

sign-up-at string
can be any format but we recommend the ISO 8601 JSON DateTime format

role string
can be any format

props Record<string, string | number | boolean>
custom user properties