update READMEs for vue(2/3)

Author: Shard

docs/assets/highlight.css

@@ -25,6 +25,8 @@
     --dark-hl-11: #D4D4D4;
     --light-hl-12: #0000FF;
     --dark-hl-12: #CE9178;
+    --light-hl-13: #008000;
+    --dark-hl-13: #6A9955;
     --light-code-background: #FFFFFF;
     --dark-code-background: #1E1E1E;
 }
@@ -43,6 +45,7 @@
     --hl-10: var(--light-hl-10);
     --hl-11: var(--light-hl-11);
     --hl-12: var(--light-hl-12);
+    --hl-13: var(--light-hl-13);
     --code-background: var(--light-code-background);
 } }
 
@@ -60,6 +63,7 @@
     --hl-10: var(--dark-hl-10);
     --hl-11: var(--dark-hl-11);
     --hl-12: var(--dark-hl-12);
+    --hl-13: var(--dark-hl-13);
     --code-background: var(--dark-code-background);
 } }
 
@@ -77,6 +81,7 @@
     --hl-10: var(--light-hl-10);
     --hl-11: var(--light-hl-11);
     --hl-12: var(--light-hl-12);
+    --hl-13: var(--light-hl-13);
     --code-background: var(--light-code-background);
 }
 
@@ -94,6 +99,7 @@
     --hl-10: var(--dark-hl-10);
     --hl-11: var(--dark-hl-11);
     --hl-12: var(--dark-hl-12);
+    --hl-13: var(--dark-hl-13);
     --code-background: var(--dark-code-background);
 }
 
@@ -110,4 +116,5 @@
 .hl-10 { color: var(--hl-10); }
 .hl-11 { color: var(--hl-11); }
 .hl-12 { color: var(--hl-12); }
+.hl-13 { color: var(--hl-13); }
 pre, code { background: var(--code-background); }

docs/modules/_userback_vue.html

