### Install Vev CLI Globally

Source: https://developer.vev.design/docs/cli

Installs the Vev Command Line Interface globally using npm, making Vev commands accessible from any directory on your system. Node.js is a prerequisite.

```bash
npm install -g @vev/cli
```

--------------------------------

### Initialize a Vev project directory

Source: https://developer.vev.design/docs/cli/asset-source/getting-started

This command sequence is used to navigate into your project directory and then initialize it as a Vev project. The `vev init` command sets up the necessary project structure and configuration files for Vev development.

```Shell
cd [my-project]
vev init
```

--------------------------------

### Start Local Development Server for Vev Components

Source: https://developer.vev.design/docs/cli

Initiates the Vev CLI development server, which makes locally developed components accessible in the Vev design editor. Components will remain available as long as this server is running.

```bash
vev start
```

--------------------------------

### Deploy a Vev project

Source: https://developer.vev.design/docs/cli/asset-source/getting-started

After successful initialization, this command is used to deploy your Vev project. It pushes your local changes to the Vev platform, making your plugin available for connection and use in the Vev editor.

```Shell
vev deploy
```

--------------------------------

### Initialize an Existing React Project for Vev

Source: https://developer.vev.design/docs/cli

Navigates into an existing React project directory and initializes it for Vev development. This command integrates the `@vev/react` package, making the project compatible with Vev's component system.

```bash
cd [my-project]
vev init
```

--------------------------------

### Authorize Vev CLI with Your Account

Source: https://developer.vev.design/docs/cli

Logs into your Vev account via the CLI, authorizing it to interact with Vev services. This step requires an existing Vev account to proceed.

```bash
vev login
```

--------------------------------

### Bootstrap a New Vev Project

Source: https://developer.vev.design/docs/cli

Creates a new Vev project with a specified name, setting up the necessary directory structure for Vev component development. The project's availability (specific project or whole account) can be determined later.

```bash
vev create [my-project]
```

--------------------------------

### Define and Register a Basic Vev React Component

Source: https://developer.vev.design/docs/cli

Demonstrates how to create a simple React component and register it with Vev using the `registerVevComponent` function. Components defined this way become available for use within the Vev design editor.

```javascript
import React from 'react';
import { registerVevComponent } from '@vev/react';

const MyComponent = () => {
  return <div>Hello, VeV</div>;
}

registerVevComponent(MyComponent, {
  name: "My awesome component",
});

export default MyComponent;
```

--------------------------------

### Register a new Vev asset source plugin

Source: https://developer.vev.design/docs/cli/asset-source/getting-started

This code snippet demonstrates how to register a new Vev plugin. It requires a unique name for the plugin and a unique ID, which can be any string but must be distinct to your account. This registration is the first step in setting up a custom asset source.

```JavaScript
registerVevPlugin({
  name: "Your plugin name",
  id: '[your-id]',
  ...
});
```

--------------------------------

### Simple Vev Component Registration Example (JavaScript)

Source: https://developer.vev.design/docs/cli/react/register-vev-component

This example demonstrates a minimal setup for registering a React component with Vev using registerVevComponent. It imports the necessary function, defines a simple React component, and registers it with a name, making it available in the Vev design editor.

```javascript
import React from 'react';
import { registerVevComponent } from '@vev/react';

const MyComponent = () => {
  return <div>Hello, Vev</div>;
};

registerVevComponent(MyComponent, {
  name: 'My awesome component',
});

export default MyComponent;
```

--------------------------------

### Create New Vev Project

Source: https://developer.vev.design/docs/cli/commands

Generates a new Vev project with a boilerplate setup, typically including React and TypeScript. This command simplifies the initial project setup by providing a ready-to-use structure based on the `create-vev-app` boilerplate. While convenient, it's not strictly required to use the CLI, as you can also set up your own project and add `@vev/react` manually.

```bash
vev create [my-project]
```

--------------------------------

### Example: Displaying Current Device Mode with useDevice

Source: https://developer.vev.design/docs/cli/react/hooks

This example shows how to use the `useDevice` hook to retrieve and display the current device mode (desktop, tablet, or mobile) within a React component.

```JavaScript
import { useDevice } from '@vev/react';

export default function () {
    const device: 'desktop' | 'tablet' | 'mobile' = useDevice();

    return <h1>Device: {device}</h1>;
}
```

--------------------------------

### Install Vev CLI Globally

Source: https://developer.vev.design/docs/cli/commands

Installs the Vev Command Line Interface globally using npm. This command requires Node.js v16 or higher to be installed on your system. A global installation allows you to execute `vev` commands from any directory in your terminal.

```bash
npm i @vev/cli -g
```

--------------------------------

### Example: Registering a Vev Component with Link Prop

Source: https://developer.vev.design/docs/cli/react/vev-props

