Way2Up SEO components for Vue.js projects
This is custom component for SEO purposes.
Installation
If you use npm: npm install @way2up/vue-seo
If you use Yarn: yarn add @way2up/vue-seo
Usage
You should use it as Vue.js plugin — write this in your main.js file
import Way2upSeoLib from '@way2up/vue-seo';
import '@way2up/vue-seo/dist/style.css' // add this line, if you want to add default styles
Vue.use(Way2upSeoLib);
LazyLoadImage component
Inside your vue component:
<template>
<lazy-load-image :src="imgSrc" width="500" height="500"/>`
</template>
<script>
export default {
data: () => ({
imgSrc: './assets/images/test.jpg'
})
}
</script>
LazyLoadBg component
Inside your vue component:
<template>
<lazy-load-bg :background-image-src="`/images/${backgroundImage}.jpg`">
<h2>I am a text on background image</h2>
</lazy-load-bg>
</template>
<script>
export default {
data: () => ({
backgroundImage: './assets/images/test-bg.jpg'
})
}
</script>
GoToUrl component
<template>
<go-to-url :url="urlToGo">Some abstract url to go</go-to-url>
</template>
<script>
export default {
data: () => ({
urlToGo: 'https://en.wikipedia.org'
})
}
</script>
PictureComponent component
<template>
<picture-component :sources="pictureSources" :fallback-img="fallbackImg" />
</template>
<script>
export default {
data: () => ({
pictureSources: [
{
srcset: '/images/pexels-hao-hoang-12551638.webp',
type: 'webp',
},
{
srcset: '/images/pexels-hao-hoang-12551638.png',
type: 'png',
},
{
srcset: '/images/pexels-hao-hoang-12551638.jpeg',
type: 'jpeg',
},
],
fallbackImg: {
src: '/images/pexels-hao-hoang-12551638.jpg',
alt: 'City Pic',
},
})
}
</script>
Props
LazyLoadImage component
| Prop name | Type | Description |
|---|---|---|
| src | String | Required prop, value of an image src attribute |
| placeholder | String | Placeholder, which we show before the image is loaded |
| viewportDistance | Number | Distance to top from .app-img at which the image should start to load |
In addition to these props you can also use width, height and alt and other HTML attributes.
LazyLoadImage component
| Prop name | Type | Description |
|---|---|---|
| backgroundImageSrc | String | Required prop, value of the styles backgroundImage property |
| backgroundColor | String | Background color, which we show before the background image is loaded |
| placeholder | String | Placeholder, which we show before the image is loaded |
| placeholderTimeout | Number | Time by which the placeholder should disappear |
| viewportDistance | Number | Distance to top from .app-img at which the image should start to load |
In addition to these props you can also use width, height and alt and other HTML attributes.
GoToUrl
| Prop name | Type | Description |
|---|---|---|
| url | String | Required prop, value of the url, which we want to go. It is necessary to use protocol name in url, e.g https://en.wikipedia.org
|
| target | String | Value of target attribute, could be _blank, _self, _parent, _top or framename |
PictureComponent
| Prop name | Type | Description |
|---|---|---|
| sources | Array | Required prop, array of the objects, which include src and type properties — they are needed for source tags inside picture component |
| fallbackImg | Object | Object, which includes src and alt properties — this is needed for fallback image. Fallback image is shown, when no one elements of the sources was loaded or if all of them are not supported by browser |