概要
Nuxt(とvuetify)で作成しているページの背景にTrianglifyを利用しようとしたところ、ドキュメントが見つかりませんでした。
なんとか実装できため、メモとして残しておきます。
Trianglify
Trianglifyとは美しいポリゴンっぽい画像を生成してくれるライブラリです。
CDNとnpm両方で提供されています。
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-appid="background"><v-content><v-container><nuxt/></v-container></v-content></v-app></template><script>exportdefault{mounted(){this.addTriangleTo(document.getElementById('background'))},methods:{addTriangleTo(target){constdimensions=target.getClientRects()[0]constpattern=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 --saveplugins/trianglify.js
importVuefrom'vue'importTrianglifyfrom'../node_modules/trianglify/dist/trianglify.min.js'Vue.prototype.$addTriangleTo=(target)=>{constdimensions=target.getClientRects()[0]constpattern=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-appid="background"><v-content><v-container><nuxt/></v-container></v-content></v-app></template><script>exportdefault{mounted(){this.$addTriangleTo(document.getElementById('background'))}}</script>これでいい感じの背景を設定することができました。
Trianglifyを背景にして作成したサービス
https://vimc-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/