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 |
---|
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: "[email protected]"
}
},
}
</script>
Dependencies
Dependencies
@babel/core: ^7.12.10@babel/preset-env: ^7.12.11@rollup/plugin-alias: ^3.1.1@rollup/plugin-babel: ^5.2.2@rollup/plugin-commonjs: ^17.0.0@rollup/plugin-node-resolve: ^11.0.1@rollup/plugin-replace: ^2.3.4@vue/cli-plugin-babel: ^4.5.10@vue/cli-service: ^4.5.10cross-env: ^7.0.3minimist: ^1.2.5rollup: ^2.36.1rollup-plugin-terser: ^7.0.2rollup-plugin-vue: ^5.1.9vue: ^2.6.12vue-template-compiler: ^2.6.12