Shows how to register a Vev component with a 'link' property type, allowing users to select or input links.

```javascript
registerVevComponent(MyComponent, {
  name: 'My component',
  props: [
    {
      name: 'link',
      type: 'link'
    }
  ]
});
```

--------------------------------

### Start Vev Development Server with Debugging

Source: https://developer.vev.design/docs/cli/commands

Starts the Vev development server with verbose output, displaying more messages and debug information to `stdout`. This flag is particularly useful for troubleshooting issues and gaining deeper insights into the development server's operations.

```bash
vev start --debug
```

--------------------------------

### Server-Side Rendering with Mustache and Vev

Source: https://developer.vev.design/docs/cms/server-side

These examples demonstrate how to perform server-side rendering using the Mustache templating language with Vev variables across different programming languages. Each example reads a Mustache template, populates it with dynamic data, and renders the final HTML for a web response.

```javascript
import Mustache from 'mustache';
import fs from 'fs/promises';

const template = await fs.readFile('/template/p8S9MxkirVE.mustache', 'utf8');
const renderedHTML = Mustache.render(template, {
  // primary
  'c--hWX11RLvP': '#000 | rgba(0,0,0,0.5) | hsl(0,0%,0%) | hsla(0,0%,0%,0.5)',
  // Hero image
  'i-JZiYWYXa7J': {
    src: 'https://img.url',
    alt: 'Image alt text',
    srcset: 'https://img.url 300w, https://img.url 600w, https://img.url 900w',
  },
  // Hero title
  't-4RyfGtGYj2': 'Text',
  // Hero CTA url
  't-8ec2OwGaF_': 'Text',
  // Hero CTA text
  't-DzxChO2qSm': 'Text',
  // Hero subtitle
  't-hd1jsFgPV5': 'Text',
});
res.send(renderedHTML);
```

```php
<?php
require 'vendor/autoload.php'; // Assuming you have installed Mustache via Composer

use Mustache_Engine;
use Mustache_Loader_FilesystemLoader;

// Configure Mustache
$mustache = new Mustache_Engine([
    'loader' => new Mustache_Loader_FilesystemLoader('/template') // Set the template directory
]);

// Read the Mustache template file
$templateFile = 'p8S9MxkirVE.mustache';
$template = file_get_contents(__DIR__ . "/template/" . $templateFile);

// Define data for the template
$data = [
    // primary
    'c--hWX11RLvP' => "#000 | rgba(0,0,0,0.5) | hsl(0,0%,0%) | hsla(0,0%,0%,0.5)",
    // Hero image
    'i-JZiYWYXa7J' => [
        "src" => "https://img.url",
        "alt" => "Image alt text",
        "srcset" => "https://img.url 300w, https://img.url 600w, https://img.url 900w"
    ],
    // Hero title
    't-4RyfGtGYj2' => "Text",
    // Hero CTA url
    't-8ec2OwGaF_' => "Text",
    // Hero CTA text
    't-DzxChO2qSm' => "Text",
    // Hero subtitle
    't-hd1jsFgPV5' => "Text",
];

// Render the template
$renderedHTML = $mustache->render($template, $data);

// Send the response
header('Content-Type: text/html');
echo $renderedHTML;
?>
```

```go
package main

import (
	"io/ioutil"
	"log"
	"net/http"
	"github.com/hoisie/mustache"
)

func handler(w http.ResponseWriter, r *http.Request) {
	// Read the Mustache template file
	template, err := ioutil.ReadFile("/template/p8S9MxkirVE.mustache")
	if err != nil {
		log.Fatalf("Error reading template file: %v", err)
		http.Error(w, "Internal Server Error", http.StatusInternalServerError)
		return
	}

	// Define the data to pass into the template
	data := map[string]interface{}{
		"c--hWX11RLvP": "#000 | rgba(0,0,0,0.5) | hsl(0,0%,0%) | hsla(0,0%,0%,0.5)",
		"i-JZiYWYXa7J": map[string]string{
			"src":    "https://img.url",
			"alt":    "Image alt text",
			"srcset": "https://img.url 300w, https://img.url 600w, https://img.url 900w",
		},
		"t-4RyfGtGYj2": "Text",
		"t-8ec2OwGaF_": "Text",
		"t-DzxChO2qSm": "Text",
		"t-hd1jsFgPV5": "Text",
	}

	// Render the template with the data
	renderedHTML := mustache.Render(string(template), data)

	// Write the rendered HTML to the response
	w.Header().Set("Content-Type", "text/html")
	_, err = w.Write([]byte(renderedHTML))
	if err != nil {
		log.Printf("Error writing response: %v", err)
	}
}

func main() {
	http.HandleFunc("/", handler)
	log.Println("Server is running on port 8080...")
	log.Fatal(http.ListenAndServe(":8080", nil))
}
```

