### Install Dependencies

Source: https://github.com/growsurf/growsurf-samples/blob/master/samples/growsurf-vue-example/README.md

This command installs the necessary project dependencies using npm, which are required to run the GrowSurf + Vue.js sample application.

```bash
npm i
```

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

### Start GrowSurf Vue.js Application

Source: https://github.com/growsurf/growsurf-samples/blob/master/samples/growsurf-vue-example/README.md

This command starts the Vue.js development server, making the GrowSurf integrated application accessible in the browser.

```bash
npm start
```

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

### Vue.js GrowSurf Integration

Source: https://github.com/growsurf/growsurf-samples/blob/master/samples/growsurf-vue-example/index.html

A basic example demonstrating how to integrate GrowSurf with a Vue.js application. This setup allows for ready or not-ready states within the Vue component.

```javascript
// Vue.js component example for GrowSurf integration
// (Specific code would depend on the exact implementation needs)
```

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

### Listen for GrowSurf Ready Event - JavaScript

Source: https://context7.com/growsurf/growsurf-samples/llms.txt

This snippet shows how to listen for the `grsfReady` event, which indicates that the GrowSurf SDK has been fully initialized and the `window.growsurf` API is available. It's crucial to wait for this event before interacting with the GrowSurf API to prevent errors.

```javascript
// Add event listener for GrowSurf initialization
const handleGrowSurfReady = () => {
  // Remove listener after first execution
  window.removeEventListener('grsfReady', handleGrowSurfReady);

  // GrowSurf is now ready - access window.growsurf API
  console.log('GrowSurf initialized:', window.growsurf);

  // Perform operations like auto-authentication or display embeddables
};

window.addEventListener('grsfReady', handleGrowSurfReady);
```

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

### Load GrowSurf Script - HTML and JavaScript

Source: https://context7.com/growsurf/growsurf-samples/llms.txt

Demonstrates how to load the GrowSurf JavaScript SDK. It can be included directly in HTML using a script tag or dynamically initialized via JavaScript. Ensure the campaign ID is correctly set. This method is essential for making the GrowSurf API available.

```html
<script type="text/javascript">
  (function(g,r,s,f){
    g.growsurf={};
    g.grsfSettings={campaignId:"YOUR_CAMPAIGN_ID",version:"2.0.0"};
    s=r.getElementsByTagName("head")[0];
    f=r.createElement("script");
    f.async=1;
    f.src="https://growsurf.com/growsurf.js"+"?v="+g.grsfSettings.version;
    f.setAttribute("grsf-campaign", g.grsfSettings.campaignId);
    !g.grsfInit?s.appendChild(f):"";
  })(window,document);
</script>
```

```javascript
// Dynamically load GrowSurf script
const script = document.createElement('script');
script.async = true;
script.src = 'https://growsurf.com/growsurf.js?v=2.0.0';
script.setAttribute('grsf-campaign', 'YOUR_CAMPAIGN_ID');
document.head.appendChild(script);
```

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

### Initialize GrowSurf in Vue.js

Source: https://github.com/growsurf/growsurf-samples/blob/master/samples/growsurf-vue-example/README.md

This snippet initializes GrowSurf by dynamically loading its JavaScript SDK into the HTML header. It requires a campaign ID to be specified. The script ensures GrowSurf is loaded only once.

```javascript
(function(g,r,s,f){g.growsurf={};g.grsfSettings={campaignId:"<CAMPAIGN_ID>",version:"2.0.0"};s=r.getElementsByTagName("head")[0];f=r.createElement("script");f.async=1;f.src="https://growsurf.com/growsurf.js"+"?v="+g.grsfSettings.version;f.setAttribute("grsf-campaign", g.grsfSettings.campaignId);!g.grsfInit?s.appendChild(f):"";})(window,document);
```

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

### Participant Auto-Authentication - JavaScript

Source: https://context7.com/growsurf/growsurf-samples/llms.txt

Demonstrates how to automatically authenticate participants using their email and a server-generated hash. This requires fetching authentication information from a backend API, where the hash is securely generated using HMAC-SHA256 with a campaign secret key. The `window.growsurf.init()` method is called after the `grsfReady` event.

```javascript
// Fetch participant auth info from your backend API
async function getAuthInfo() {
  // In production, fetch this from your server
  // The hash should be generated server-side using HMAC-SHA256
  // with your campaign's auto-auth secret key
  return {
    email: 'participant@example.com',
    hash: 'SERVER_GENERATED_HMAC_HASH'
  };
}

// Initialize GrowSurf with participant credentials
async function autoAuthParticipant() {
  const authInfo = await getAuthInfo();
  window.growsurf.init(authInfo);
}

// Call after grsfReady event
window.addEventListener('grsfReady', async () => {
  await autoAuthParticipant();
});
```

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

### JavaScript GrowSurf Initialization

Source: https://github.com/growsurf/growsurf-samples/blob/master/samples/growsurf-vue-example/index.html

This snippet initializes GrowSurf by dynamically creating and appending a script tag to the document's head. It ensures GrowSurf is loaded only once and sets the campaign ID and version from settings.

