pixivue

## To add to your project ``` vue-cli create my-new-app cd my-new-app vue-cli add vuetify yarn add axios yarn add pixivue ```

Usage no npm install needed!

<script type="module">
  import pixivue from 'https://cdn.skypack.dev/pixivue';
</script>

README

pixivue

To add to your project

vue-cli create my-new-app
cd my-new-app
vue-cli add vuetify
yarn add axios
yarn add pixivue

To Use:


  • NOTE: Currently, this project requires your app be bootstrapped with the official vue-cli due to its dependency on Vuetify. In most instance this isn't an issue and is transparent. If you would like this library to be exposed as a stand-alone library, please create an issue at https://github.com/PixelThin/pixivue/issues

  • NOTE: Pixivue components have peer dependencies on axios, Vuetify and vue-scroll-reveal

  • NOTE: As of Pixivue 1.0.0, p-sections are no longer supported. We recommend you use v-container instead.


Scroll-reveal transitions:

// In a Vue SFC

<template>
   <div v-scroll-reveal="fadeIn">Hello World</div>
</template>

<script>
import { Transitions } from 'pixivue'
export default {
        data: () => ({
    fadeIn: Transitions.fadeIn
  }),
}
</script>

Pixivue components

// In main.js
import Vue from 'vue'
import Pixivue from 'pixivue'
Vue.use(Pixivue)

// In your SFC
<template>
    <p-translucent-background
      opacity=".3"
      imageSource="https://cdn.pixabay.com/photo/2018/11/17/22/15/tree-3822149_960_720.jpg"
      size="cover"
    >
      <div> My stuff goes here</div>
    </p-translucent-background>
</template>

P-split example

NOTE: If you are pulling the image URL from a CMS (e.g. WordPress), use null or undefined for the default value

NOTE: Due to a bug in vue-scroll-reveal, changing the image source on the prop will not work correctly (see above for a workaround when no image source is initially present)

  <p-split :image="cmsContent.pSplitImage1" right class="mt-12" title="Welcome">
     Hello World
  </p-split>

Embedded-video example

NOTE: If you are pulling the image URL from a CMS (e.g. WordPress), use null or undefined for the default value

NOTE: The embedded video component takes an object with properties title and URL


<template>
   <p-embedded-video video="video"></p-embedded-video>
   </template>
   <script>
   import pEmbeddedVideo from 'pixivue'
   export default{
   data(){
   video:{title:'title here',url:'https://youtu.be/dQw4w9WgXcQ'}
   },
   components:{ pEmbeddedVideo }
   }
   </script>

Peer Dependencies

Pixivue components depend upon vue, vue-template-loader, babel, vuetify and axios. You must bootstrap your app with the vue-cli and Vuetify and Axios.