--------------------------------

### Install Vev React Package

Source: https://developer.vev.design/docs/cli/react/register-vev-component

This command installs the @vev/react package into an existing React project, saving it as a dependency. It's the first step to integrate Vev functionalities into your application.

```bash
npm i @vev/react --save
```

--------------------------------

### Start Vev Development Server

Source: https://developer.vev.design/docs/cli/commands

Launches a local development server, enabling you to view and interact with your Vev components directly within the Design Editor. A green dot at the bottom of the editor indicates a successful connection, allowing you to use your locally developed components in any Vev project.

```bash
vev start
```

--------------------------------

### Example: Registering a Vev Component with Image Prop

Source: https://developer.vev.design/docs/cli/react/vev-props

Illustrates how to register a Vev component with an 'image' property type, enabling image uploads.

```javascript
registerVevComponent(MyComponent, {
  name: 'My component',
  props: [
    {
      name: 'image',
      type: 'image'
    }
  ]
});
```

--------------------------------

### Example: Observe Another Widget's Form-Field Value with useModel

Source: https://developer.vev.design/docs/cli/react/hooks

Illustrates a practical application of the `useModel` hook to observe and display the content of a form field from a different, tracked widget. This example demonstrates how to access and react to changes in another widget's data model.

```typescript
import { useModel } from '@vev/react';

export default function ({ trackedWidget }: Props) {
    const usemodel = useModel(trackedWidget.key);

    return <h1>{usemodel.content.text}</h1>;
}
```

--------------------------------

### Example: Displaying Intersection Percentage with useIntersection

Source: https://developer.vev.design/docs/cli/react/hooks

This example demonstrates how to use `useIntersection` with a React ref to track and display the percentage of a widget that intersects with the viewport. It updates the value 10 times as the widget enters the screen.

```JavaScript
import { useRef } from 'react';
import { useIntersection } from '@vev/react';

export default function () {
    const widgetReference = useRef(null);
    const intersection = useIntersection(widgetReference, { steps: 10 });

    return (
        <div className="fill" ref={widgetReference}>
            <h1>{intersection.intersectionRatio * 100}</h1>
        </div>
    );
}
```

--------------------------------

### Example: Registering a Vev Component with Select Prop

Source: https://developer.vev.design/docs/cli/react/vev-props

Demonstrates how to register a Vev component using a 'select' property type configured as radio buttons with predefined items (Apple, Orange, Banana).

```javascript
registerVevComponent(MyComponent, {
  name: 'My component',
  props: [
    {
      name: 'selectFruits',
      type: 'select',
      options: {
        display: 'radio',
        items: [
          { label: 'Apple', value: 'apple' },
          { label: 'Orange', value: 'orange' },
          { label: 'Banana', value: 'banana' }
        ]
      }
    }
  ]
});
```

--------------------------------

### Tailwind CSS Configuration for Vev CLI

Source: https://developer.vev.design/docs/cli/tailwind

An example `tailwind.config.js` file demonstrating the basic configuration for Tailwind CSS within a Vev CLI project. It specifies content paths for source files and includes a recommendation to disable Tailwind's Preflight to prevent conflicts with Vev's built-in reset styles.

```JavaScript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['src/**/*.{ts,tsx}'],
  corePlugins: {
    preflight: false,
  },
};
```

--------------------------------

### Register Component with Number Prop Example

Source: https://developer.vev.design/docs/cli/react/vev-props

Illustrates how to register a Vev component with a number prop named 'price', configured with minimum and maximum value constraints.

```JavaScript
registerVevComponent(MyComponent, {
  name: 'My component',
  props: [
    {
      name: 'price',
      type: 'number',
      options: {
        min: 100,
        max: 1000,
      },
    },
  ],
});
```

--------------------------------

### Example: Registering a Vev Component with Array Prop (Simple Types)

Source: https://developer.vev.design/docs/cli/react/vev-props

Illustrates how to register a Vev component with an 'array' property type, allowing a list of simple string and number items.

```javascript
registerVevComponent(MyComponent, {
  name: 'My component',
  props: [
    {
      name: 'products',
      type: 'array',
      of: [
        {
          name: 'title',
          type: 'string'
        },
        { name: 'price', type: 'number' }
      ]
    }
  ]
});
```

--------------------------------

### Example: Registering a Vev Component with Layout Prop

Source: https://developer.vev.design/docs/cli/react/vev-props

Shows how to register a Vev component with a 'layout' property type, arranging nested number fields (x, y, z) in a row.

```javascript
registerVevComponent(MyComponent, {
  name: 'My component',
  props: [
    {
      type: 'layout',
      options: {
        display: 'row'
      },
      fields: [
        { name: 'x', type: 'number' },
        { name: 'y', type: 'number' },
        { name: 'z', type: 'number' }
      ]
    }
  ]
});
```

