@ppm-vi/needful-things v2.1.0
Needful things for Vue.js web projects
Be aware that this package is tailored to our needs.
Installation
yarn add @ppm-vi/needful-things
Executable
There is also an executable ppmvi
to run tasks like generating favicons. Execute the following command to use it:
yarn ppmvi --help
Currently there are two commands you can use
Command | Arguments | Description |
---|---|---|
--generate-favicons | path to the folder | This command uses the realfavicongenerator api to generate favicons. |
--tinify | none | This command uses the TinyPNG api to compress images. Because it is a bad thing to compress your images multiple times, we add a meta tag to every image which lets us identify if it has already been optimized. |
Configuration
In order for something like generating favicons to work, you need to create a file .ppmvi.js
inside your root directory. This file should export an object. This object can hold one of the following attributes.
Attribute | Type | Default | Description |
---|---|---|---|
favicons | object | {} | The configuration for the realfavicongenerator api. https://realfavicongenerator.net/api/non_interactive_api |
tinify | object | {} | Configuration for the tinify cli command |
tinify > key | string | empty | The api key for TinyPNG |
Components
EmailLink
This component provides a simple way to include an a
-tag with a mailto
link.
Usage
EmailLink: () => import('@ppm-vi/needful-things').then(({ EmailLink }) => EmailLink)
Props
email
String
The actual email which should be used for themailto
link.
TelLink
This component provides a simple way to include an a
-tag with a tel
link. Whitespaces, /
and -
are automatically removed.
Usage
TelLink: () => import('@ppm-vi/needful-things').then(({ TelLink }) => TelLink)
Props
tel
String
The actual telephone number which should be used for thetel
link.wrapper
Boolean Set totrue
if you dont want the component to render the telephone number into aspan
.
Slots
default
The default slot inside the a tag
Meta Tags / Rel Links Helpers
All helpers return arrays or object, prepared for usage with vue-meta
.
applyFacebookMetaTags
This method can be used to add the og
meta tags.
Usage
import { applyFacebookMetaTags } from '@ppm-vi/needful-things';
//...
meta: [
// meta tags before
...applyFacebookMetaTags()
// meta tags after
]
Params
meta
Object
The object with the configuration which accepts the following attributes:
{
type = '',
title = '',
description = '',
image = '',
siteName = ''
}
applyTwitterMetaTags
This method can be used to add the twitter
meta tags.
Usage
import { applyTwitterMetaTags } from '@ppm-vi/needful-things';
//...
meta: [
// meta tags before
...applyTwitterMetaTags()
// meta tags after
]
Params
meta
Object
The object with the configuration which accepts the following attributes:
{
title = '',
description = '',
image = '',
site = '',
creator = ''
}
applySplashscreenLinks
This method can be used to add meta tags for splashscreens.
Usage
import { applySplashscreenLinks } from '@ppm-vi/needful-things';
//...
link: [
// links before
...applySplashscreenMetaTags()
// links after
]
Params
url
Stringdefault: /static/splashscreens
The path where the splashscreens are located.additional
Array An array with objects for additional splashscreen links. The objects should have the following structure:
{
width: Number,
height: Number,
ratio: Number,
orientation: String,
href: String
}
applyFaviconMetaTags
This method can be used to add all the meta tags necessary for favicons and pwa.
Usage
import { applyFaviconMetaTags } from '@ppm-vi/needful-things';
//...
meta: [
// links before
...applyFaviconMetaTags()
// links after
]
Params
options
Object An objects with the configuration. The following options are available:
{
url = '/static/icons',
manifest: {
url = '/static',
name = 'manifest.json'
},
color = '#FFFFFF'
}
applyFaviconLinks
This method can be used to add all the links necessary for favicons and pwa.
Usage
import { applyFaviconLinks } from '@ppm-vi/needful-things';
//...
link: [
// links before
...applyFaviconLinks()
// links after
]
Params
options
Object An objects with the configuration. The following options are available:
{
url = '/static/icons',
color = '#FFFFFF',
statusBarStyle = 'default'
}