CODEWITHSUNDEEP
vue.jssvg.js
Kondi
Kondi

Reputation: 1

svg.js inside the vue component

I'm having a huge problem adding the SVG.js library. Like if I don't do it, I still can't draw anything :(

My files: -public/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>

    <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"></script>
  </head>
  <body style="font-size:11px">
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

-src/main.js

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 => h(App)
}).$mount('#app')

-src/components/picture.vue

<template>
<div class="row">
<div class="col-sm border-right" style="margin-right: 15px;background-color: #f3f3f3;">
</div>
<div class="col-auto" style="width: 703px;">
    <div class="row">
        <div class="col px-1 pt-1 pb-1">
            <div class="border row" style="width: 653px;height: calc(100vh - 61px);overflow: auto;">

                <div id="drawing">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-sm border-left" style="margin-left: 15px; background-color: #f3f3f3;">

</div>
</div>
</template>

<script>
import axios from "axios";
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: {

    }
}
</script>

I get this error on the page:

Failed to compile.

./src/components/Picture.vue Module Error (from ./node_modules/eslint-loader/index.js):

D:\inzynierka\projekt\src\components\Picture.vue 41:17 error 'rect' is assigned a value but never used no-unused-vars

✖ 1 problem (1 error, 0 warnings)

Upvotes: 0

Views: 376

Answers (1)

Stevenson Lee
Stevenson Lee

Reputation: 61

Variables that are declared and not used anywhere in the code are most likely an error due to incomplete refactoring. Such variables take up space in the code and can lead to confusion by readers.

var rect = draw.rect(100, 100) rect is not used.

if you want ignore it. you can do like this

      // eslint-disable-next-line no-unused-vars
      var rect = draw.rect(100, 100)

Upvotes: 1

Related Questions