vue-profile

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: "youremail@mail.com"
        }
  },
}
</script>