vue-diagonal-screens

Npm install

npm install vue-diagonal-screens

Import locally

import DiagonalScreens from 'vue-diagonal-screens'

export default {
  name: 'App',
  components: {
    DiagonalScreens
  },
  ....
}

Import glovally

import Vue from 'vue'

import DiagonalScreens from 'vue-diagonal-screens'

Vue.component(DiagonalScreens)

Usage

<template>
  <div id="app">
    <DiagonalScreens :screens="screens" style="width: 100vw; height: 100vh;"/>
  </div>
</template>

<script>
  import DiagonalScreens from 'vue-diagonal-screens'
  
  export default {
    name: 'App',
    components: {
      DiagonalScreens
    },
    data: function() {
      return {
        screens: [
          { url: require('./assets/web/1.mp4'), subtitle: 'Transparent', title: 'OLED' },
          { url: require('./assets/web/2.mp4'), subtitle: 'Cinematic Sound', title: 'OLED' },
          { url: require('./assets/web/3.mp4'), subtitle: 'Wallpaper', title: 'OLED' },
          { url: require('./assets/web/4.mp4'), subtitle: 'Rollable', title: 'OLED' },
        ],
      }
    },
  }
</script>

Demo

http://lg-demo1.surge.sh/