親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。

Nuxt

vue-slickをNuxt.jsで使用した時の「window is not defined」エラー解消法

vue-slickを使用した場合のエラー 複数画像のスライド表示を簡単に実装できるJavascriptのプラグインであるslick.js。 これをVueやNuxtに実装する場合はvue-slickをインストールしてimportすれば簡単に実装できます。 ただここでNuxtに実装する場合は注意が…

Nuxtのrouterやmetaを自由にカスタマイズしたい

Vue.jsとNuxt.jsのrouterの違い Vue.jsでは、ルーティングを設定する際にrouter/index.jsなどで自分で自由に設定することができます。 カスタマイズなど自由自在で、pages配下のファイルの置き場所に関係なく、pathやcomponentやname、それにmetaなどを設定…

NuxtでQRコードを簡単に生成する機能を実装!こんなに簡単に実装できたのか!

QRコード生成機能は実装が簡単! URLを入力してポチッとボタンを押せばQRコードが生成されるあの機能。 実際に実装してみましたが、超簡単にできたので共有します。 バックエンドは不要で、Javascriptだけで実装できてしまいます。 (複雑そうな仕組みに見え…

Nuxtのソース表示でcssが全部出力されないようにする方法

Nuxtでソースの表示 ブラウザ上からページのソースを見ることができますが(Chromeで「ページのソースを表示」を実行する)Nuxtでソースを表示させた時にデフォルトの設定だとCSSが全部出力されませんか? 本来見たい部分までひたすらスクロールして大変な思…

Nuxtの$axiosにおけるgetと$getの違い

Nuxtで使用する$axios SPAサイトではガンガン行う非同期通信、その中でもaxiosは良く使われると思いますが、 Nuxtの場合はnuxt-community/axios-moduleのモジュールを使うことが一般的でしょう。注意したいのが、何も考えずに $axios.$get とやると、いつも…

VueやNuxtで消えないdefault child route のWARNING

routerでchildrenを設定していると表示されるWARNING VueやNuxtでは、routerの設定でchildrenを使うと構造的に見やすいルーティングを生成できますよね。 ただし、以下のような一件問題なさそうなルーティングを書いた場合、WARNINGが表示されてしまいます。…

Nuxtではデフォルトで.gitファイルが配置される

Nuxtのインストール後のディレクトリ構成 yarnやnpmでnuxtをインストールした後のディレクトリ構成は以下になります。Project ┣ .git ┣ .nuxt ┣ node_modules ┣ assets ┣ components ┣ layouts ┣ pages ┣ store ┣ static ┣ plugins ┣ middleware ┣ nuxt.conf…

Nuxtでfunction()から始まるようなJavascript構文を呼び出し

function()から始まるような構文 サイト制作でJavascriptのライブラリを使う昨今、サイト表示時点で外部にアクセスするような、 function()から始まるような構文を使うことはよくありますよね。 例えば流入数を計測するためのお決まりのタグや、Typekitなど…