--------------------------------

### Example: Custom List Preview for Array Items

Source: https://developer.vev.design/docs/cli/react/vev-props

Demonstrates how to define a custom preview function for individual items within an array property, useful for displaying item details (title, image) in the editor.

```javascript
{
  name: "products",
  type: "array",
  of: [
    {
      name: "item",
      type: "object",
      preview(value) {
        return {
          title: value.title,
          image: value.image
        };
      },
      fields: [
        {
          name: "title",
          type: "string"
        },
        { name: "image", type: "image" }
      ]
    }
  ]
}
```

--------------------------------

### Register Component with Boolean Prop Example

Source: https://developer.vev.design/docs/cli/react/vev-props

Illustrates how to register a Vev component with a boolean prop named 'showOnMobile', which controls visibility based on a toggle.

```JavaScript
registerVevComponent(MyComponent, {
  name: 'My component',
  props: [
    {
      name: 'showOnMobile',
      type: 'boolean',
    },
  ],
});
```

--------------------------------

### Counter with useInterval Hook

Source: https://developer.vev.design/docs/cli/react/hooks

Demonstrates how to use the `useInterval` hook to run code at specified time intervals. This example increments a counter every second, showcasing its use for periodic updates or background tasks that continue until cleared or the window is closed.

```javascript
import { useInterval } from '@vev/react';
import { useState } from 'react';

export default function () {
    const [count, setCount] = useState<number>(0);
    // Increase counter every second
    useInterval(() => setCount(count + 1), 1000);

    return <h1>{count}</h1>;
}
```

--------------------------------

### Example: Registering a Vev Component with Object Prop

Source: https://developer.vev.design/docs/cli/react/vev-props

Demonstrates how to register a Vev component with an 'object' property type, containing nested string (title, subtitle) and image fields.

```javascript
registerVevComponent(MyComponent, {
  name: 'My component',
  props: [
    {
      name: 'header',
      type: 'object',
      fields: [
        {
          name: 'title',
          type: 'string'
        },
        { name: 'subtitle', type: 'string' },
        { name: 'image', type: 'image' }
      ]
    }
  ]
});
```

--------------------------------

### Register Component with String Prop Example

Source: https://developer.vev.design/docs/cli/react/vev-props

Illustrates how to register a Vev component with a string prop named 'title', configured with minimum and maximum length constraints.

```JavaScript
registerVevComponent(MyComponent, {
  name: 'My component',
  props: [
    {
      name: 'title',
      type: 'string',
      options: {
        minLength: 10,
        maxLength: 20,
      },
    },
  ],
});
```

--------------------------------

### Implement Adobe Analytics with Vev Tracking Events

Source: https://developer.vev.design/docs/tracking

This example illustrates how to integrate Vev's tracking events with Adobe Analytics. It captures the `vev.track` event, extracts relevant data, and then uses the `alloy('sendEvent')` function to dispatch the event to Adobe Analytics, including specific Vev metadata like `projectKey` and `pageKey` for enhanced tracking.

```JavaScript
window.addEventListener('vev.track', (e) => {
    const event = e.detail.data;

    // Example: Send to Adobe Analytics
    alloy('sendEvent', {
        type: event.type,
        data: {
            ...event.data,
            vevProjectKey: event.metaData.projectKey,
            vevPageKey: event.metaData.pageKey,
        },
    });
});
```

--------------------------------

### Example: Track Element Dimensions with useSize Hook

Source: https://developer.vev.design/docs/cli/react/hooks

Illustrates how to use the `useSize` hook in a React component to dynamically track and display the width and height of a specific DOM element. It leverages `useRef` to create a reference to the element whose dimensions are to be observed.

```typescript
import { useSize } from '@vev/react';
import { useRef } from 'react';

export default function () {
    const elementReference = useRef<Element>(null);
    const { width, height } = useSize(elementReference);

    return (
        <div ref={elementReference}>
            {width} x {height}
        </div>
    );
}
```

--------------------------------

### Example: Registering a Vev Component with Array Prop (Complex Objects)

Source: https://developer.vev.design/docs/cli/react/vev-props

Shows how to register a Vev component with an 'array' property type, containing a list of complex 'object' items with nested title and price fields.

```javascript
registerVevComponent(MyComponent, {
  name: 'My component',
  props: [
    {
      name: 'products',
      type: 'array',
      of: [
        {
          name: 'item',
          type: 'object',
          fields: [
            {
              name: 'title',
              type: 'string'
            },
            { name: 'price', type: 'number' }
          ]
        }
      ]
    }
  ]
});
```

--------------------------------

### Define 'variable' Property Type

Source: https://developer.vev.design/docs/cli/react/vev-props

This snippet shows the basic configuration for a 'variable' property type. It's used for getting variable keys and works with 'useVariable' and 'useSetVariable' hooks.

