artrayd

<svg  viewBox="362 362 300 300" width="300" height="300">

<path id="motionPath" fill="none" stroke="none" stroke-miterlimit="10" d="M516.9,506.4c16.2-17.6,46.4-37.3,84-32.7c59.4,7.1,49.4,60.1-3,67.8
	c-15.6,2.3-58.2-3.3-90-24.3c-31.8-20.9-53-57.1-57.1-72.3c-13.9-51.2,30.7-81.4,60.9-29.8c18.9,32.4,14.4,64.6,3.8,89.2
	c-3.4,6.7-6.6,12.8-8.9,18.3c-9.1,21.8-13.9,54.9,3.6,86c29.2,52.3,74.4,22.9,61.5-28.5c-3.8-15.4-25.2-52.6-56.7-74
	c-31.4-21.5-72.9-27.3-88.6-25.4c-52.7,6.7-63.7,59.3-4.4,67.6C466.1,554.4,503.6,524.9,516.9,506.4z"/>



<!-- RED -->

artrayd

<template>
  <div id="app">
      
        <FreehandDrawSVG
          v-bind:title="drawProps.title"
          v-bind:colors="drawProps.colors"
          v-bind:bgColors="drawProps.bgColors"
          v-bind:lineColor = "drawProps.lineColor"
          v-bind:bgColor = "drawProps.bgColor"
          v-on:changeLineColor = "changeLineColor"

artrayd

{
  "letters": [
    {
      "name": "Alpha",
      "alt": "Greek Alpha Letter",
      "path": "assets/letters/lett-alpha.svg"
    },
    {
      "name": "Beta",
      "alt": "Greek Gamma Letter",

artrayd

// Importing array from local JSON file
import json from "@/assets/letters/greek-alphabet.json";

export default {
  name: "Alphabet",
  data: function() {
    return {
      letters: json.letters, // passing array data into Vue
    };
  },

artrayd

<template>
  <ul class="alphabet">
    <li v-for="letter in letters" :key="letter.name">
      <img :src="letterIcon(letter.path)" />
      <span>{{ letter.name }}</span>
      <div class="tooltip">{{ letter.alt }}</div>
    </li>
  </ul>
</template>

artrayd

  methods: {
    letterIcon: function(path) {
      return require("@/" + path);
    },
  },

artrayd

<img :src="letterIcon(letter.path)" />

artrayd

// inside html template
<span>{{ lettersAmount }} letters</span>

// inside script
 computed: {
    lettersAmount: function() {
      return this.letters.length;
    },
  },

artrayd

export let facebookSDK = {
  mounted () {
    let _this = this
    this.$nextTick(() => {
      window.fbAsyncInit = function () {
        FB.init({
          appId: 'XXX',
          xfbml: true,
          version: 'v2.6'
        })

artrayd

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

<script>
export default {
  name: "Love",
};
</script>