Nuxt3

hacomono フロントエンドのテックリードのみゅーとん(@_mew_ton)です。 先日 2022/10/16 に開催された Vue Fes Japan Online 2022 に、スピーカーとして登壇していした。 登壇時の発表資料と、発表した関連のブログ記事のリンクをここでまとめます。 デザインシステムを後から導入する前提で作った 変更に強いNuxt3プロジェクトの構成 スライド speakerdeck.com アーカイブ (07:20:21 頃から私のセッションとなっています) 関連記事 Atomic Design を再考する https://techblog.hacomono.jp/…

Nuxt3で作成したプロジェクトをCloudflare Pagesにデプロイするときに、表題のエラーが出ました。 Failed: build output directory not found 等は結構ググれば出てくるし、何となく意味もわかるのですが、こちらは見つからず。 解決方法は単純で、 ビルド出力ディレクトリ の部分を、 /dist から /.output/public に変更すればOKでした。 generateを実行した際、 /dist が元々 /.output/public へのリンクになっていたと思うんですが、それがうまく貼られなかったということなんですかね...。

フロントエンドのテックリードのみゅーとん(@_mew_ton)です。 弊社では新しいプロジェクトを立ち上げの際に、Nuxt3を採用しています。 このプロジェクトでは、APIコール部分の実装について、以下のようなルールを設けています。 ブラウザからは、 Nuxt3 の ServerRoutes (BFFサーバ) へアクセスする BFFサーバから、APIサーバへアクセスし必要な情報を取得する BFFサーバにて、ブラウザで表示するためのデータ構造に変換する (不要な情報を削ぎ落とす) このプロジェクトでE2Eテストを導入するためBFFサーバのモックを準備しました。 今回は、Nuxt3 の Serve…

