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 |

Recommended IDE Setup

• VS Code + Volar