title: Nuxt Vue2 Application, Adding Vue-Touch Package
body: <p>I want to get xy-coordinate data for a touch 'pan' event, where a user presses their finger down and drags it. I am using Vue2 with Nuxt and trying to add the <a href="https://github.com/vuejs/vue-touch" rel="nofollow noreferrer">Vue-Touch Package</a>.</p>
  
  <p>I installed the package with npm and then added a plugin to my Nuxt setup by adding a 'touch' folder to the 'plugins' folder, including an 'index.js' file:</p>
  
  <pre><code>import Vue from 'vue'; 
  import VueTouch from 'vue-touch';
  Vue.use(VueTouch, {name: 'v-touch'});
  export { VueTouch };
  export default VueTouch;
  </code></pre>
  
  <p>Then, I made an element <code>&lt;v-touch v-on:tap="myClickEvent"&gt;My Element&lt;/v-touch&gt;</code> in the page that I want the canvas to be. I am trying to register a tap event to make sure that the package is working properly before I move on to the pan.</p>
  
  <p>When I run my project, I get two errors:</p>
  
  <pre><code>[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside &lt;p&gt;, or missing &lt;tbody&gt;. Bailing hydration and performing full client-side render.
  </code></pre>
  
  <p>&amp; </p>
  
  <pre><code>[Vue warn]: Unknown custom element: &lt;v-touch&gt; - did you register the component correctly? For recursive components, make sure to provide the "name" option.
  </code></pre>
  
  <p>Any suggestions for getting my Vue-Touch package to work?</p>
  
  <p>Thanks in advance.</p>