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

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

Nuxt

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

vue-slickを使用した場合のエラー エラーの解消法 解消法1 解消法2 Nuxtでは同様のエラーが発生するプラグインが多い vue-slickを使用した場合のエラー 複数画像のスライド表示を簡単に実装できるJavascriptのプラグインであるslick.js。 これをVueやNuxtに…

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

Vue.jsとNuxt.jsのrouterの違い Nuxt.jsでのルーティングは便利だけどデメリットも どうやってNuxtでルーティングをカスタマイズする? metaの設定は? Vue.jsとNuxt.jsのrouterの違い Vue.jsでは、ルーティングを設定する際にrouter/index.jsなどで自分で自…

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

QRコード生成機能は実装が簡単! モジュールのインストール コードの実装 筆者が実装してみたページ QRコード生成機能は実装が簡単! URLを入力してポチッとボタンを押せばQRコードが生成されるあの機能。 実際に実装してみましたが、超簡単にできたので共有…

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

Nuxtでソースの表示 extractCSSの設定を変更するだけで解決 Nuxtでソースの表示 ブラウザ上からページのソースを見ることができますが(Chromeで「ページのソースを表示」を実行する)Nuxtでソースを表示させた時にデフォルトの設定だとCSSが全部出力されま…

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

Nuxtで使用する$axios getと$getの違い getで取得するパターン $getで取得するパターン POSTも一緒? Nuxtで使用する$axios SPAサイトではガンガン行う非同期通信、その中でもaxiosは良く使われると思いますが、 Nuxtの場合はnuxt-community/axios-moduleの…

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

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

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

Nuxtのインストール後のディレクトリ構成 不要なら消してしまおう Nuxtのインストール後のディレクトリ構成 yarnやnpmでnuxtをインストールした後のディレクトリ構成は以下になります。Project ┣ .git ┣ .nuxt ┣ node_modules ┣ assets ┣ components ┣ layou…

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

function()から始まるような構文 モジュールを使って呼び出し Google Tag Managerを使いたい時 Google Fontsを使いたい時 その他の方法 function()から始まるような構文 サイト制作でJavascriptのライブラリを使う昨今、サイト表示時点で外部にアクセスする…