Nuxt.JS

Nuxt.JS

とても便利だったNuxt2のフィルタ(のようなもの)をNuxt3で実現する方法

Nuxt2では、フィルタを定義することにより、数値等を定義したフォーマットで表示することが出来ました。 plugins/filter.js import Vue from 'vue' Vue.filter('currencyJPY', (v...
Nuxt.JS

[2024年4月版]Nuxt3 + Pug +TypeScript 環境にESLintとフォーマッタを設定する方法

VSCodeでVue3を扱う場合、「Vue - Official」プラグインの利用が推奨となりましたので、公式のヘルプを見ながら環境を作り直しました。 私は、templateにPugを好んで使用しているのですが、あいにくtemplate内に...
JavaScript

NUXT3で$fetchを含む例外処理でエラーメッセージを取り出す作業が手間なので、useFetchErrorMessageというコンポーザブルを書いて使いまわしてる話。

NUXT3から$fetchを使って、APIサーバからデータを取得した際に、エラーが返ってきた際のエラーメッセージの取得が毎度面倒だったので、コンポーザブルにして使いまわすことにしました。 APIサーバはexpressを使っていて、以下のよう...
Nuxt.JS

@nuxt/content で、抜粋のみをレンダリングする方法

注)この記事は、現在の橋本技研公式サイト()を制作中に書いた記事です。 橋本技研の公式サイト()は、独立したときにWordPressを使って突貫工事で作ったものなのですが、既製テンプレートに記事だけ突っ込んだ代物ですので、ウェブサイト制作の...
Nuxt.JS

headlessCMSを使うなら、Cockpitをおすすめする理由

昨日のNuxt.JS + SSR 爆速化の記事に引き続き、珍しくブログを連投しています。 最近はheadlessCMSにReactやVueといったフロントエンドを組み合わせてウェブサイトを作ることが流行っていますよね。 Contentful...
Docker

Docker上で走るNuxt.JS + SSR のサイトをVarnishを使って爆速化した話。

あるコーポレートサイトをリリースしたのですが、最初のレスポンスが返ってくるのがちょっと遅いのでなんとかしたい。 サイトの構成は以下のとおり。 サーバはVPS( 2GB: 1 CPU, 50GB Storage )Dockerで構成(いろいろ...