```JavaScript
type: "variable",
```

--------------------------------

### Example: Display Scroll Top Position with useScrollTop

Source: https://developer.vev.design/docs/cli/react/hooks

Demonstrates how to use the `useScrollTop` hook within a React component to display the current scroll position of the page. It shows both the pixel value and the percentage scrolled down the page.

```typescript
import { useScrollTop } from '@vev/react';

export default function () {
    return (
        <div>
            <h1>Scroll Top (pixels): {useScrollTop()}</h1>
            <h1>Scroll Top (percentage): {useScrollTop(true)}</h1>
        </div>
    );
}
```

--------------------------------

### useFrame Hook Signature

Source: https://developer.vev.design/docs/cli/react/hooks

Defines the signature for the `useFrame` hook, which triggers a callback function every animation frame. It can optionally pass a `time` parameter representing the start time of the callback and returns a cleanup function to stop the frame updates.

```APIDOC
useFrame(callback: (time?: number), deps?: readonly any[]): () => void;
```

--------------------------------

### Example: Registering a Vev Component with Editable CSS

Source: https://developer.vev.design/docs/cli/react/editable-css

This JavaScript code snippet demonstrates how to register a React component (`MyComponent`) with the Vev platform, enabling specific CSS properties to be editable in the Vev Design Editor. It utilizes CSS modules for selectors and defines which properties (e.g., background, border-radius, color) are editable for different elements within the component.

```javascript
import React from 'react';
import { registerVevComponent } from '@vev/react';
import styles from './my-component.module.scss';

const MyComponent = ({ title }) => {
  return (
    <div className={styles.wrapper}>
      <h1 className={styles.title}>{title}</h1>
    </div>
  );
};

registerVevComponent(MyComponent, {
  name: 'My awesome component',
  editableCSS: [
    {
      selector: styles.wrapper,
      properties: ['background', 'border-radius'],
    },
    {
      selector: styles.title,
      properties: ['color'],
    },
  ],
});

export default MyComponent;
```

--------------------------------

### vev.json Configuration File Options

Source: https://developer.vev.design/docs/cli/configuration

Describes the structure and available properties for the `vev.json` configuration file, which is used to link a component package to the Vev platform. It includes details on the `key`, `shareWithAccount`, and `library` properties.

```APIDOC
vev.json:
  key: string
    description: The `key` is auto generated when running `vev init` and should never been changed.
  shareWithAccount: boolean
    description: Option to make the component available in the add menu for everyone on your account after deployed.
  library: object
    description: Object containing `key`, which is the Vev project key, and `dist` (optional) to specify the destination folder for the compiled files.
```

--------------------------------

### Initialize Vev Component Package

Source: https://developer.vev.design/docs/cli/commands

Creates a new component package in Vev and generates a `vev.json` file locally in your project directory. This file contains your component's unique key and is crucial for linking your local component to Vev. Deleting this file will detach your component, requiring re-initialization.

```bash
vev init
```

--------------------------------

### Compile Vev Project using CLI

Source: https://developer.vev.design/docs/cms

This command compiles your Vev project into static files (HTML, CSS, JavaScript) for seamless integration with any CMS or web application. It generates client-side rendering scripts (`embed/[pageKey].js`) and server-side rendering templates (`template/[pageKey].mustache`). The command requires the Vev CLI and accepts an optional project ID, which can also be specified in `vev.json`.

```Shell
vev compile [project-id]
```

--------------------------------

### Vev CLI Commands Overview

Source: https://developer.vev.design/docs/cli/commands

This section lists common commands available for interaction with the Vev platform via its Command Line Interface (CLI). These commands facilitate various development and deployment workflows.

```APIDOC
- login
- create
- initialize
- start
- deploy
- compile
```

--------------------------------

### Implement React Menu Component with useMenu Hook

Source: https://developer.vev.design/docs/cli/react/hooks

Demonstrates how to create a simple React component `MenuExample` that utilizes the `@vev/react` library's `useMenu` hook to fetch and display menu items. The component is registered with Vev, allowing menu selection via props, and renders links for each menu child.

```typescript
import { Link, registerVevComponent, useMenu } from '@vev/react';

type Props = {
    menuselect: string;
};

const MenuExample = ({ menuselect }: Props) => {
    const menu = useMenu(menuselect);

    if (!menu) {
        return <p>No menu items</p>;
    }

    return (
        <div>
            <h1>{menu.title}</h1>
            {menu.children.map((child) => {
                return (
                    <div>
                        <Link to={child.link}>{child.title}</Link>
                    </div>
                );
            })}
        </div>
    );
};

registerVevComponent(MenuExample, {
    name: 'MenuExample',
    props: [
        {
            name: 'menuselect',
            type: 'select',
            options: {
                display: 'autocomplete',
                items: (context: any) => {
                    if (context.menus) {
                        return Object.keys(context.menus).map((menuKey) => {
                            return {
                                label: context.menus[menuKey].title,
                                value: context.menus[menuKey].key,
                            };
                        });
                    }
                    return [];
                },
            },
        }
    ]
});

export default MenuExample;
```

