Vue on RailsでのHP作成で使ったJSパッケージ集(随時更新)

画像の遅延読み込み（page speed insight対策）

参考: https://qiita.com/renoinn/items/f67a8bfc8574f1407c42

  yarn add v-lazy-image

main.jsファイルにプラグインの使用を宣言

import { VLazyImagePlugin } from "v-lazy-image";
Vue.use(VLazyImagePlugin);

v-lazy-imageタグを使う
<img :src=""> => <v-lazy-image :src="">

VueObserveVisibility scrollイベント topページのふわっとだす

参考: https://github.com/Akryum/vue-observe-visibility

  yarn add vue-observe-visibility

main.jsファイルにプラグインの使用を宣言

import VueObserveVisibility from 'vue-observe-visibility'
Vue.use(VueObserveVisibility)

Google Analytics

参考: https://designsupply-web.com/knowledgeside/4807/

  yarn add vue-analytics

main.jsファイルにプラグインの使用を宣言

import VueAnalytics from 'vue-analytics'
Vue.use(VueAnalytics, {
  id: 'UA-********',
  router
})

サイトカード

参考: https://www.npmjs.com/package/xtal-link-preview
デモサイト: https://www.webcomponents.org/element/@@npm/xtal-link-preview

 yarn add xtal-link-preview

これを使うにはPolymer CLI とnode.jsが入っている必要があるので

yarn global add polymer-cli
してから
polymer serve 

youtube動画をカード型で表示する

参考: https://www.npmjs.com/package/vue-youtube-embed
Vue.jsでYouTubeプレイヤーを埋め込む方法

yarn add vue-youtube-embed

main.jsファイルにプラグインの使用を宣言

import VueYouTubeEmbed from 'vue-youtube-embed'
Vue.use(VueYouTubeEmbed)

画像一覧を表示させて選択オブジェクトの取得をする

参考: https://www.npmjs.com/package/vue-select-image
デモサイト: https://mazipan.github.io/vue-select-image/

yarn add vue-select-image

vueファイルにimport

import VueSelectImage from 'vue-select-image'

クリックイベントの発火(ナブバーでボタン以外のところをタップした時にhideさせたかった)

参考:https://github.com/vue-bulma/click-outside
こっちに詳しいこと書いた👀https://qiita.com/rainbow___0/items/e37f1f715cf8d25cf58a

yarn add vue-click-outside

main.jsファイルにプラグインの使用を宣言

import ClickOutside from 'vue-click-outside'
Vue.use(VueSelectImage)

アプリの登録を促すスマートバナー

参考: https://www.npmjs.com/package/smart-app-banner

SEO対策(title,description,keyywordsの動的変更)

参考: https://www.npmjs.com/package/vue-head

vue-headのインストール

yarn add vue-head

main.jsファイルにプラグインの使用を宣言

import VueHead from 'vue-head'
Vue.use(VueHead)

適用例

ProductCategory.vue

<script>
  head: {
    title: function () {
      return {
        inner: this.name,
        separator: '|',
        complement: 'this.seoTitle'
      }
    },
    meta: function () {
      return [
        { property: 'og:title', content: this.name + ' | ' },
        { property: 'og:description', content: this.description },
        { name: 'description', content: this.description },
        { name: 'keywords', content: this.keywords }
      ]
    }
  }
</script>

instagram埋め込み

参考: https://www.npmjs.com/package/vue-instagram-embed
https://katalonne.github.io/vue-instagram-embed/
SSRされないので画像が表示されない（最初のアクセスは表示される）https://teratail.com/questions/126135

vue-instagram-embedのインストール

yarn add vue-instagram-embed

main.jsファイルにプラグインの使用を宣言(じゃなくてaccordionを使うvueファイルにかくと思う)

import InstagramEmbed from 'vue-instagram-embed';

componentsに書く

  components: {
    InstagramEmbed
  }

適用例

Information.vue

      <instagram-embed
        :url="content"
        :max-width=500
      />

# contentには登録したurlが入っている
<script>
  mounted () {
    this.getInfo()
    # window.instgrm.Embeds.process();
  },
