title: svg.js inside the vue component
body: <p>I'm having a huge problem adding the SVG.js library. Like if I don't do it, I still can't draw anything :(</p>
  <p>My files:
  -public/index.html</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1.0&quot;&gt;
      &lt;link rel=&quot;icon&quot; href=&quot;&lt;%= BASE_URL %&gt;favicon.ico&quot;&gt;
      &lt;title&gt;&lt;%= htmlWebpackPlugin.options.title %&gt;&lt;/title&gt;
  
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body style=&quot;font-size:11px&quot;&gt;
      &lt;noscript&gt;
        &lt;strong&gt;We're sorry but &lt;%= htmlWebpackPlugin.options.title %&gt; doesn't work properly without JavaScript enabled. Please enable it to continue.&lt;/strong&gt;
      &lt;/noscript&gt;
      &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
      &lt;!-- built files will be auto injected --&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>-src/main.js</p>
  <pre><code>import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  import { SVG } from '@svgdotjs/svg.js'
  
  
  import 'bootstrap/dist/css/bootstrap.min.css'
  Vue.use(SVG);
  
  Vue.config.productionTip = false
  
  new Vue({
    router, SVG,
    render: h =&gt; h(App)
  }).$mount('#app')
  </code></pre>
  <p>-src/components/picture.vue</p>
  <pre><code>&lt;template&gt;
  &lt;div class=&quot;row&quot;&gt;
  &lt;div class=&quot;col-sm border-right&quot; style=&quot;margin-right: 15px;background-color: #f3f3f3;&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-auto&quot; style=&quot;width: 703px;&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col px-1 pt-1 pb-1&quot;&gt;
              &lt;div class=&quot;border row&quot; style=&quot;width: 653px;height: calc(100vh - 61px);overflow: auto;&quot;&gt;
  
                  &lt;div id=&quot;drawing&quot;&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-sm border-left&quot; style=&quot;margin-left: 15px; background-color: #f3f3f3;&quot;&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from &quot;axios&quot;;
  import { SVG } from '@svgdotjs/svg.js'
  
  export default {
      data() {
          return {
  
          }
      },
      created() {
          
              var draw = SVG().addTo('drawing').size(400, 400) 
              var rect = draw.rect(100, 100) 
  
      },
      methods: {
  
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>I get this error on the page:</p>
  <blockquote>
  <p>Failed to compile.</p>
  <p>./src/components/Picture.vue Module Error (from
  ./node_modules/eslint-loader/index.js):</p>
  <p>D:\inzynierka\projekt\src\components\Picture.vue   41:17  error
  'rect' is assigned a value but never used  no-unused-vars</p>
  <p>✖ 1 problem (1 error, 0 warnings)</p>
  </blockquote>