https://github.com/todovue/todovue-hero
Hero component for the TODOvue application
https://github.com/todovue/todovue-hero
component hero todovue vue vue-components vue3
Last synced: 4 months ago
JSON representation
Hero component for the TODOvue application
- Host: GitHub
- URL: https://github.com/todovue/todovue-hero
- Owner: TODOvue
- License: mit
- Created: 2023-03-13T01:52:22.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-05-15T20:08:27.000Z (over 2 years ago)
- Last Synced: 2025-06-05T20:15:21.562Z (5 months ago)
- Topics: component, hero, todovue, vue, vue-components, vue3
- Language: JavaScript
- Homepage: https://todovue-hero.netlify.app/
- Size: 666 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# TODOvue Hero
[](https://www.npmjs.com/package/todovue-hero) [](https://app.netlify.com/sites/todovue-hero/deploys) [](https://github.com/TODOvue/todovue-hero/actions/workflows/pipeline.yml) [](https://www.npmjs.com/package/todovue-hero)
[](https://www.npmjs.com/package/todovue-hero)  
## Table of Contents
- [Demo](https://todovue-hero.netlify.app/)
- [Installation](#installation)
- [Usage](#usage)
- [Props](#props)
- [Customize](#customize)
- [Development](#development)
- [Changelog](https://github.com/TODOvue/todovue-hero/blob/master/CHANGELOG.md)
- [Contributing](https://github.com/TODOvue/todovue-hero/blob/master/CONTRIBUTING.md)
- [License](https://github.com/TODOvue/todovue-hero/blob/master/LICENSE)
## Installation
Install with npm or yarn as development dependency
```bash
npm install todovue-hero
```
```bash
yarn add todovue-hero
```
Import
```js
import { TvHero } from 'todovue-hero'
```
You can also import it directly in the **main.js** file, so you don't have to import it in the pages
```js
import { createApp } from "vue";
import App from "./App.vue";
import TvHero from "todovue-hero";
const app = createApp(App);
app.component("TvHero", TvHero);
app.mount("#app");
```
## Usage
```html
import { ref } from "vue";
export default {
setup() {
const configHero = ref({
alt: "TODOvue Logo",
button: "View all blogs",
description: "Introducing my Vue.js blog!...",
image: "https://todovue.com/logo.png",
title: "TODOvue Blog",
});
const handleClick = () => {
console.log("click button");
}
return {
configHero,
handleClick,
}
}
}
```
## Props
| Name | Type | Default | Description | Required |
|------------|---------|--------------------------|-----------------------------------------------------|----------|
| configHero | Object | [See below](#configHero) | Hero configuration | `true` |
| customHero | Object | [See below](#customHero) | Custom hero configuration | `false` |
| isEntry | Boolean | false | Change the hero's style to display it in blog posts | `false` |
### configHero
| Name | Type | Default | Description | Required |
|-----------------|--------|---------|-----------------------|----------|
| alt | String | `""` | Image alt | `false` |
| button | String | `""` | Button text | `true` |
| description | String | `""` | Hero description | `true` |
| image | String | `""` | Image url | `false` |
| title | String | `""` | Hero title | `true` |
| buttonSecondary | String | `""` | Secondary button text | `false` |
### customHero
| Name | Type | Default | Description | Required |
|---------------------|--------|---------------|-----------------------------------|----------|
| bgBody | String | `#0E131F` | Background color body | `false` |
| colorBody | String | `#F4FAFF` | Color body | `false` |
| bgButton | String | `#Ef233C` | Background color button | `false` |
| buttonText | String | `#F4FAFF` | Color button | `false` |
| bgButtonSecondary | String | `transparent` | Background color secondary button | `false` |
| buttonSecondaryText | String | `#EF233C` | Color secondary button | `false` |
## Customize
You can customize the hero by passing the `customHero` prop, which accepts an object with the following properties:
```js
const customHero = ({
bgBody: "#0E131F",
colorBody: "#F4FAFF",
bgButton: "#Ef233C",
buttonText: "#F4FAFF",
bgButtonSecondary: "transparent",
buttonSecondaryText: "#EF233C",
});
```
```js
import { ref } from "vue";
export default {
setup() {
const configHero = ref({
alt: "TODOvue Logo",
buttonSecondary: "View last blog",
button: "View all blogs",
description: "Introducing my Vue.js blog!...",
image: "https://todovue.com/logo.png",
title: "TODOvue Blog",
});
const customHero = ref({
bgBody: "#1e1d23",
bgButton: "#8673a1",
bgButtonSecondary: "#79308d",
buttonSecondaryText: "#e1e2dc",
buttonText: "#e1e2dc",
colorBody: "#e1e2dc",
});
const handleClick = () => {
console.log("click button");
}
const handleClickSecondary = () => {
console.log("click secondary button");
}
return {
configHero,
customHero,
handleClick,
handleClickSecondary,
}
}
}
```
## Development
Clone the repository and install the dependencies
```bash
git clone https://github.com/TODOvue/todovue-hero.git
```
```bash
cd todovue-hero
```
Install the dependencies
```bash
yarn install
```
Run the project
```bash
yarn demo
```
Run the tests
```bash
yarn test:unit
```
Run the linter
```bash
yarn lint
```
Run the build It is not necessary to generate build, since it is generated when you do PR to the master branch
```bash
yarn build
```
## License
[MIT](https://github.com/TODOvue/todovue-hero /blob/master/LICENSE)