CODEWITHSUNDEEP
javascriptlaravelvue.jssvgsvg.js
Shahbaz A.
Shahbaz A.

Reputation: 4356

How do i use SVG.js plugins in vue.js?

I am using svg.js in my Laravel project running vue.js.

This is how i use svg.js

Step 1: Install svg.js as a plugin in my vue app.

import svgJs from "svg.js/dist/svg"

export default {
    install(Vue) {
        Vue.prototype.$svg = svgJs
    }
}

Step 2: Import and use the plugin.

import svgJs from "./plugins/vueSvgPlugin"

Vue.use(svgJs);

Step 3: Then i can do this.

console.log(this.$svg);

console.log(this.$svg.get("samplesvg"));

However i am not sure how to add the svg.js plugins. I want to use below three plugins, in case someone wants to know.

  1. svg.select.js
  2. svg.resize.js
  3. svg.draggable.js

Upvotes: 2

Views: 2738

Answers (3)

Fuzzyma
Fuzzyma

Reputation: 8494

To use version 3.x you would either just do it with esm imports:

import { SVG } from '@svgdotjs/svg.js'
import '@svgdotjs/svg.draggable.js'
// ...

No need to use plugins for vue. Just use SVG() in your code when you need it. If you need other functionality lile the "old" SVG.on() you need to import it, too: import { SVG, on } from '@svgdotjs/svg.js'

Or you include it via script tags. svg.js always ships with prebundled files for that purpose:

<script src="node_modules/@svgdotjs/svg.js/dist/svg.js"></script>
<script src="node_modules/@svgdotjs/svg.draggable.js/dist/svg.draggable.js"></script>

You can just use the global SVG variable in that case and access everything with it like SVG.on(...)

Upvotes: 1

Shahbaz A.
Shahbaz A.

Reputation: 4356

I had to change my approach according to comment by Fuzzyma

So i just did simple import in my app file, and it all worked fine. It is also worth mentioning that i used versions < 3.0 to make it work.

import * as SVG from 'svg.js/dist/svg';
import './plugins/svg.draggable/dist/svg.draggable';
import './plugins/svg.select/dist/svg.select';
import './plugins/svg.resize/dist/svg.resize';

Upvotes: 0

User 28
User 28

Reputation: 5158

I have my solution for working with non npm/module library.

First I will use jsdelivr to serve file from directly from Github. For example https://cdn.jsdelivr.net/npm/[email protected]/dist/svg.min.js.

Then I use script.js to load them.

script.order([
  "https://cdn.jsdelivr.net/npm/[email protected]/dist/svg.min.js",
  "https://cdn.jsdelivr.net/npm/[email protected]/dist/svg.select.min.js"
], () => {
  // window.SVG is available
});

Live Example

Upvotes: 1

Related Questions