CODEWITHSUNDEEP
vue.jssnap.svg
Luneboy
Luneboy

Reputation: 53

Snap.svg with Vue.js

I'm trying to use Snap.svg in my Vue.js app, however I'm confuse with how to do so. I used Vue CLI 3 command to initialized my project, and install the snapsvg dependency with yarn.

Also, I read this article. But I can't find the webpack.base.conf.js file !

When I try to import the dependency into my main.js file or into any component I've got no error but my App become empty.

What did I miss to properly import Snap.svg in my Vue.js app ?

Upvotes: 2

Views: 2686

Answers (3)

Ralexrdz
Ralexrdz

Reputation: 833

Try this on any of your Vue components

Run: npm install snapsvg-cjs

<template>
  <!-- Important that HTML element should be an SVG tag -->
  <svg id="chart"></svg>

</template>

<script>
import * as Snap from 'snapsvg-cjs'

export default {
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {

     var s = Snap('#chart');

     s.rect(0,0, 100, 100)
     
    },
  },
};
</script>

<style>
  #chart {
    width: 100%;
    height: 500px;
  }
</style>

Upvotes: 0

Gal Margalit
Gal Margalit

Reputation: 5844

Instead of hacking webpack,
use snapsvg-cjs

This project simply unwraps the excellent SnapSVG from its published AMD format and hosts it on NPM as CommonJS in a package called snapsvg-cjs. This package then works out-of-the-box with Webpack, without needing any import-loader hax.

npm install snapsvg-cjs;


the only line of code you'll need:

import "snapsvg-cjs";

Upvotes: 4

user1276919
user1276919

Reputation: 558

In Vue cli 3, webpack is configured in vue.config.js

To use snap place the vue.config.js with the following content in your root directory

module.exports = {
  chainWebpack: config => {
    config.module
      .rule("snapsvg")
      .test(require.resolve("snapsvg"))
      .use("imports-loader?this=>window,fix=>module.exports=0")
      .loader("imports-loader")
      .end();
  }
};

add this line to your main.js file:

const snap = require(`imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js`);

Upvotes: 3

Related Questions