chore: add readme, fix type (#7)

* fix typo

Author: salza80

.env.example

@@ -1 +1 @@
-VITE_TELEMENTRYDECK_APP_ID=telementryDeckAppId
+VITE_TELEMETRYDECK_APP_ID=telementryDeckAppId

README.md

@@ -1,9 +1,107 @@
-# Vue 3 + TypeScript + Vite
+# telemetrydeck-vue
+
+A library for using TelemetryDeck in your React app.
 
 [![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)
 
+## Installation
+
+```shell
+npm i @peerigon/telemetrydeck-vue --save
+```
+
+## Setup
+
+Set up the plugin in your application setup:
+
+```javascript
+import TelemetryDeckPlugin from '@peerigon/telemetrydeck-vue';
+
+const app = createApp(App);
+app.use(TelemetryDeckPlugin, {
+  appID: "{your telemetrydeck appID}",
+  testMode: true, // optional - defaults to false
+  clientUser: 'Guest' // optional - defaults to 'Guest'
+});
+
+app.mount('#app');
+```
+
+## Basic Usage
+
+```vue
+<script setup lang="ts">
+import { useTelemetryDeck } from "@peerigon/telemetrydeck-vue";
+const { signal, queue, setClientUser } = useTelemetryDeck();
+
+const changeClientUserClick = () => {
+  setClientUser('user' + Math.floor(Math.random() * 1000));
+};
+
+const buttonSignalClick = () => {
+  signal('example_signal_event_name', {
+    custom_data: 'other_data', // any custom data as required
+  });
+};
+
+const buttonQueueClick = () => {
+  queue('example_queue_event_name', {
+    custom_data: 'other_data', // any custom data as required
+  });
+};
+
+const buttonSignalClickWithOptions = () => {
+  signal('example_signal_event_name_with_options', {
+    custom_data: 'other_data', // any custom data as required
+  }, {
+    testMode: true,
+    clientUser: 'other_user',
+    appID: 'other_app_id',
+  }); // telemetryDeck options (optional)
+};
+
+const buttonQueueClickWithOptions = () => {
+  queue('example_queue_event_name_with_options', {
+    custom_data: 'other_data', // any custom data as required
+  }, {
+    testMode: true,
+    clientUser: 'other_user',
+    appID: 'other_app_id',
+  }); // telemetryDeck options (optional)
+};
+</script>
+
+<template>
+  <div>
+    <div>
+      <button id="btnSignalClick" @click="buttonSignalClick">Log a click with signal</button>
+      <button id="btnQueueClick" @click="buttonQueueClick">Log a click with queue</button>
+      <button id="btnSetClient" @click="changeClientUserClick">Change user</button>
+    </div>
+    <div>
+      <button id="btnSignalClickWithOptions" @click="buttonSignalClickWithOptions">Log a click with signal with Options</button>
+      <button id="btnQueueClickWithOptions" @click="buttonQueueClickWithOptions">Log a click with queue with Options</button>
+    </div>
+  </div>
+</template>
+```
+
+## Contributions
+
+### Local Development
+
+To run the plugin locally for development:
+
+1. Install Node.js v20
+2. Run `npm i`
+3. create .env file from .env.example and add your test telemetryDeck appID. Create an account here: [telemetrydeck.com](https://telemetrydeck.com/)
+3. Run `npm run dev`
+4. Navigate to [http://localhost:5173/](http://localhost:5173/) for the test page
 
+### Tests
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+Run the tests with:
 
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+```shell
+npm run test
+```

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "telementrydeck-vue",
+  "name": "@peerigon/telemetrydeck-vue",
   "private": false,
   "version": "0.0.0",
   "type": "module",

package.json

@@ -1,11 +1,11 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
-import TelementryDeckPlugin from './'
+import TelemetryDeckPlugin from './'
 
 const app = createApp(App)
-app.use(TelementryDeckPlugin, {
-  appID: import.meta.env.VITE_TELEMENTRYDECK_APP_ID || 'test-app-id',
+app.use(TelemetryDeckPlugin, {
+  appID: import.meta.env.VITE_TELEMETRYDECK_APP_ID || 'test-app-id',
   testMode: true,
 })
 

src/main.ts

@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly VITE_TELEMENTRYDECK_APP_ID: string;
+  readonly VITE_TELEMETRYDECK_APP_ID: string;
 }
 
 interface ImportMeta {