pixivue

To contribute

NOTE: This is a source-only package. There is no build or compilation step. This package is merely a convenient way to bundle up source. The project using the package must have the appropriate dependencies installed (see the following sections)

To update and test, do not build locally--use npm link with an application that installs this package to update and test. To publish, there is no build step -- just publish.

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.

Version History

1.1.8 - Adds support for YouTube live videos to the embedded-video component. Removes yarn.lock -- just use npm 1.1.9 - Minor update to resolve issue with some loaders.