--------------------------------

### useRoute Hook API Reference

Source: https://developer.vev.design/docs/cli/react/hooks

API documentation for the `useRoute` hook. This hook provides access to information about the current page route, including `pageKey` and `path`, allowing components to react to navigation changes.

```APIDOC
const { pageKey, path } = useRoute();
```

--------------------------------

### Compile Vev Project for Production

Source: https://developer.vev.design/docs/cli/commands

Compiles the Vev project into a production-ready bundle of HTML, CSS, and JavaScript. The resulting files can be served on any web server. This command can also be used to load CMS data into the compiled Vev project.

```bash
vev compile [project-id]
```

--------------------------------

### Deploy Vev Component

Source: https://developer.vev.design/docs/cli/commands

Deploys the Vev component, making it available for use in the Design Editor. This process creates one optimized JavaScript and CSS bundle for the component. For better optimization, consider creating separate packages if your widgets do not share common code.

```bash
vev deploy
```

--------------------------------

### Listen for Vev Tracking Events in JavaScript

Source: https://developer.vev.design/docs/tracking

This JavaScript snippet demonstrates how to set up a global event listener on the `window` object to capture all `vev.track` events dispatched by Vev. Once an event is captured, its detailed data can be accessed and then forwarded to any desired tracking tool or internal data repository for further processing.

```JavaScript
window.addEventListener('vev.track', (e) => {
    const event = e.detail;
    console.log('event', event);
});
```

--------------------------------

### Authorize Vev CLI

Source: https://developer.vev.design/docs/cli/commands

Authorizes the Vev CLI against the Design Editor. This command initiates a login process that saves an access token to your computer, which is then used for all subsequent authenticated requests. It's a necessary step before you can initialize or deploy Vev packages.

```bash
vev login
```

--------------------------------

### Vev Standard Tracking Events Reference

Source: https://developer.vev.design/docs/tracking

This table provides a comprehensive list of standard events dispatched by Vev, along with their descriptions and the specific data objects associated with each event type. These events cover common user interactions and page lifecycle events, such as project and page loads, link clicks, and video playback progress.

```APIDOC
Standard Events:
  VEV_PROJECT_LOAD:
    description: Dispatches when the project loads
    data: 
      projectKey: string
      projectName: string
      breakpoint: string
  VEV_PAGE_LOAD:
    description: Dispatches when the page load
    data:
      pageKey: string
      pageName: string
      projectKey: string
      breakpoint: string
  VEV_LINK_CLICK:
    description: Dispatches when an external link is clicked
    data:
      url: string
  VEV_VIDEO_PLAY:
    description: Dispatches when an video is started
    data:
      videoUrl: string
      totalPlayTime: number (seconds)
      percentagePlayed: number (percentage)
  VEV_VIDEO_STOP:
    description: Dispatches when an video is stopped or paused
    data:
      videoUrl: string
      totalPlayTime: number (seconds)
      percentagePlayed: number (percentage)
  VEV_VIDEO_END:
    description: Dispatches when an video is fully played.
    data:
      videoUrl: string
      totalPlayTime: number (seconds)
      percentagePlayed: number (percentage)
  VEV_VIDEO_PROGRESS:
    description: Dispatches the progress of a video in seconds.
    data:
      videoUrl: string
      videoName: string
      progress: number (seconds)
      totalPlayTime: number (seconds)
      percentagePlayed: number (percentage)
```

--------------------------------

### Render Vev Project in React Application

Source: https://developer.vev.design/docs/cli/react/components

Shows how to use the `Render` component from `@vev/react` to embed a Vev project within a React application. It highlights the use of `projectKey` and `pageKey` for identifying the Vev content, and mentions its support for server-side rendering with Suspense and compatibility with Next.js's app directory routing.

```JavaScript
import React from 'react';
import { Render as VevRender } from '@vev/react';

const MyComponent = (props) => {
    return <VevRender projectKey="my-project-key" pageKey="my-page-key" />;
};

export default MyComponent;
```

```APIDOC
type Props = {
    projectKey: string;
    pageKey: string;
    noCache: boolean;
    fallback: React.ReactNode; // Render a fallback component when loading
};
```

--------------------------------

### String Prop Options Reference

Source: https://developer.vev.design/docs/cli/react/vev-props

Details the available configuration options for string type Vev props, including text format, multiline support, and length constraints.

