quick start Vue

This is a small guide to install the token negotiator with Vue.

Using the command line / Terminal:

1. Install the CLI package for Vue npm install -g @vue/cli @vue/cli-service-global
2. run vue create hello-world
3. cd into the project
4. run npm i @tokenscript/token-negotiator to install the token negotiator.
5. Following Readme, or using this example code add the token negotiator to the project.

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <div class="overlay-tn"></div>
</template>

<script>

  import HelloWorld from './components/HelloWorld.vue'
  import { Client } from '@tokenscript/token-negotiator';
  import "@tokenscript/token-negotiator/dist/theme/style.css";

  const negotiator = new Client({
    type: 'active',
    issuers: [
        { collectionID: 'Give your collection name here', contract: 'Smart Contract Address Goes Here 0x...', chain: 'Chain Goes Here' }
    ],
    options: {
        overlay: {
            openingHeading: "Open a new world of discounts available with your tokens.",
            issuerHeading: "Get discount with Ticket",
            repeatAction: "try again",
            theme: "light",
            position: "bottom-right"
        },
        filters: {},
    }
  });

  negotiator.on("tokens-selected", (tokens) => {
      console.log(tokens);
  });

  negotiator.on("token-proof", (proof) => {
      console.log(proof);
  });

  negotiator.negotiate();

  export default {
    name: 'App',
    components: {
      HelloWorld
    }
  }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

6. Inside /public/index.html add the following script, designed to provide full attestations via communication with the Token Negotiator.

<script src="https://raw.githubusercontent.com/TokenScript/token-negotiator/main/authenticator.js"></script>