@way2up/vue-seo v1.0.1

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

In addition to these props you can also use width, height and alt and other HTML attributes.

LazyLoadImage component

In addition to these props you can also use width, height and alt and other HTML attributes.

GoToUrl

PictureComponent

Recommended IDE Setup

• VS Code + Volar