@@ -36,6 +36,13 @@ <h2>Quickstart</h2>
 <p>The <code>$userback</code> API can now be used throughout your application:</p>
 <pre><code class="language-vue"><span class="hl-5">&lt;</span><span class="hl-10">template</span><span class="hl-5">&gt;</span><br/><span class="hl-0">  </span><span class="hl-5">&lt;</span><span class="hl-10">button</span><span class="hl-0"> </span><span class="hl-7">type</span><span class="hl-0">=</span><span class="hl-12">&quot;button&quot;</span><span class="hl-0"> @</span><span class="hl-7">click</span><span class="hl-0">=</span><span class="hl-0">&quot;</span><span class="hl-2">$userback</span><span class="hl-0">.</span><span class="hl-4">show</span><span class="hl-0">()</span><span class="hl-0">&quot;</span><span class="hl-5">&gt;</span><span class="hl-0">Show</span><span class="hl-5">&lt;/</span><span class="hl-10">button</span><span class="hl-5">&gt;</span><br/><span class="hl-0">  </span><span class="hl-5">&lt;</span><span class="hl-10">button</span><span class="hl-0"> </span><span class="hl-7">type</span><span class="hl-0">=</span><span class="hl-12">&quot;button&quot;</span><span class="hl-0"> @</span><span class="hl-7">click</span><span class="hl-0">=</span><span class="hl-0">&quot;</span><span class="hl-2">$userback</span><span class="hl-0">.</span><span class="hl-4">hide</span><span class="hl-0">()</span><span class="hl-0">&quot;</span><span class="hl-5">&gt;</span><span class="hl-0">Hide</span><span class="hl-5">&lt;/</span><span class="hl-10">button</span><span class="hl-5">&gt;</span><br/><br/><span class="hl-0">  </span><span class="hl-5">&lt;</span><span class="hl-10">button</span><span class="hl-0"> </span><span class="hl-7">type</span><span class="hl-0">=</span><span class="hl-12">&quot;button&quot;</span><span class="hl-0"> @</span><span class="hl-7">click</span><span class="hl-0">=</span><span class="hl-0">&quot;</span><span class="hl-2">$userback</span><span class="hl-0">.</span><span class="hl-4">open</span><span class="hl-0">(</span><span class="hl-3">&#39;bug&#39;</span><span class="hl-0">)</span><span class="hl-0">&quot;</span><span class="hl-5">&gt;</span><span class="hl-0">Open Bugs</span><span class="hl-5">&lt;/</span><span class="hl-10">button</span><span class="hl-5">&gt;</span><br/><span class="hl-0">  </span><span class="hl-5">&lt;</span><span class="hl-10">button</span><span class="hl-0"> </span><span class="hl-7">type</span><span class="hl-0">=</span><span class="hl-12">&quot;button&quot;</span><span class="hl-0"> @</span><span class="hl-7">click</span><span class="hl-0">=</span><span class="hl-0">&quot;</span><span class="hl-2">$userback</span><span class="hl-0">.</span><span class="hl-4">open</span><span class="hl-0">(</span><span class="hl-3">&#39;general&#39;</span><span class="hl-0">, </span><span class="hl-3">&#39;screenshot&#39;</span><span class="hl-0">)</span><span class="hl-0">&quot;</span><span class="hl-5">&gt;</span><span class="hl-0">Screenshot me!</span><span class="hl-5">&lt;/</span><span class="hl-10">button</span><span class="hl-5">&gt;</span><br/><span class="hl-5">&lt;/</span><span class="hl-10">template</span><span class="hl-5">&gt;</span>
 </code></pre>
+
+<a href="#nuxt" id="nuxt" style="color: inherit; text-decoration: none;">
+  <h2>Nuxt</h2>
+</a>
+<p>We also support the Nuxt framework and have an <a href="https://github.com/userback/widget-js/tree/develop/examples/nuxt">example</a> of it&#39;s usage within a project.</p>
+<pre><code class="language-javascript"><span class="hl-13">// plugins/userback.client.js</span><br/><span class="hl-1">import</span><span class="hl-0"> </span><span class="hl-2">UserbackPlugin</span><span class="hl-0"> </span><span class="hl-1">from</span><span class="hl-0"> </span><span class="hl-3">&#39;@userback/vue&#39;</span><span class="hl-0">;</span><br/><br/><span class="hl-1">export</span><span class="hl-0"> </span><span class="hl-1">default</span><span class="hl-0"> </span><span class="hl-4">defineNuxtPlugin</span><span class="hl-0">((</span><span class="hl-2">nuxtApp</span><span class="hl-0">) </span><span class="hl-8">=&gt;</span><span class="hl-0"> {</span><br/><span class="hl-0">    </span><span class="hl-8">const</span><span class="hl-0"> { </span><span class="hl-2">UB_TOKEN</span><span class="hl-0">: </span><span class="hl-9">token</span><span class="hl-0"> } = </span><span class="hl-4">useRuntimeConfig</span><span class="hl-0">();</span><br/><span class="hl-0">    </span><span class="hl-2">nuxtApp</span><span class="hl-0">.</span><span class="hl-2">vueApp</span><span class="hl-0">.</span><span class="hl-4">use</span><span class="hl-0">(</span><span class="hl-2">UserbackPlugin</span><span class="hl-0">, { </span><span class="hl-2">token</span><span class="hl-0"> });</span><br/><span class="hl-0">});</span>
+</code></pre>
 <p>For more information about available configuration settings and and functions available, see our <a href="https://docs.userback.io/reference/javascript-api-overview">Javascript API</a></p>
 </section></section>
 <section class="tsd-panel-group tsd-index-group">

docs/modules/_userback_vue2.html

@@ -36,6 +36,13 @@ <h2>Quickstart</h2>
 <p>You can access the Userback api via the <code>Vue.prototype.$userback</code> object:</p>
 <pre><code class="language-vue"><span class="hl-5">&lt;</span><span class="hl-10">template</span><span class="hl-5">&gt;</span><br/><span class="hl-0">  </span><span class="hl-5">&lt;</span><span class="hl-10">div</span><span class="hl-0"> </span><span class="hl-7">id</span><span class="hl-0">=</span><span class="hl-12">&quot;app&quot;</span><span class="hl-5">&gt;</span><br/><span class="hl-0">    </span><span class="hl-5">&lt;</span><span class="hl-10">button</span><span class="hl-0"> </span><span class="hl-7">type</span><span class="hl-0">=</span><span class="hl-12">&quot;button&quot;</span><span class="hl-0"> </span><span class="hl-7">v-on</span><span class="hl-0">:</span><span class="hl-7">click</span><span class="hl-0">=</span><span class="hl-0">&quot;</span><span class="hl-2">$userback</span><span class="hl-0">.</span><span class="hl-4">open</span><span class="hl-0">(</span><span class="hl-3">&#39;bug&#39;</span><span class="hl-0">)</span><span class="hl-0">&quot;</span><span class="hl-5">&gt;</span><span class="hl-0">Open Bugs</span><span class="hl-5">&lt;/</span><span class="hl-10">button</span><span class="hl-5">&gt;</span><br/><span class="hl-0">    </span><span class="hl-5">&lt;</span><span class="hl-10">button</span><span class="hl-0"> </span><span class="hl-7">type</span><span class="hl-0">=</span><span class="hl-12">&quot;button&quot;</span><span class="hl-0"> </span><span class="hl-7">v-on</span><span class="hl-0">:</span><span class="hl-7">click</span><span class="hl-0">=</span><span class="hl-0">&quot;</span><span class="hl-2">$userback</span><span class="hl-0">.</span><span class="hl-4">open</span><span class="hl-0">(</span><span class="hl-3">&#39;general&#39;</span><span class="hl-0">, </span><span class="hl-3">&#39;screenshot&#39;</span><span class="hl-0">)</span><span class="hl-0">&quot;</span><span class="hl-5">&gt;</span><span class="hl-0">Screenshot me!</span><span class="hl-5">&lt;/</span><span class="hl-10">button</span><span class="hl-5">&gt;</span><br/><span class="hl-0">  </span><span class="hl-5">&lt;/</span><span class="hl-10">div</span><span class="hl-5">&gt;</span><br/><span class="hl-5">&lt;/</span><span class="hl-10">template</span><span class="hl-5">&gt;</span>
 </code></pre>
+
+<a href="#nuxt" id="nuxt" style="color: inherit; text-decoration: none;">
+  <h2>Nuxt</h2>
+</a>
+<p>We also support the Nuxt framework and have an <a href="https://github.com/userback/widget-js/tree/develop/examples/nuxt2">example</a> of it&#39;s usage within a project.</p>
+<pre><code class="language-javascript"><span class="hl-13">// plugins/userback.client.js</span><br/><span class="hl-1">import</span><span class="hl-0"> </span><span class="hl-2">UserbackPlugin</span><span class="hl-0"> </span><span class="hl-1">from</span><span class="hl-0"> </span><span class="hl-3">&#39;@userback/vue2&#39;</span><span class="hl-0">;</span><br/><span class="hl-2">Vue</span><span class="hl-0">.</span><span class="hl-4">use</span><span class="hl-0">(</span><span class="hl-2">UserbackPlugin</span><span class="hl-0">, { </span><span class="hl-2">token:</span><span class="hl-0"> </span><span class="hl-2">process</span><span class="hl-0">.</span><span class="hl-2">env</span><span class="hl-0">.</span><span class="hl-9">USERBACK_TOKEN</span><span class="hl-0"> });</span>
+</code></pre>
 <p>For more information about available configuration settings and and functions available, see our <a href="https://docs.userback.io/reference/javascript-api-overview">Javascript API</a></p>
 </section></section>
 <section class="tsd-panel-group tsd-index-group">

widget-vue/README.md

@@ -25,4 +25,17 @@ The `$userback` API can now be used throughout your application:
 </template>
 ```
 
+## Nuxt
+We also support the Nuxt framework and have an [example](https://github.com/userback/widget-js/tree/develop/examples/nuxt) of it's usage within a project.
+
+``` javascript
+// plugins/userback.client.js
+import UserbackPlugin from '@userback/vue';
+
+export default defineNuxtPlugin((nuxtApp) => {
+    const { UB_TOKEN: token } = useRuntimeConfig();
+    nuxtApp.vueApp.use(UserbackPlugin, { token });
+});
+```
+
 For more information about available configuration settings and and functions available, see our [Javascript API](https://docs.userback.io/reference/javascript-api-overview)

widget-vue2/README.md

@@ -24,4 +24,13 @@ You can access the Userback api via the `Vue.prototype.$userback` object:
 </template>
 ```
 
+## Nuxt
+We also support the Nuxt framework and have an [example](https://github.com/userback/widget-js/tree/develop/examples/nuxt2) of it's usage within a project.
+
+``` javascript
+// plugins/userback.client.js
+import UserbackPlugin from '@userback/vue2';
+Vue.use(UserbackPlugin, { token: process.env.USERBACK_TOKEN });
+```
+
 For more information about available configuration settings and and functions available, see our [Javascript API](https://docs.userback.io/reference/javascript-api-overview)