NuxtでTrianglifyを使う

概要

Nuxt(とvuetify)で作成しているページの背景にTrianglifyを利用しようとしたところ、ドキュメントが見つかりませんでした。
なんとか実装できたため、メモとして残しておきます。

Trianglify

Trianglifyとは美しいポリゴンっぽい画像を生成してくれるライブラリです。
CDNとnpm両方で提供されています。

http://qrohlf.com/trianglify/

CDN

CDNから呼び出す際はnuxt.config.jsのheadに書き込みます。

nuxt.config.js

head: {
  script: [{ src: 'https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js' }]
},

背景に当てたいので、layout/default.vueで利用します。

layout/default.vue

<template>
  <v-app id="background">
    <v-content>
      <v-container>
        <nuxt />
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
export default {
  mounted() {
    this.addTriangleTo(document.getElementById('background'))
  },
  methods: {
    addTriangleTo(target) {
      const dimensions = target.getClientRects()[0]
      const pattern = Trianglify({
        width: dimensions.width,
        height: dimensions.height
      })
      target.style['background-image'] = 'url(' + pattern.png() + ')'
    }
  }
}
</script>

これでもできたのですが、Trianglify is not definedと怒れることが時々あったり、、、。
多分よくない書き方だと思います。

npm

npmで落とした物を利用する際は一度pluginにします。

npm install trianglify --save

plugins/trianglify.js

import Vue from 'vue'
import Trianglify from '../node_modules/trianglify/dist/trianglify.min.js'

Vue.prototype.$addTriangleTo = (target) => {
  const dimensions = target.getClientRects()[0]
  const pattern = Trianglify({
    width: dimensions.width,
    height: dimensions.height
  })
  target.style['background-image'] = 'url(' + pattern.png() + ')'
}

pluginを有効化します。

nuxt.config.js

plugins: ['~/plugins/trianglify.js'],

同じくlayout/default.vueで当てます。

layouts/default.vue

<template>
  <v-app id="background">
    <v-content>
      <v-container>
        <nuxt />
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
export default {
  mounted() {
    this.$addTriangleTo(document.getElementById('background'))
  }
}
</script>

これでいい感じの背景を設定することができました。

Trianglifyを背景にして作成したサービス

https://nvimc-generator.web.app/
(作成中)

参考

https://github.com/qrohlf/trianglify
https://github.com/qrohlf/trianglify/blob/master/examples/basic-web-example.html
https://hacknote.jp/archives/26679/