はじめに 株式会社エブリーでソフトウェアエンジニアをしている桝村です。 本記事では、Nuxt 3 へのアップデートに向けて、Nuxt Bridge を使用して Nuxt 2 のアプリケーションへサーバーエンジン Nitro を導入したので、実施内容やそれによって得られた知見について紹介します。 この記事のゴールは、以下を想定しています。 Nitro の概要や、Nuxt 2 への Nitro 導入のメリットを把握する Nuxt 2 への Nitro 導入における変更点や考慮すべきポイントを把握する Nuxt 3 へのアップデートに関連して、Vuex の Pinia への移行については、以下の記事…

はじめに この記事は、every Tech Blog Advent Calendar 2024(夏) の1日目の記事です。 DELISH KITCHEN開発部の羽馬(@NaokiHaba)です。 この記事では、DELISH KITCHEN チラシ で使用している Vuex の Pinia への移行について紹介します。 chirashi.delishkitchen.tv 本記事では、これらの知識があることを前提に説明を進めます。 Vue.jsの基本的な知識 Nuxt.jsの基本的な知識 Vuexの基本的な知識 Piniaとは Pinia（ピーニャ）は、Vue.js用の新しい状態管理ライブラリです…

こんにちは。出口です。 タイトルにある通り、技術ブログをはてなブログに移行しました。 この記事では、なぜ移行することになったのか、どうやって移行したのか、移行で苦労したところなどをまとめておきたいと思います。 もし脱セルフホストブログ、脱Contentfulや、はてなブログへの移行をお考えであれば参考になるのではないかと思います。 なぜ移行したのか Nuxt 3への移行が大変すぎる Contentfulへの不満が募ってきた 当初の計画 改めて移行を考える 移行について 記事移行 インポート機能を使ってWXRを取り込む場合 AtomPubを使ったパターンの場合 サブディレクトリオプション Net…

概要 Nuxt.jsでmiddlewareディレクトリ配下に authenticated.ts のようなファイルを配置してそれをテンプレートから呼び出す方法はサンプルが沢山あるものの、 インラインでmiddlewareを書くサンプルがないなと思い、書き方に若干迷ってしまったので未来の自分のために備忘録として残します。 書き方 export default defineComponent({ name: "SamplePage", components: { SampleButton }, middleware: [ async ({ redirect }) => { if (何らかの条件式) …

こんにちは。フロントエンドエンジニアの相澤 ( @ttt3pu ) です。 みなさま、Nuxt 2 から Nuxt 3 へのアップグレードは順調でしょうか。 メドピアでは、2023年末のVue 2のEOLへ向けて、 各プロダクトで積極的にNuxt 3へのアップグレードを進めています。 現在私の担当しているプロダクトでは、マイグレーション作業自体はほぼ完了しており、 残すはQAテストなどを行うのみと言う段階で、本番リリースまであと一歩というところまで進んでおります！ 🎉 マイグレーションの事例も徐々に増え始めてきて、Nuxt 3のリリース当初よりも段々と移行はしやすくなってきましたが、 個人的に…

はじめに こんにちは。マイクロアドシステム開発部の東です。 業務では主に画面などのプロダクトを開発しています。 今回は新規プロダクトでNuxt 3を採用し、実際に開発してみて特に良かった機能を紹介します。 目次 はじめに 目次 Nuxt 3の採用 開発体験 Auto-imports serverディレクトリ composables おわりに Nuxt 3の採用 Nuxt 3はNuxt.jsの最新バージョンで、以下の利点が主にあります。 Nitroエンジンによる高速・軽量化 TypescriptやVue 3(composition-api)のネイティブサポート 今回、新規プロダクト（cataly…

フロントエンドエンジニアの小林和弘です。 去年の 4 月に「Web アプリを 3 つ使ったサービスを 3 ヶ月でつくりたい」という話が降ってきて、無茶を現実にした話をします。 新規サービス「やくばと」で Workspaces のモノレポを使って、医療機関画面、薬局画面、患者画面の 3 つの Nuxt を構築しました。 やくばととは 医療機関、薬局、患者さまの間でやり取りされる医療機関起点の薬局向け処方せん画像事前送信サービスです。処方せんに関する業務負荷を軽減すると共に、患者さまの大きな負担である医療機関、薬局での待ち時間を軽減するということを主な目的としたサービスです。 医療機関、薬局の D…