# vue-extra
> Ready made components for VueJS. Make websites without writing HTML/CSS! just JSON configurations and you're done!
Latest version **1.1.4** (published 2019-05-24) · MIT license · 0 weekly downloads
## Install
```sh
npm install vue-extra
pnpm add vue-extra
yarn add vue-extra
bun add vue-extra
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.4 |
| Published | 2019-05-24 |
| First published | 2019-05-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Saurabh Daware |
| Maintainers | saurabhdaware |
| Keywords | vue-extra, vue-plus, vuejs, vue, vue-components |
## Links
- npm: https://www.npmjs.com/package/vue-extra
- Repository: https://github.com/saurabhdaware/vue-extra
- Homepage: https://github.com/saurabhdaware/vue-extra#readme
- Issues: https://github.com/saurabhdaware/vue-extra/issues
- npm.io page: https://npm.io/package/vue-extra
## Recent versions
- 1.1.4 (latest) — 2019-05-24
- 1.1.3 — 2019-05-19
- 1.1.2 — 2019-05-19
- 1.1.1 — 2019-05-19
- 1.1.0 — 2019-05-19
- 1.0.9 — 2019-05-19
- 1.0.8 — 2019-05-14
- 1.0.7 — 2019-05-14
- 1.0.6 — 2019-05-14
- 1.0.5 — 2019-05-14
- 1.0.4 — 2019-05-14
- 1.0.3 — 2019-05-14
- 1.0.2 — 2019-05-14
- 1.0.1 — 2019-05-14
- 1.0.0 — 2019-05-14
## README
# vue-extra
Ready to add extra components for VueJS.
[](https://www.npmjs.org/package/vue-extra) [](https://www.npmjs.org/package/vue-extra) [](https://github.com/saurabhdaware/vue-extra/issues) [](https://github.com/saurabhdaware/vue-extra/blob/master/LICENSE)
[](https://www.npmjs.com/package/vue-extra)
# Table of Contents
- [Overview](#overview)
- [Installation](#installation)
- [How to use](#how-to-use)
- [Inside your template tag](#inside-your-template-tag)
- [Inside your script tag](#inside-your-script-tag)
- [Referrence](#referrence)
- [Navbar](#navbar)
- [Color Navbar](#color-navbar)
- [Change Brand Name](#change-brand-name)
- [Drop Shadow](#drop-shadow)
- [Right Aligned Items](#right-aligned-items)
- [Change property after set](#change-property-after-set)
- [Header](#header)
- [Contribution](#contribution)
- [Screenshot](#screenshot)
# Overview
### Installation
`npm install --save vue-extra`
### How to use
- Currently the module supports vue-extra/Navbar only. However I will be adding some more elements in future.
#### Paste inside your template tag
```html
...
...
```
:style attribute is optional that lets you change the style of outer navbar element.
variable "navbar" is defined below in javascript code
#### Paste inside your script tag
Full Example :
```javascript
import Navbar from 'vue-extra/Navbar'
export default {
data () {
return {
navbar:{
defaultAlign:'right', // Default alignment of items in navbar
backgroundColor:'#222', // background color of navbar
color:'#ddd', // color of items in navbar
activeLinkColor:'#f90', // color of .active class link in navbar
hoverColor:'#ff0', // color when hovered over item
brand:'VueExtra',
shadow:true, // shadow effect on navbar
navItems:[
{
name:'Home',
href:"home",
class:'active',
},
{
name:'News',
href:"https://github.com/saurabhdaware",
router:false, // By default all navItems are rendered as by setting router:false we tell code to render element as instead.
},
{
name:'Contact',
href:"home",
},
{
name:'Login',
href:'#login',
align:'right',
style:{fontWeight:'bold'}
}
]
}
}
},
components:{
Navbar
}
}
```
# REFERRENCE
## Navbar
#### Color Navbar
```javascript
navbar:{
backgroundColor:'#222',
color:'#ddd',
hoverColor:'#fff',
activeLinkColor:'#09f'
}
```
#### Change brand Name
```javascript
navbar:{
brand:'CompanyName'
}
```
or
```javascript
navbar:{
brand:'https://image.com/logo.png' // Link of image - This will be rendered as an image
}
```
#### Drop shadow
```javascript
navbar:{
shadow:true // false
}
```
#### Right aligned items
```javascript
navbar:{
defaultAlign:'right' // 'left'
}
```
#### Change property after set
To change the property that is once set, sadly you have to change the whole navbar object. You can do this like `this.navbar = {...this.navbar,color:'#f30'}`. Here's example to change color of links after 2 seconds.
```javascript
mounted(){
setTimout(()=>{
this.navbar = {...this.navbar,color:'#f30'}
},2000)
}
```
## Header
Ummm I am still working on this.
## Contribution
[](https://github.com/saurabhdaware/vue-extra/issues)
- This project is open for contributions you can pick up a task from [Issues](https://github.com/saurabhdaware/vue-extra/issues) or Work on a new feature.
- Read [CONTRIBUTING.md](http://github.com/saurabhdaware/vue-extra/blob/master/CONTRIBUTING.md) before contributing for complete guide of Contribution and Local Development.
## Screenshot
---
_Source: https://npm.io/package/vue-extra · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._