nuxt3の素振りついでに、最近よくzennなどで見るmock service workerを導入してみた。 mock service workerについては以下参照。 mswjs.io nuxt3環境構築 npx nuxi init YOUR-PROJECT-NAME mswをインストール yarn add -D msw msw関連ファイル追加 ./mocks/handlers.ts import { rest } from "msw"; export const handlers = [ rest.get("/users", (_, res, ctx) => { return res( c…

Overview Context SSG やってみた 余談 Functions deploy がこける問題 lint と build が predeploy で強制的にかかってしまう Overview ※ 筆者がたまたま Nuxt3 を弄っていて気づいた話なので最新の動向は GitHub の Discussion を追ってください。 github.com Nuxt3 に移行を始めた当初は Nuxt3 が RC になったばかりで、Static Site Generator (SSG) が実装されていませんでしたが、先日 RC5 で試してみたら nuxt.config.js の defineNux…

Overview 導入方法 Install dependencies Setup Plugin How to use まとめ 余談 Nuxt3 の rc がなかなか上がらなかったのは vue-jest 依存のせいだった。 See Also Overview 少し前にポートフォリオサイトを Nuxt2 -> Nuxt3 にアップデートしましたが、このときに互換性がまだなかったので FontAwesome を一旦外す選択肢をしました。 ema-hiro.hatenablog.com 久しぶりに調べたらどうやら Nuxt3 でも使えそうになっていたので FontAwesome をあらためて導入したの…

職場でNuxt3を使っていて、モーダル画面を作ることになりました。 で、普通にモーダルを作る時と同じ感覚で作ってたら、ファイルの切り出し方で混乱したので整理しときます。 まず、テレポートとは？ 頑張って公式の文章から理解しようとしましたが無理でした。。。 サンプルコード見たり、色々調べる中で以下の説明が一番簡潔でわかりやすく感じました。 定義したコンポーネントが属するDOMツリーとは別の場所に、まるでテレポートしたかのようにコンポーネントを移動できる機能です。 出典：Vue.js 3.0 の新機能を試す。 〜 Teleport 編〜 - Qiita その後このビデオを見ながら一緒にサンプルを作…

はじめに WEBエンジニアになってすぐに作り始めたリポジトリがある程度まで動作するようになったので今回はそこから得られた学びをまとめておきたいと思います。 以前も少し触れましたが、このブログを書き始めて一年間がたちました。かなり気合を入れて毎週記事を書いてきたのですが、そろそろアウトプットを中心とした記事も混ぜていこうかなと思います。 例えば今回は、技術についてだけでなく、いろいろ自分で手を動かしてみて感じたことや反省点をまとめてみます。 作ったもの LaravelとNuxt2を使用して簡単なToDoアプリを作成しました。 Trello風にカードの追加、更新、削除や移動ができるようになっていま…

最近は細々したタスクを担当しつつ、もっぱらNuxtのアップデート作業に従事しています。 で、色々やっているうちにちょこちょこ知見も溜まってきたのでそれらをまとめてみようと思います。 変数の値 Vueのcomputedよく使うと思います。 例えばVue2までのOptions APIで書くとこんな感じ。 <script> export default { name: 'Hoge', data() { return { hoge: 1 } }, computed: { fuga() { return this.hoge * 2; }, piyo() { return this.fuga + 1; }…

ポートフォリオをリニューアルしました（ドメインも取りました）。メインビジュアルとしてフラクタル図形の３次元化を試みています。 followthedarkside.com 勉強がてら色々と初めてのものを導入してみたので、備忘録として記事にしておきます。Web開発って初心者向け情報だと「HTML+CSS+JSで簡単なサイト作ってみよう」から、ちょっと深掘りし出すと急に知らない言葉や概念が大量に出てきてようわからんってなりませんか。あとWordPressで稼ごう記事や怪しいオンラインスクールなど（WPが悪いわけじゃないんです）。 今回の記事は導入からデプロイまで網羅的に（雑に）書いてますので、Web…

３月９日発売の本 ３月１０日発売の本 ３月１１日発売の本 ３月１２日発売の本 ３月１３日発売の本 ３月１４日発売の本 ３月１５日発売の本 ３月９日発売の本 宇崎ちゃんは遊びたい！ 10【電子特典付き】 (ドラゴンコミックスエイジ) 作者:丈 KADOKAWA Amazon デスマーチからはじまる異世界狂想曲(15) (ドラゴンコミックスエイジ) 作者:あやめぐむ KADOKAWA Amazon 勇者パーティを追い出された器用貧乏 ～パーティ事情で付与術士をやっていた剣士、万能へと至る～（６） (シリウスコミックス) 作者:よねぞう,都神樹 講談社 Amazon 聖者無双（１１） (シリウスコミ…

Nuxt 3 × Vitest で既存のユニットテストを全て通すための調査レポート こんにちは、ANDPADでフロントエンドエンジニアをしている小泉（@ykoizumi0903）です。 昨年末に Nuxt 3 が正式リリースされて以降、アップデートに向けた移行作業を粛々と進めています！ 今回はその中でも、ユニットテストを Nuxt 3 に対応させる際に苦労したポイントや対処法についてご紹介したいと思います。 私達のチームでは昨年秋以降、コンポーネントユニットテストの拡充に力を入れてきていて、その一環として元々 Jest から Vitest にテストツールを移行していました。 しかし、Nuxt …

こんにちは。エキサイト株式会社で24卒デザイナー内定者アルバイトをしている、齋藤です。 先日、「Nuxt3で効率的にスタイルを書く」と題して、TSで定義した変数を<style>で参照する方法をご紹介しました。が・・・。 Vue3.2以降では<script>の構文が変更となり、同じComposition APIでも<script setup>構文を使用することができるようです。今回は、Vue3.2以降の最新版でTSで定義した変数を<style>で参照する方法をご紹介します。 そもそも<script setup>って何？ Vueの公式ドキュメントでは以下のように紹介されています。 <script …

概要 こんにちは。サーバーサイドエンジニアの窪田です。 今回はフロントエンドのuseSWR というhooksの性質と、バックエンドがDDDで設計されている場合の相性について考えていこうと思います。 リンク先で述べられている通り、useSWRの名前はstale-while-revalidateに由来します。 「まずキャッシュからデータを返し（stale）、次にフェッチリクエストを送り（revalidate）、最後に最新のデータを持ってくるという戦略です。」と述べられています。 Next.jsの台頭とhooksの主流化により、データ取得にuseSWRやreact-queryを用いてキャッシュ戦略を…

やったこと 朝イチ洗濯物と脱衣所の掃除 ゴミ捨て 朝ヨガ 体が硬くなっていてつらい 冬物の服に撥水加工した 洗濯物を全て片付けた 今週のコーヒーを焙煎した ポートフォリオ作成 nuxtのエラーから抜け出せなくなって2時間が経過 そもそもnuxt3になってからコマンド変わっていたっぽい https://nuxt.com/docs/getting-started/installation 疲れたので残りは来週 nodeのversionが古いのでとりあえずアップデートしたい https://webrandum.net/cannot-install-under-rosetta2-in-arm-defa…

こんにちは。 エキサイト株式会社で24卒デザイナー内定者アルバイトをしている、齋藤です。 デザイナーとしてマークアップを行う場合、HTMLやスタイルを書くことが多いと思います。今回はNuxt3（Vue）で効率的にスタイルを書く方法を備忘録的に記します。 通常のCSSの場合 通常のCSSの場合は:rootを使用することで変数を宣言し、同一の内容は変数をあてることでスタイリングすることができました。 :root { --primary-black: #000000; } 例えば、#000000のカラーを--primary-blackとして宣言した場合、 p { color: var(--prima…

Nuxt3の環境をdocker-composeで構築するためのdocker-compose.ymlの設定を記載しています。 version: '3.9' services: nuxt: container_name: nuxt-app # コンテナ名 image: node:18-alpine # Dockerイメージ、軽量なalpineを指定 ports: - 3000:3000 # NuxtへHTTPアクセスする際のPortを開放 volumes: - ./nuxt-app:/nuxt-app # Nuxtプロジェクトをbind mountする # Nuxtを起動する、またyarn ins…

# はじめに # イベント概要 # タイムテーブル # スポットスポンサーセッション ## 要約 ## 詳細 # LT ## 要約 # メインセッション ## 要約 useAsyncData useFetch # 座談会およびQ&A ## 印象に残った話 Vue3へのマイグレート方法について 座談会登壇者のNuxt使用状況について # 個人的な感想 現在関わっているプロダクトにNuxtを導入するかどうか # さいごに # はじめに こんにちは。イネーブリングチームでフロントエンド領域のリードエンジニアをしている鵜木(@nokki_y)です。 今回は先日参加した「Vue.js v-tokyo M…