A preview component of the creator with more information on hover.

Overview

vue-creator-preview

npm version install size npm downloads

Introduction

A preview component of the creator with more information on hover. Checkout the Demo here.

Installation

Install using npm

# install it via npm
npm install vue-creator-preview --save

Install using yarn

# install it via yarn
yarn add vue-creator-preview

Usage

<template>
  <div class="Footer">
    <span>
      Crafted for people who love to keep things simple.
    </span>
    <span>
      A product by
      <a href="https://gobienan.com" target="_blank">
        <creator-preview
          :avatar="avatar"
          :name="name"
          :description="description"
          :content="content"
        />
      </a>
    </span>
  </div>
</template>

<script>
import CreatorPreview from 'vue-creator-preview.vue';
export default {
  components: {
      CreatorPreview
  },
  data() {
    return {
      avatar: 'https://pbs.twimg.com/profile_images/1375758751450415104/hV9bKmvf_400x400.jpg',
      name: `Gobie Nanthakumar`,
      description: `Engineer with a passion for UI design`,
      content: `Hey, I am Gobie 👋<br/>
If you don’t know me, I love to create products with great UI ;)<br/><br/>
Click on the link to visit my website 👇🏾`,
    };
  },
};
</script>

Options

Below are the options you can pass to the preview

Option Type Default Description
avatar String 'https://source.boringavatars.com/beam/90/' URL of the avatar image you want to get displayed
name String / HTML 'Creator' Name of the Creator
description String / HTML 'Developer, Founder' Short description displayed below the name
content String / HTML '' 'Content with additional information about the creator'
mode String 'light' 'switch between dark and light mode'

License

MIT

You might also like...

Create coupled parent-child component pairs with composition API.

vue-coupled Background See discussion here. This package serves as a POC that: Allows any level of component encapsulation for child components. Suppo

Jul 1, 2022

🛰 Shared component across routes with animations

🛰 Shared component across routes with animations

Shared Vue component across routes with animations Live Demo Why? It's quite common you might have a same component used in different routes (pages) w

Jan 4, 2023

🏝 Opinionated Web Components Starter template to help kick-start development of a cross-framework component library.

Web Component Library Starter Kit "Why create components for a specific framework when it can be written to be understood by all — including browsers?

Dec 24, 2022

🏝 Opinionated Web Components Starter template to help kick-start development of a cross-framework component library.

Web Component Library Starter Kit "Why create components for a specific framework when it can be written to be understood by all — including browsers?

May 1, 2022

This package allows you to show a placeholder-component while inertia fetches the content of ne new page while routing

inertia vue placeholder middleware This package adds a component placeholder middleware for inertia vue. instead of the InertiaProgressBar you can sho

Jul 24, 2022

A API documentation generator for Vue3 single file component.

doc-vue A API documentation generator for Vue3 single file component. Table of Contents Installation Write API Description Command Line Usage Programm

Oct 20, 2022

Carpatin is a React JS Admin Dashboard Template that focuses on the management flows of a back-office application. We leverage the Material-UI power of stylizing the components in a way that feels more professional.

Carpatin is a React JS Admin Dashboard Template that focuses on the management flows of a back-office application. We leverage the Material-UI power of stylizing the components in a way that feels more professional.

Carpatin Dashboard Free Carpatin is a React Js Admin Dashboard Template that focuses on the management flows of a back-office application. We leverage

Dec 12, 2022

VGENT – Vue Agent, that helps you to develop in a more effective way

VGENT – Vue Agent, that helps you to develop in a more effective way

VGENT is a CLI tool that generates boilerplate files for components, pages in your Nuxt.js or Vue.js project.A file generator for Nuxt.js

Dec 29, 2022

A client for QQ and more.:electron:

Icalingua++ Icalingua++ 是 Icalingua 的分支,為已經刪除的 Icalingua 提供有限的更新,同時歡迎社區提交PR。 Icalingua 这个名字是日语中「光」和拉丁语中「语言」的组合。 本项目希望为 Linux 打造一个会话前端框架,通过实现 Adapter 后

Dec 31, 2022
Owner
Gobie Nanthakumar
Gobie Nanthakumar
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.9k Jan 9, 2023
🐉 Material Component Framework for Vue

Supporting Vuetify Vuetify is a MIT licensed project that is developed and maintained full-time by John Leider and Heather Leider; with support from t

vuetify 36.2k Jan 3, 2023
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Jan 6, 2023
Everything you wish the HTML