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


#画像の遅延読み込み（page speed insight対策）
参考: https://qiita.com/renoinn/items/f67a8bfc8574f1407c42

```bash

  yarn add v-lazy-image
```
###main.jsファイルにプラグインの使用を宣言

```javascript
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

```bash
  yarn add vue-observe-visibility
```
###main.jsファイルにプラグインの使用を宣言

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

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

```bash
  yarn add vue-analytics
```
###main.jsファイルにプラグインの使用を宣言

```javascript
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

```bash
 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プレイヤーを埋め込む方法](https://qiita.com/norton0209/items/ba3e46342a0dbed065e2)

```bash
yarn add vue-youtube-embed
```
###main.jsファイルにプラグインの使用を宣言

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



# 画像一覧を表示させて選択オブジェクトの取得をする
参考: https://www.npmjs.com/package/vue-select-image
デモサイト: https://mazipan.github.io/vue-select-image/

```bash
yarn add vue-select-image
```
###vueファイルにimport
```javascript
import VueSelectImage from 'vue-select-image'
```


#クリックイベントの発火(ナブバーでボタン以外のところをタップした時にhideさせたかった)
参考:https://github.com/vue-bulma/click-outside
こっちに詳しいこと書いた👀https://qiita.com/rainbow___0/items/e37f1f715cf8d25cf58a

```bash
yarn add vue-click-outside
```
###main.jsファイルにプラグインの使用を宣言

```javascript
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のインストール
```bash
yarn add vue-head
```

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

```javascript
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のインストール
```bash
yarn add vue-instagram-embed
```

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

```javascript
import InstagramEmbed from 'vue-instagram-embed';
```

###componentsに書く

```javascript
  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のインストール
```bash
yarn add vue-bulma-accordion
```

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

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

###componentsに書く

```javascript
  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>

```
```vue
#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のインストール
```bash
yarn add vue-scrollto
```

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

```javascript
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のインストール
```bash
yarn add vee-validate
```

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

```javascript
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
```
###適用例

```CategoryEditor.vue
<template>

```


#リッチテキストエディターの使用
参考：　https://vuejsexamples.com/a-text-editor-using-vue-js-and-quill/

###vue2-editorのインストール
```bash
yarn add vue2-editor
```

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

```javascript
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のインストール
```bash
yarn add vue-js-modal
```

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

```javascript
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のインストール

```bash
yarn add vue-smooth-scroll
```

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

```javascript
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
https://www.dkrk-blog.net/slack/slack_emoji_mart