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 |
---|
youtube |
git |
blogger |
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>