```APIDOC
String Prop Options:
  type (string): Can be `'text' | 'date' | 'email' | 'url' | 'password'`. Default is `text`.
  multiline (boolean | number): Select if the field should be multiline or not. Can either be `boolean` or a `number` representing the lines of the text the field should include.
  minLength (number): The minimum characters for the field.
  maxLength (number): The maximum characters for the field.
```

--------------------------------

### Number Prop Options Reference

Source: https://developer.vev.design/docs/cli/react/vev-props

Details the available configuration options for number type Vev props, including min/max values, display format, and scaling.

```APIDOC
Number Prop Options:
  min (number): The minimum number for the field.
  max (number): The maximum number for the field.
  format (string): This will appear as a suffix for the number. Can be `'%' | 'px' | 'deg'`.
  display (string): The appearance of the field. Can be `'input' | 'slider'`. Used for displaying a slider instead of a number field. Default is: `input`.
  scale (number): Set a custom scale for the field. If you want percent from 0-1 set scale to 100.
```

--------------------------------

### Vev Project Output File Structure

Source: https://developer.vev.design/docs/cli/commands

This snippet illustrates the hierarchical file and folder structure created in the destination directory when a Vev project is built or compiled. It includes core HTML pages, embed scripts, shared assets like CSS and JavaScript, and structures for additional pages.

```plaintext
├── index.html              # HTML for the index page
├── embed.html              # HTML file with embed
├── embed.js                # Embed script
├── assets                  # All assets for the project, including images etc.
│   ├── shared.css          # Shared CSS for all pages
│   ├── vev.css             # Default Vev CSS
│   ├── vev.js              # The Vev.js script
│   ├── interactions.js     # Interactions scripts
│   └── ...                 # All assets
├── page-2                  # Additional pages
    ├── index.html          # HTML for page
    ├── embed.html          # HTML embed for page
    ├── embed.js            # Embed script
```

--------------------------------

### Vev Prop Base Properties Reference

Source: https://developer.vev.design/docs/cli/react/vev-props

Defines the common properties applicable to all Vev prop types, including name, type, title, description, and advanced configuration options like validation, visibility, and storage.

```APIDOC
Base Vev Prop Properties:
  name (string): Name of the prop
  type (string): Type of the prop. Can be one of the following: `string | number | boolean | image | object | array | select | link | upload | menu | layout`.
  title (string): Title of the prop visible in the editor. If not set, a sentence case of the name will be used.
  description (string): Description of the prop visible in the editor.
  component (ReactNode): Replaces the field with a custom React component.
  initialValue (JSON | function | async function): The initial value for the field. Must match the type of the field. Can also be a function or async function returning the value. Function takes one argument with the type context.
  validate (boolean | function): Can either be `boolean` or a function returning `boolean`. The first argument of the function is the `value` of the field and the second is the context of the entire form.
  hidden (boolean | function): Hide/show field. Can either be `boolean` or a function returning `boolean`. The first argument of the function is the `value` of the field and the second is the context of the entire form. Can be used to toggle visible based on values from other fields.
  onChange (function): A custom `onChange` for the field. The first argument of the function is the `value` of the field and the second is the context of the entire form.
  storage (string): Select where to store values for the component (like API keys etc.). Can be `project | workspace | account`.
```

--------------------------------

### Vev React Hook: usePages

Source: https://developer.vev.design/docs/cli/react/hooks

Returns all project pages and the root directory of a published project. Useful for navigating or displaying project structure.

```JavaScript
const [pages, rootDir] = usePages();
```

```JavaScript
import { usePages } from '@vev/react';

export default function() {
  const [pages, rootDir] = usePages();

  return (
    <div>
      <p>Root dir: {rootDir}</p>

      <p>Page titles: {pages.map(page => page.title).join(',')}</p>
    </div>
  );
};
```

--------------------------------

### Importing and Instantiating a Web Worker in JavaScript

Source: https://developer.vev.design/docs/cli/web-workers

This snippet demonstrates how to import a Web Worker script by appending `?worker` to the import path, and then how to instantiate the worker. This method allows the worker script to use standard ES `import` statements instead of `importScripts`.

```javascript
import Worker from './my-worker?worker';

const myWorker = new Worker();
```

--------------------------------

### Registering Vev Plugin with Form for API Key Input

Source: https://developer.vev.design/docs/cli/asset-source/api-keys

Demonstrates how to register a Vev plugin that includes a form field for collecting an API key or other credentials. This form ensures that sensitive information is securely deployed with the serverless function and is not retrievable by users.

```TypeScript
registerVevPlugin({
  form: [
    {
      type: "string",
      name: "API_KEY",
      title: "API Key",
    },
  ],
  ...
});
```

--------------------------------

### Define IMenu and IMenuItem Interfaces

Source: https://developer.vev.design/docs/cli/react/hooks

