Vue.js Profile

Highly customizable social sharing card.

Standard:

Green Style:

Install:

npm install vue-profile

Use:

main.js:

import Vue from 'vue'
import VueProfile from "vue-profile";

Vue.use(VueProfile, 'vue-profile')

component.vue:

<template>
  <vue-profile 
  nickname="@Lukenoutte" 
  bodyPhrase="Follow the white rabbit."
  :socialLinks="myLinks"
  :profileImg="Img"
  />
</template>

<script>
import Img from "../assets/img.png";
export default {
  data(){
    return{
      myLinks: { 
        git: "https://github.com/Lukenoutte",         
        link: "https://github.com/Lukenoutte/vue-profile", 
        },
        Img
    }
  }
}
</script>

Prop

| Name | Type | Required | Description | | ---------- | ----------------------| -------- | -------------------------------------------------------------- | | nickname | String | + | The text bellow the profile image. | | socialLinks | Object | + | A object with all links, using the social network name as key. | | profileImg | [Object, String] | + | The profile image. | | cardHeight | [String, Number] | - | Height | | cardWidth | [String, Number] | - | Width | | bodyPhrase | String | - | Phrase bellow icons. | | coverImg | [Object, String] | - | The cover image. | | nicknameColor | String | - | Nickname color. | | coverColor | String | - | Cover color, if you don't have an image. | | iconsColor | String | - | Icons color. | | bodyColor | String | - | Color of div bellow cover. | | phraseColor | String | - | Phrase color. |

Icons (socialLinks)

| Name | | ---------- | | facebook | | twitter | | youtube | | instagram | | linkedin | | whatsapp | | pinterest | | git | | blogger | | email | | telegram | | link | | tel | | poo |

<script>
export default {
  data(){
      myLinks: { 
        git: "https://github.com/Lukenoutte",         
        link: "https://github.com/Lukenoutte/vue-profile",
        tel: "5575991777777",
        email: "[email protected]"
        }
  },
}
</script>