</script>

アコーディオン

参考: https://www.kabanoki.net/4690/

vue-bulma-accordionのインストール

yarn add vue-bulma-accordion

main.jsファイルにプラグインの使用を宣言(じゃなくてaccordionを使うvueファイルにかくと思う)

import { BulmaAccordion, BulmaAccordionItem } from 'vue-bulma-accordion'

componentsに書く

  components: {
    BulmaAccordion,
    BulmaAccordionItem
  }

適用例

QuestionCard.vue

<template>
  <bulma-accordion
  :icon="'caret'"
  :caretAnimation="{
      duration: '.6s',
      timerFunc: 'ease-in-out'
  }"
  :slide="{
      duration: '.9s',
      timerFunc: 'ease'
  }"
  >
    <bulma-accordion-item v-if="hasChild">
      <h4 slot="title">{{ question }}</h4>
      <div slot="content" v-for="item in this.children" :data-id="item.id" :key="item.code">
        <router-link :to="{name:'question', params:{code: item.code}}">
          <div class="card-row">
            <p>{{ item.question }}</p>
          </div>
        </router-link>
      </div>
    </bulma-accordion-item>
  </bulma-accordion>
</template>
<script>
import { BulmaAccordion, BulmaAccordionItem } from 'vue-bulma-accordion'
  export default {
    components: {
      BulmaAccordion,
      BulmaAccordionItem
    },
    props: {
      id: String,
      code: String,
      question: String,
      children: Array,
    },
    data() {
      return {
      }
    },
    computed: {
      hasChild() {
        return this.children.length > 0
      },
    }
  }
</script>

# nuxtとcontentfulの時の
<bulma-accordion
  :icon="'caret'"
  :caretAnimation="{
      duration: '.6s',
      timerFunc: 'ease-in-out'
  }"
  :slide="{
      duration: '.9s',
      timerFunc: 'ease'
  }"
  v-for="(post, i) in posts" :key="i" :id="post.fields.id"
>
  <bulma-accordion-item  >
    <h4 slot="title">{{ post.fields.question }}</h4>
    <p slot="content" v-html="toHtmlString(post.fields.answer)"></p>
  </bulma-accordion-item>
</bulma-accordion>

ページのトップに行くボタン

参考: https://blog.nakamu.life/posts/vue-scrollto

vue-scrolltoのインストール

yarn add vue-scrollto

main.jsファイルにプラグインの使用を宣言

import VueScrollTo from 'vue-scrollto'
Vue.use(VueScrollTo)

適用例

Front.vue

<template>
  <div>
    <div v-if="$route.path !== '/'" >
      <Navbar/>
    </div>
    <router-view />
    <a
      id="page-top"
      class="button is-rounded is-danger is-small pagetop"
　　　　<!-- ⭐️positionが800以下の時はボタンを表示させない！ -->
      :class="{'is-hidden': position < 800}"
      v-scroll-to="'body'">
      <i class="fas fa-angle-up"></i>
    </a>
    <Footer/>
  </div>
</template>

<script>
import Navbar from '../../components/front/Navbar.vue'
import Footer from '../../components/front/Footer.vue'

export default {
  data () {
    return {
      position: ''
    }
  },
  components: {
    Navbar,
    Footer
  },
  mounted() {
    if (!process.browser) return;
    this.$nextTick(() => {
      window.addEventListener("scroll", this.handleScroll)
    })
  },
  methods: {
    handleScroll() {
    this.position = window.scrollY
    }
  }
}

バリデーション

参考：　https://qiita.com/keity/items/f55894c8593e33c4b60b
　　　　https://qiita.com/youdie/items/417ed2df1bcb6a60001c
お問い合わせのcheckBoxバリデーション
https://codesandbox.io/s/y3504yr0l1?from-embed

vee-validateのインストール

yarn add vee-validate

main.jsファイルにプラグインの使用を宣言

import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

適用例

CategoryEditor.vue

<template>

リッチテキストエディターの使用

参考：　https://vuejsexamples.com/a-text-editor-using-vue-js-and-quill/