Defines the TypeScript interfaces `IMenu` and `IMenuItem`, which structure menu data within the Vev platform. `IMenu` represents a top-level menu with a title and children, while `IMenuItem` defines individual menu entries, supporting various link types and nested sub-items.

```typescript
interface IMenu {
    title: string;
    children: IMenuItem[];
}

interface IMenuItem {
    key: string;
    title: string;
    link: IPageLink | IPhoneLink | IEmailLink | IExternalLink | IWidgetLink;
    children?: IMenuItem[];
}
```

--------------------------------

### Project Video Asset Interface Definition

Source: https://developer.vev.design/docs/cli/asset-source/handler-function

Extends the `BaseProjectAsset` interface to define properties specific to video assets, such as a video sample, thumbnail, dimensions, duration, and an array for additional video sources/formats.

```TypeScript
export interface ProjectVideoAsset extends BaseProjectAsset {
    videoSample?: string; // A smaller video sample for faster loading in the Vev editor
    videoThumbnail?: string; // A thumbnail for faster loading in the Vev editor
    dimension?: { width: number; height: number };
    duration?: number; // The duration of the video on seconds
    additionalSources: Omit<ProjectVideoAsset, 'additionalSources'>[]; // Additional sources/formats if you are hosting your own assets
}
```

--------------------------------

### Registering an Advanced Vev Component with Product Listing

Source: https://developer.vev.design/docs/cli/react/register-vev-component

This TypeScript React component (`my-component.tsx`) demonstrates how to create a Vev component that displays a list of products. It defines props for a title, a main image, and an array of product objects, each with its own title, price, and image. The component is registered with `@vev/react` using `registerVevComponent`, specifying its name, type, and detailed prop definitions, including an array of objects. It also includes `editableCSS` configurations for styling.

```TypeScript
import React from 'react';
import { registerVevComponent, Image } from '@vev/react';
import styles from './my-component.module.scss';

type Props = {
  title: string;
  image: {
    src: string;
    key: string;
  };
  products: {
    title: string;
    price: number;
    image: {
      src: string;
      key: string;
    };
  }[];
};

const MyComponent = ({ title, image, products = [] }: Props) => {
  return (
    <div className={styles.wrapper}>
      <h1>{title}</h1>
      <Image src={image} />

      {products.map((product, i) => (
        <div key={i}>
          <h2>{product.title}</h2>
          <h2>{product.price}</h2>

          <Image src={product.image} />
        </div>
      ))}
    </div>
  );
};

registerVevComponent(MyComponent, {
  name: 'My awesome component',
  type: 'section',
  props: [
    {
      name: 'title',
      type: 'string',
    },
    {
      name: 'image',
      type: 'image',
    },
    {
      name: 'products',
      type: 'array',
      of: [
        { name: 'name', type: 'string' },
        { name: 'price', type: 'number' },
        { name: 'image', type: 'image' },
      ],
    },
  ],
  editableCSS: [
    {
      selector: styles.wrapper,
      properties: ['background-color'],
    },
    {
      selector: styles.productBorder,
      properties: ['border-color'],
    },
  ],
});

export default MyComponent;
```

--------------------------------

### YouTube Component API: Interactions and Events

Source: https://developer.vev.design/docs/cli/react/interactions

This API documentation details the specific interactions and events exposed by the Vev YouTube component. Interactions represent actions the component can perform (e.g., Play, Mute), while events are signals it dispatches (e.g., On play, On end), allowing other components to react dynamically.

```APIDOC
YouTube Component API:
  Interactions:
    - Play
    - Pause
    - Toggle play
    - Restart
    - Mute
    - Unmute
    - Toggle sound
  Events:
    - On play
    - On pause
    - On end
    - On play time
```

--------------------------------

### Compile Vev Project to Custom Directory

Source: https://developer.vev.design/docs/cli/commands

Compiles the Vev project for production, allowing you to specify a custom output folder for the generated files using the `--dist` flag. By default, compiled files are placed in the `vev/` directory. This option provides flexibility in managing your build outputs.

```bash
vev compile [project-id] --dist your-destination-folder/
```

--------------------------------

### Vev React Hook: IVisibleOptions Interface

Source: https://developer.vev.design/docs/cli/react/hooks

Defines optional parameters for the `useVisible` hook, allowing customization of visibility detection with top and bottom offsets.

```APIDOC
IVisibleOptions:
  offSetTop?: number | string
  offSetBottom?: number | string
```

--------------------------------

### Configure Vev.json for Compile Output Directory

Source: https://developer.vev.design/docs/cli/commands

Illustrates how to configure the `vev.json` file to specify the output directory for compiled project files. This provides a persistent setting for the `--dist` option, ensuring that your project always compiles to the desired location without needing to specify the flag every time.

```json
{
    "library": {
      "key": "project-key",
      "dist": "/your-dist-folder"
    }
}
```