```javascript
function(g,r,s,f){g.growsurf={};g.grsfSettings={campaignId:"<CAMPAIGN_ID>",version:"2.0.0"};s=r.getElementsByTagName("head")[0];f=r.createElement("script");f.async=1;f.src="https://growsurf.com/growsurf.js"+"?v="+g.grsfSettings.version;f.setAttribute("grsf-campaign", g.grsfSettings.campaignId);!g.grsfInit?s.appendChild(f):"";})(window,document);
```

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

### Integrate GrowSurf with Vue.js

Source: https://context7.com/growsurf/growsurf-samples/llms.txt

This implementation uses a Vue instance to track the GrowSurf SDK readiness state. It conditionally renders UI elements based on whether the SDK has finished loading and initializing.

```html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
      (function(g,r,s,f){
        g.growsurf={};
        g.grsfSettings={campaignId:"YOUR_CAMPAIGN_ID",version:"2.0.0"};
        s=r.getElementsByTagName("head")[0];
        f=r.createElement("script");
        f.async=1;
        f.src="https://growsurf.com/growsurf.js"+"?v="+g.grsfSettings.version;
        f.setAttribute("grsf-campaign", g.grsfSettings.campaignId);
        !g.grsfInit?s.appendChild(f):"";
      })(window,document);
    </script>
  </head>
  <body>
    <div id="app">
      <div style="margin: auto; width: 400px">
        <h3>Vue.js + GrowSurf
          (<span v-if="grsfReady" style="color: green">Ready</span>
           <span v-if="!grsfReady" style="color: red">Loading...</span>)
        </h3>
        <div data-grsf-block-form></div>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>
```

```javascript
const app = new Vue({
  el: '#app',
  data: {
    grsfReady: false
  }
});

const handleGrowSurfReady = () => {
  window.removeEventListener('grsfReady', handleGrowSurfReady);
  app.grsfReady = true;
};

window.addEventListener('grsfReady', handleGrowSurfReady);
```

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

### Embed GrowSurf Referral Form - HTML

Source: https://context7.com/growsurf/growsurf-samples/llms.txt

Shows how to embed the GrowSurf referral form widget into your web application using HTML. By adding the `data-grsf-block-form` attribute to a container element, the referral form will automatically render once the GrowSurf SDK is initialized. This allows participants to easily refer friends.

```html
<!-- Container for GrowSurf referral form -->
<div data-grsf-block-form></div>

<!-- The form renders automatically when GrowSurf initializes -->
<!-- Participants can enter emails to refer friends -->
```

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

### Integrate GrowSurf with React Component

Source: https://context7.com/growsurf/growsurf-samples/llms.txt

This React component dynamically loads the GrowSurf SDK, listens for the initialization event, and automatically authenticates the current user. It uses the component lifecycle to manage script injection and SDK readiness.

```javascript
import React from 'react';

class GrowSurfComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleGrowSurfReady = this.handleGrowSurfReady.bind(this);
  }

  async getAuthInfo() {
    return {
      email: 'user@example.com',
      hash: 'SERVER_GENERATED_HASH'
    };
  }

  async autoAuthParticipant() {
    const authInfo = await this.getAuthInfo();
    window.growsurf.init(authInfo);
  }

  insertGrowsurfScript() {
    const script = document.createElement('script');
    script.src = 'https://growsurf.com/growsurf.js?v=2.0.0';
    script.setAttribute('grsf-campaign', 'YOUR_CAMPAIGN_ID');
    script.async = true;
    document.head.appendChild(script);
  }

  async handleGrowSurfReady() {
    window.removeEventListener('grsfReady', this.handleGrowSurfReady, false);
    await this.autoAuthParticipant();
  }

  componentDidMount() {
    if (!window.growsurf) {
      this.insertGrowsurfScript();
      window.addEventListener('grsfReady', this.handleGrowSurfReady);
    } else {
      this.handleGrowSurfReady();
    }
  }

  render() {
    return (
      <div style={{ margin: 'auto', width: '400px' }}>
        <h3>React + GrowSurf</h3>
        <p>Referral form below:</p>
        <div data-grsf-block-form></div>
      </div>
    );
  }
}

export default GrowSurfComponent;
```

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

### Inject GrowSurf Script Dynamically

Source: https://github.com/growsurf/growsurf-samples/blob/master/samples/growsurf-react-example/README.md

This function programmatically injects the GrowSurf SDK script into the document head. It requires a valid campaign ID to associate the referral tracking with your specific GrowSurf campaign.

```javascript
insertGrowsurfScript() {
  const script = document.createElement('script');
  script.src = 'https://growsurf.com/growsurf.js?v=2.0.0';
  script.setAttribute('grsf-campaign', '<CAMPAIGN_ID>');
  script.async = true;
  document.head.appendChild(script);
}
```

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

### Implement GrowSurf Participant Auto-Authentication

Source: https://github.com/growsurf/growsurf-samples/blob/master/samples/growsurf-react-example/README.md

This function provides the necessary participant credentials for GrowSurf auto-authentication. Replace the placeholder email and hash with values retrieved from your backend server to securely identify participants.

```javascript
async getAuthInfo() {
  return {
    email: '<PARTICIPANT_EMAIL>',
    hash: '<PARTICIPANT_HASH>'
  };
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.