vue2-editorのインストール

yarn add vue2-editor

main.jsファイルにプラグインの使用を宣言

import { VueEditor } from 'vue2-editor'
Vue.use(VueEditor)

適用例

CategoryEditor.vue

<template>
  <div class="md-layout">
    <label class="md-layout-item md-size-20 md-form-label">
      カテゴリ内容
    </label>
    <div class="md-layout-item md-size-80">
      <vue-editor v-model="description"></vue-editor>
    </div>
  </div>
</template>
<script>
  import { VueEditor } from 'vue2-editor'
  export default {
    components: {
      VueEditor
    }
  }
</script>

モーダル表示

参考：　https://www.kabanoki.net/3144/

vue-js-modalのインストール

yarn add vue-js-modal

main.jsファイルにプラグインの使用を宣言

import VModal from 'vue-js-modal'
Vue.use(VModal)

適用例

AppModal.vue

<template>
  <div>
　　<!-- ⭐️このボタンをクリックしたらモーダル（<modal>内）が表示される仕組み -->
    <button class="create_case" v-on:click="show">ケースを作成する</button>
    <modal name="top-app" :draggable="true">
      <div class="content01-wrapper">
        <div class="content01">
          <p class="content01-title">アプリをインストールしてください</p>    
          <div class="content01-sentence">   
            <span>デザインケースでオリジナルスマホケースを作るには、アプリをインストールする必要があります。</span><br>
            <span>下記の『AppleStoreアイコン』『GooglePlayアイコン』からアプリをダウンロードしてください。</span>
            <div class = "app-row">
              <img src="https://designcase.jp/wordpress/wp-content/uploads/2017/08/applestore-download.png">
              <img src="https://designcase.jp/wordpress/wp-content/themes/designcase/img/googleplay.png">
            </div>
          </div>
        </div>
      </div>
      <a class="close" v-on:click="hide"><i class="far fa-times-circle"></i></a>
    </modal>
  </div>
</template>

<script>
export default {
  data () {
    return {
      openItem: false,
    }
  },
  methods: {
    show () {
      this.$modal.show('top-app');
    },
    hide () {
      this.$modal.hide('top-app');
    }
  }
}
</script>

アンカーリンク（ページ内リンク）の実現

参考：　https://qiita.com/saba_uni_toro_/items/c614b52a5f8d562cf5c2

vue-smooth-scrollのインストール

yarn add vue-smooth-scroll

main.jsファイルにプラグインの使用を宣言

import vueSmoothScroll from 'vue-smooth-scroll'
Vue.use(vueSmoothScroll);

適用例

ProductCategoryList.vue

 <!-- カテゴリー名の表示　ここをクリックしてページ内の要素に飛ぶ -->
  <div class = "product-category-container">
    <div v-for="(item, index) in tableData">
      <a :href="'#section' + index" v-smooth-scroll="{ duration: 1000, offset: -50 }"><p>{{item.name}}</p></a>
    </div>
  </div>
 <!--  -->
  <div class = "product-category-container">
    <ProductCategoryCard
      v-for="(item, index) in tableData"
      :index="index"　　🌟indexを渡す
      :key="item.code"
      :id="item.id"
      :code="item.code"
      :name="item.name"
      :icon-image="item.iconImage"
      :description="item.description"
    />
  </div>

ProductCategoryCard.vue

 <!-- 渡ってきたindexを使ってidの作成 -->
  <div class="card"  :id="'section' + index">
    <router-link :to="{name:'product_category', params:{code: code}}">
      <h3>{{ name }}</h3>
      <div class="card-image">
        <figure class="image is-4by4">
          <img v-bind:src="iconImage"/>
        </figure>
      </div>
      <p v-html="contentSlice"/>
    </router-link>
  </div>

{{ }}はHTML内では使えずv-bindで属性を指定しなきゃいけないんだけど、
その時この記事で参考になった
https://qiita.com/asaokamei/items/6afa7e2f33207d041588

使ってないけど機会があれば是非使いたいと思ったもの

emoji-mart-vue