一休. com/Yahoo!トラベルのNuxt3移行における開発プロセス
プロダクト開発における ソフトウェアサプライチェーンセキュリティ: 実践的フレームワークとその活用 / Software Supply Chain Security in Product Development: Practical Framework and their applications
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
プロダクト開発における ソフトウェアサプライチェーンセキュリティ: 実践的フレームワークとその活用 / Software Supply Chain Security in Product Development: Practical Framework and their applications
2022/11追記： Nuxt 3 の stable リリースに合わせて新しく記事を書き直しました。 祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力 上記の記事の方が最新の情報を詳しく網羅していますので、そちらを読んで頂くことをオススメします。 Nuxt.js バージョン3のPublic Betaが公開されて約2ヶ月が経ちました。 私自身この2ヶ月、プライベートでNuxt 3を触っているのですが、かなり気に入っています。 とにかく開発体験が向上していて、一言で表すと「開発していて楽しい」フレームワークです。あまりにも気持ちよく開発できるので、Nuxt 3が公開されてから明らかに睡眠時間が減っています。 ただ、実際に何が変わったのか、どんなところが良いのか、よくわからずにとりあえず様子見している方もいると思います。 Vue 3の目玉機能であるComposition APIはVu
11月16日、Nuxt 3 の初のstable版となる 3.0 がついに正式リリースされました！ Public Beta版が公開されてから約1年、RC版で様々な改善と機能追加が行われてきましたが、待望の安定版の登場です。 個人的にこの1年いろいろな機能を試してみた感覚として、Nuxt 3 はあらゆるフロントエンド開発者にオススメできる、非常に使いやすくて優れたフレームワークだと思っています。 Nuxt 3 は非常に多機能かつ巨大なフレームワークであり、「何が優れているのか」を一言で説明するのはなかなか難しいのですが、大きく5つのテーマに分けてその魅力を整理してみました。 まず冒頭に、テーマごとの「最低限これだけ知ってもらいたい！」という要約を載せてから、細かいポイントを解説していきます。 まずは忙しい人向けの要約だけでも読んでもらって、興味が出てきた方は続きを読んで頂ければ嬉しいです！ N
一休.com、Yahoo!トラベルのNuxtをNuxt3にアップグレードしました - 一休.com Developers Blog
CTO室プラットフォーム開発チームの山口(@igayamaguchi)です。 プラットフォーム開発チームではさらに内部でプロジェクトチームが分かれており、私はフロントエンド改善チームというチームでリーダーをしています。 フロントエンド改善チームでは主に一休.com、Yahoo!トラベルのフロントエンドの改善を行っております。 今回は一休.com、Yahoo!トラベルで使用しているNuxtのバージョンを2から3にアップグレードしたお話をさせていただきます。 一休.com、Yahoo!トラベルではトップページや検索ページ、ホテル・旅館の詳細ページなど主要なページのフロントエンドはNuxtで開発されています。 NuxtのバックエンドにはGo+gqlgenでGraphQLのサーバーを立てており、NuxtからはApolloを使用してバックエンドと通信を行っています。 このNuxtのバージョンは2とな
ANDPADフロントエンドエンジニアの小泉です。 昨年の夏頃、担当したプロダクトで新規リポジトリでの開発を立ち上げる機会があり、Nuxt 3 を用いて構築を行いました。 アップデートではなく新規で Nuxt 3 サイトを構築するのは業務としては初めての経験だったのですが、Vue 3・Nuxt 3 の様々な機能によって、型安全な状態を保ったまま快適な開発を進められ、かつ3ページの全体実装を約7営業日で形にすることができました。 この記事では、「いま新規サービスのゼロからの立ち上げにNuxt 3を選択するとどんな嬉しいポイントがあるのか」という実例をご紹介できればと思います。 担当したプロダクトについて ANDPAD資料承認 | 製品のご紹介 2023年10月にリリースされた「ANDPAD資料承認」という、資料の申請・承認を一元管理する機能のフロントエンド開発を担当しました。 ただし、紹介サイ
ブラウザバックしたときに状態を復元する（Vue3, Nuxt3 そして Next.js） - Qiita
ブラウザバックは Web アプリの鬼門 Vue に限らずですが、Web アプリにおいてブラウザでバックボタンやフォワードボタンの実行に対応するのはなかなかに難しい問題です。そのため、POST Back 型のフレームワークではブラウザバックの使用自体を禁止することも多かったと思います。 SPA全盛の今、この問題は解決されたのでしょうか。 いえ、状況はむしろ悪化しています。テンプレートエンジンを使った HTML 生成型の Web サイトであれば、ブラウザバックを行うことで、フォームの値とスクロール位置は復元されますが、JavaScript ベースで構築された画面ではフォームの値は保存されませんし、スクロール位置が復元できるかも条件次第です。 一般的な解決策 では、Twitter に代表されるSPAアプリではこの問題にどうやって対応しているのでしょうか。答えは「対応しない（あるいはスクロール位置
祝 🎉 両方とも正式リリース！ GitHub Codespaces と Nuxt3 で次世代開発体験 / codespaces-nuxt3
GEEKERS NITE #2 で発表したスライドです。 https://geekersnites.connpass.com/event/265046/
STORES フロントエンドエンジニアの wattanx です。 2022/11/16、ついに Nuxt 3 が正式リリースされましたね。 nuxt.com 私たちのプロダクトである STORES でも Nuxt を利用しており、絶賛 Nuxt 3 への移行中です。 本記事では、私たちのプロダクトにおいてどのようにNuxt 3 に移行しようとしているのか紹介します。 また、これは STORES Advent Calendar 2022 の 11日目の記事です。 移行の基本方針 Nuxt 2 を利用しているプロダクトを Nuxt 3 に移行する場合、以下の2とおりの方法が一般的だと思っています。 Nuxt 2 から Nuxt 3 に直接移行する。 Nuxt 2 から Nuxt Bridge に移行する。その後 Nuxt Bridge から Nuxt 3 に移行する。 Nuxt Bridge
はじめに Rustと言語処理系の勉強のため、簡易的なマークダウンパーサーをスクラッチで実装し、生成したWASMをNuxt3+Viteの環境で動かしてみました。 言語処理系の概要 マークダウンパーサを実装する前に、一般的な言語処理系について考えてみます。 コンパイラやインタプリタに代表される処理系の構成は以下のようになっています。 字句解析 テキストを字句の列(トークン)に分解すること 字句解析を行うプログラムを 字句解析器(lexerまたはtokenizer) と呼びます。 構文解析 トークン列を 抽象構文木(abstract syntax treeまたはAST) に変換する。抽象構文木とは、言語の構文を解釈し、データ構造を取り出した(抽象化した)木構造のこと たとえばDOMツリーは、HTMLの構文を解釈(構文解析)し、要素(タグ)を木構造で表現したものです。 How browsers w
Nuxt Bridgeを使ったNuxt3の導入調査してみた - for Startups Tech blog
こんにちは。エンジニアの大野です。主にフロントエンド周りを担当しています。 去年の話題にはなりますが、2021年10月にNuxt3のベータ版がリリースされました。 Nuxt3beta 公式のリリーススケジュールでは、このブログを書いている2022年3月にrc版、 そして2022年6月には安定版をリリースする予定となっており、着々とバージョンアップへの準備が進められている雰囲気が伺えます。 弊社にもNuxt2の環境で運用しているプロジェクトがあるのですが、vue3のリリース直前に作成した環境であるため、Composition Api やTypeScriptは別途runtimeやbuildのモジュールを個別に入れたりしており、package.json やnuxt.config.ts の設定周りがやや煩雑になっていました。 Nuxt3ではこのあたりのモジュールが標準搭載されるということもあり、チ
クライアントワーク（受託）のJamstack開発でNuxt 3を提案・実装する / Reject Conference - Vue Fes Japan Online 2022
Reject Conference - Vue Fes Japan Online 2022の登壇資料です。
はじめに Nuxt3の安定版がリリースされ、しばらく経った。現在筆者もNuxt3を活用しているプロジェクトがある Nuxt3は以前の2系にも増して更に強力な機能を公開しており、快適な開発体験を提供してくれる 代表的な機能としては Auto-imports Data-fetching utilities Zero-config TypeScript support Universal rendering (Server-side rendering and hydration) といったものがある。またNitroという新しいサーバーエンジンが導入され、より高いパフォーマンスでのレンダリングが可能になった そしてNuxt3では2つの新しいAPIであるuseFetchとuseAsyncDataが導入されている(useLazyFetchとuseLazyAsyncDataも含めれば4つ)。useFe
Nuxt 3 × Vitest でユニットテストのエラーを全て解消するための調査レポート - ANDPAD Tech Blog
Nuxt 3 × Vitest で既存のユニットテストを全て通すための調査レポート こんにちは、ANDPADでフロントエンドエンジニアをしている小泉（@ykoizumi0903）です。 昨年末に Nuxt 3 が正式リリースされて以降、アップデートに向けた移行作業を粛々と進めています！ 今回はその中でも、ユニットテストを Nuxt 3 に対応させる際に苦労したポイントや対処法についてご紹介したいと思います。 私達のチームでは昨年秋以降、コンポーネントユニットテストの拡充に力を入れてきていて、その一環として元々 Jest から Vitest にテストツールを移行していました。 しかし、Nuxt 3 への移行作業を行ったことで、これらのテストのうちの約半分が失敗するようになりました。 この記事では、このテストのエラーをどのように解消したかの流れをまとめて説明したいと思います。 （Nuxt 2
Nuxt 3 アップデートで VeeValidate v3 から v4 に移行するには - ANDPAD Tech Blog
この記事は ANDPAD Advent Calendar 2022 の 5日目の記事となります。 ANDPADでフロントエンドエンジニアをしている小泉（@ykoizumi0903）です。Vue / Nuxt.js での開発を行っています。 さて、Vue・Nuxt 界隈でこの年末ホットな話題と言えば、何といっても Nuxt 3 が正式リリースされたことではないでしょうか。 nuxt.com 非常に多くの新機能や改善が盛り込まれた魅力的なメジャーアップデートとなっており、個人的にもNuxt3の魅力をまとめた記事（祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力）を自発的に書くくらいにテンションが上がる内容となっていました。 アンドパッド社内でも、早速 Nuxt 2 を採用している各プロジェクトそれぞれで、Nuxt 3 バージョンアップに向けた取り組みが徐々にスタートしています。 S
JSer.info #658 - Nuxt 3.7がリリースされました。 Nuxt 3.7 · Nuxt Web StreamとResponseのサポート、capo.jsを使った<head>内の要素の最適化をサポート、Vite 4.4へのアップデート、Nitro 2.6へのアップデートなどが行われています。 Announcing Nitro 2.6 · UnJS tsconfig.jsonのbaseUrlではなく相対パスを使うように変更、AsyncLocalStorageを使った非同期コンテキストのサポートなども含まれます。 RomeはFork/アーカイブ化されBiomeというプロジェクトにリネームされました。 Announcing Biome Rome Tools Inc.というRomeの会社が解散され連絡がつかない状態のため、元々のコアメンバーがベースとなりBiomeという新しいプロジ
Nuxt 3.6 is out, bringing performance improvements, fully static server components, better style inlining, static presets, increased type safety - and much more. SPA loading indicatorIf your site is served with ssr: false or you have disabled server-rendering on some of your pages, you might be particularly interested in the new built-in SPA loading indicator. You can now place an HTML file in ~/a
2022年11月16日 Nuxt 3.0.0 (stable) がリリースされました（日本時間11/17） Announcing 3.0 • Nuxt この記事はベータリリース時に初稿を公開しましたが、本リリース版に対応するため加筆修正しています。 ユーザー待望の Nuxt 3 が公開されました。 （Vue 2 対応だった Nuxt 2 の Vue.js 3 対応版です） Nuxt 3 は、TypeScript のネイティブサポートをはじめとした開発体験の向上など、多数の改善がなされています。 もっとも注目したいのは Nitro によるデータ取得やレンダリング周りの機能向上があります。 Nitro により、いわゆる ISG （Incremental Static Generation インクリメンタル静的ページ生成）も可能です。Nuxt 3 は、とてもシンプルに（意識することなく）活用する
📝 Nuxt 3 公式ドキュメント 日本語訳
💎 ハイブリッド Vue フレームワーク Vue 3 で次のアプリケーションを構築し、ハイブリッドレンダリング、パワフルなデータフェッチなどの新機能を体験してください。Nuxt 3 は、Web 開発をシンプルかつパワフルにするオープンソースのフレームワークです。 GitHub で ❤️ する 新機能を搭載 Nuxt 3 は、より小さなコアで再設計され、より速いパフォーマンスとより優れた開発者経験のために最適化されています。 🪶 より軽く 最新のブラウザで最大 75 倍、サーバーデプロイとクライアントバンドルサイズを小さくしました。 🐇 より速く nitro（ナイトロと呼ぶらしい）による動的なサーバーのコード分割でコールドスタート（ハードウェアが初期化された状態から再起動すること）を最適化しました。 ❎ ハイブリッド soon ISG（Incremental Static Genera
Nuxt 3.5.0 is out, bringing Vue 3.3, new defaults, interactive server components, typed pages, environment config - and much more. ⚡️ Vue 3.3 releasedVue 3.3 has been released, with lots of exciting features, particularly around type support. new defineOptions macro'generic' componentstyped slots and using external types in defineProps... and moreThis also brings a significant improvement to data
本文書ではVue.jsのフルスタックフレームワークであるNuxt 3を使ってアプリケーションの開発を効率的に行いたいという人を対象に Nuxt 3についての解説をできるかぎり簡単なコードを利用しながら行っています。Vue.jsのComposition APIのコードが理解できることを前提に記述しているのでVue.jsを使って記述したコードの詳細について解説は行なっていませんが、本文書を読み終えるとNuxt 3の全体像と基礎的な理解を深めることができます。 Nuxtを利用したファイルのアップロードについては別の記事で公開しています。 Nuxt 3とは NuxtはVue.jsをベースに開発されたフルスタックのWEBフレームワークです。 Vue.jsはUI(User Interface)を担当しますがNuxtではVue.jsが持つUIに関わる部分だけではなくSSR(サーバサイドレンダリング)を含
A new foundationOn top of supporting Vue 3 or Vite, Nuxt 3 contains a new server engine, unlocking new full-stack capabilities to Nuxt server and beyond. It's the first JavaScript application server that is portable across a variety of modern cloud hosting providers. In production, it builds your Vue application and server into one universal .output directory. This output is light: minified and wi
Nuxt3入門(第1回) - Nuxtがサポートするレンダリングモードを理解する | 豆蔵デベロッパーサイト
Vue.jsのハイブリッドフレームワークとして人気のNuxtですが、メジャーアップデートとなるNuxt3がそろそろGAになりそうです。 Vue3やNitro、Vite等、多くの変更があるNuxt3ですが2022年春にRC版が公開された後、ハイペースで更新が続きかなり安定してきた印象です。 ここでは、Nuxt3入門と題してNuxt3が提供する基本機能について連載を書いていきたいと思います。 まず、初回はNuxtが提供するレンダリングモードを整理します。 なお、基本的なプロジェクト作成の方法は公式ドキュメントに記載されているとおりですので触れません。 今回は、新しいVueコンポーネントを作成せずに初期状態のNuxtのWelcomeページで見ていきます。
Nuxt3の新しい機能
現在 Nuxt.js は バージョン3がパブリックベータ版として提供されています。 Nuxt.js が 2 → 3 に移行するにあたってたくさんの新機能が追加されました。 パフォーマンスの向上 Nitro engine Composition API Vite Vue 3 Webpack 5 Nuxt CLI TypeScript のネイティブサポート ESM サポート Nuxt devtool(まだ) and more... 上記以外にも新たに追加された機能はどれも興味深いものばかりで今すぐにも使いたいものが揃っています。Nuxt3 で追加された新機能を体験してみましょう！ インストール Nuxt3 からは create-nuxt-app の代わりに新しく Nuxt CLI を使用してプロジェクトを作成します。
BuefyからTailwind CSSに移行してるけど、 通知を自前で作る必要があるので、いろいろ試してみたときの備忘録。 通知関連のVueコンポーネントはいくつかあるけど、 Vue3対応でメンテナンスされているvue3-notificationを利用 使い方 まずはインストール $ npm install --save @kyvg/vue3-notification プラグインの作成 vueプラグインを使うので、~/pluginsディレクトリに、 ファイル(vue-notification.client.ts)を追加する。 client側のみで利用するので、.clientサフィックスで作成 // ~/plugins/vue-notification.client.ts import Notifications, { notify } from "@kyvg/vue3-notificati
【Nuxt3入門】Nuxt3で簡単なGPT-3アプリを作成する - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは、フロントエンドチームの亀ノ上です。 最近は画像生成AIやテキスト生成AIなど、AIによる自動生成に関する話題をよく目にします。特にここ最近は ChatGPT の勢いが凄まじく、毎日のようにニュースを見かけるような気もしています。 今回はそんな ChatGPT でも使用されている言語モデルである GPT-3 を用いて、Nuxt3 で簡単なテキスト生成アプリを作成します。 Nuxt3について Nuxt3とは Nuxt3の機能 Nuxt3インストール インデックスページの設定をする フロントエンド開発 バックエンド開発 OpenAIのAPI Keysを作成 フロントエンドとバックエンドを連携 おわりに 参考 Nuxt3について Nuxt3とは Nuxt3 とは、Vue.js アプリケーションを構築するためのフレームワークです。特徴としては、高速な開発、シンプルな設計、高機能な機能など
【Nuxt 3移行】ユニットテストをNuxt 2から移行し、実行速度が4倍速くなった話 - メドピア開発者ブログ
こんにちは。フロントエンドエンジニアの相澤 ( @ttt3pu ) です。 みなさま、Nuxt 2 から Nuxt 3 へのアップグレードは順調でしょうか。 メドピアでは、2023年末のVue 2のEOLへ向けて、 各プロダクトで積極的にNuxt 3へのアップグレードを進めています。 現在私の担当しているプロダクトでは、マイグレーション作業自体はほぼ完了しており、 残すはQAテストなどを行うのみと言う段階で、本番リリースまであと一歩というところまで進んでおります！ 🎉 マイグレーションの事例も徐々に増え始めてきて、Nuxt 3のリリース当初よりも段々と移行はしやすくなってきましたが、 個人的に結構大変だったのがユニットテストのマイグレーション作業でした。 当記事では、マイグレーションに当たっての Tips と、ついでに Vitest を導入したことにより、 実行速度が 約 10分 ->
Vue.jsの基本記法をおさらいしつつ、Nuxt 3ならではの「useAsyncData」「useFetch」機能を試してみよう
本連載では、Webページのユーザーインタフェース（UI）構築に「Vue 3」を利用したフレームワーク「Nuxt 3」の活用方法を紹介します。前回は、Nuxt 3の概要、Nuxt 3プロジェクトの生成・実行、Nuxt 2のプロジェクトでNuxt 3の機能を利用するNuxt Bridgeを紹介しました。今回は、Vue.jsの基本記法を簡単に確認した後、Nuxt 3で利用できる「useAsyncData」「useFetch」機能を紹介します。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）を構築できるVue.jsとともに、様々な追加機能をまとめて提供するフレームワークです。現在次期バージョン「Nuxt 3」が開発中で、2022年4月にリリース候補（RC）版がリリースされました。 前回は導入編として、Nuxt 3の概要を説明するとともに、Nuxt 3プロジェクトを生成・実
OpenAI API のサンプルWebアプリを Next.js から Nuxt 3 + TypeScript に1時間足らずで作り変えた話
ふと OpenAI の GPT-3 による自然言語処理を体験してみたくなり、アカウントを作成したのが今日の13:30 その2時間後には OpenAI のサンプルアプリを Next.js から Nuxt 3 + TypeScript に書き換えてました。 思いつきで OpenAI を試してみたくなり、チュートリアルを読んだら触ってみたくなり、Next.js のソースコードを見たら Nuxt 3 にしたくなりました。 それでもしばらく Open AI を試していたのですが、なぜか気づいたら Nuxt 3 化し始め、あっさりできたのでしばらく疎かにしてた Zenn の記事を書こうと思い立ったのが今（16:00） なぜ Nuxt 3 で作りたくなったのか Nuxt 3 になって <script setup> は使えるし useFetch() で簡潔にAPIを扱えるし、APIルーティングも使えるし、
v3.10 comes quite close on the heels of v3.9, but it's packed with features and fixes. Here are a few highlights. ✨ Experimental shared asyncData when prerenderingWhen prerendering routes, we can end up refetching the same data over and over again. In Nuxt 2 it was possible to create a 'payload' which could be fetched once and then accessed in every page (and this is of course possible to do manua
JSer.info #685 - Storybook 8.0がリリースされました。 Storybook 8 Storybook: UI component explorer for frontend developers 破壊的な変更として、storiesOf APIの削除、*.stories.mdxの削除、StoryShots addonの削除、Yarn v1のサポート終了などが行われています。 詳細はマイグレーションガイドを参照してください。 Migration guide for Storybook 8.0 • Storybook docs 機能追加として、Chromaticとの連携機能の実装、MSWを使ったReact Server Component(RSC)のサポート。 そのほかには、SWCを使うことでビルドパフォーマンスの改善、react-docgenがデフォルトとなるように変
Nuxt3入門(第8回) - Nuxt3のuseStateでコンポーネント間で状態を共有する | 豆蔵デベロッパーサイト
前回はNuxt3でプラグイン、ミドルウェアの導入について見てきました。 今回はNuxt3が提供する状態管理について見ていきます。 Nuxt2では、コンポーネント間で状態を共有するには、Nuxt2にバンドルされているVuexを使うのが一般的でした。 Nuxt3ではVuexはNuxt本体に含まれていません。 代わりにNuxt3では新たにuseState Composableが提供されるようになりました[1]。 useStateはVuex程の機能はありませんが、必要最低限のシンプルな設計で使いやすいものとなっています。 比較的シンプルなデータ構造であったり、中小規模のアプリケーションでは十分に実用的なものとなっています。 Informationそれなりの規模のアプリケーションでは、Piniaの利用を検討すると良いかと思います。 こちらはNuxtモジュールとして提供されています。 useState
Nuxt3のモジュール開発は意外と簡単？ | ドクセル
Nuxt3のモジュール開発は意外と簡単？ Module Author Guideをのぞいてみよう Vue Fes Japan2023 2023/10/28(土) きらぷか(@kira_puka) きらぷかとは？ きらぷか (@kira_puka) ● 合同会社めもらば 代表 ● Webアプリの受託開発 ● 趣味: 積読と個人開発 積読ハウマッチ SSSAPI 総額がわかる書籍管理アプリ Googleスプレッドシートの JSON API化サービス
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Capacitorプラグインで実現する、Nuxt 3のハードウェア連携 - hacomono TECH BLOG
はじめに こんにちは、hacomonoでウェブアプリケーションの開発を担当しています、野崎です（社内ではサイモンと呼ばれています）。 少し前に、Nuxt 3とCapacitorで作るiOSアプリの記事をパブリッシュしており、今回はその続きです。Capacitorで構築したiOSアプリから外部ライブラリをプラグイン化して呼び出すという話をします。 併せて読んでいただけますと、より理解しやすくなりますのでそちらもご参考ください。 techblog.hacomono.jp 前提条件 hacomonoのPOSレジとは hacomonoではフィットネスクラブやジムの店舗管理システムと連動して使えるPOSレジを開発、提供しています。 POSレジ自体のコンテンツはあくまでウェブアプリケーションとして構築されており、WebViewを介して画面操作が可能となっています。 iOSアプリ周辺のアーキテクチャを図
IntroductionUpgrading to Nuxt 3 from Nuxt 2 can be a little intimidating. There are a ton of changes to keep track of, and it's easy to feel like you're lost in a maze of code. But don't worry, I'm here to help! I've started this cheat sheet to simplify the upgrade process for myself and for others who are brave enough to tackle it. It's a work in progress, and not intended to be exhaustive. I'll
本記事で書かれている内容は 2021/10/21 時点の内容になります。 ベータ版のため、今後記載方法の大きな変更の可能性があります。 最新情報は Nuxt 3 公式ドキュメントでご確認ください。 はじめに 2021/10/12 Nuxt.js 3（以下 Nuxt 3）がパブリックベータ版に移行しました 🎉！ これによって誰でも触れるようになったというわけで、今回早速試してみました的な記事です。 （そしてなぜか Zenn ではあまり話題になってない…） Nuxt 3 の主な新機能 主な新機能は以下の通りです。 Nitro Engine による高速化/軽量化および Nuxt 内部での API 作成への対応 トップページの記載によれば、75 倍の軽量化が実現したそうです。 高速化に関しては数値まで公表されていないですが、実際にアプリを作成したところバージョン２とは別物レベルで早くなっていまし
VercelのEdge Cacheの動作をNext.jsと比較する事で、Nuxt3のパフォーマンスチューニングを考察してみた。
SSRを利用したフロントエンドフレームワークでのパフォーマンスチューニング 出典: https://vercel.com/docs/concepts/edge-network/caching NextやNuxt3等のSSRを利用したフレームワークを使ってアプリケーションを運用するにあたって、その真価を発揮するためには何をどこまで静的コンテンツとして確定させ、CDNにキャッシュさせるかを考慮する必要があります。Nextではデフォルトで全てのページがプリレンダされていて(事前にReactのコンポーネントがHTMLとして出力されていて)、コンテンツの表示にAPIのfetchが必要なページもgetStaticPathsとgetStaticPropsを使用することによって、静的なコンテンツとしてプリレンダする事ができます。(NextのドキュメントではSGという用語が使われていますが、コンテンツをリク
2022年11月16日 Nuxt 3.0.0 (stable) がリリースされました（日本時間11/17） Announcing 3.0 • Nuxt この記事はベータリリース時に初稿を公開しましたが、本リリース版に対応するため加筆修正しています。 Nuxt 3 の useState を使った State 管理（状態管理）の記事です。 Nuxt 3 では Vuex がサポートされていません。 Vue 3 に対応した Vuex 5.x がリリースされるのを待たずとも Nuxt 3 にもいち早く対応した Pinia を使って State 管理をすることは可能です。 しかし、それほど大規模なアプリケーションでなければ useState と Composables (Composition Function) を組み合わせることで非常に簡単に State 管理をすることが可能になります。 Pini
Nuxt 3 で Vuetify 3 を使う
Nuxt 3 で Vuetify 3 を使った開発の始め方をまとめました。 この記事の初稿時点でのバージョンは下記のとおりです。 Nuxt 3.2.0 公式サイト: https://nuxt.com/ リポジトリ: https://github.com/nuxt/nuxt Vuetify 3.1.4 公式サイト: https://vuetifyjs.com/ リポジトリ: https://github.com/vuetifyjs/vuetify Nuxt 3 をインストールする Nuxt 3 を始める際は、つぎのコマンドを利用します。
Nuxt3で導入されたハイブリッドレンダリングとNuxt版ISG/ISRを試してみる | 豆蔵デベロッパーサイト
これは、豆蔵デベロッパーサイトアドベントカレンダー2022第18日目の記事です。 今年春にRCバージョンとなったNuxt3は、先月(2022-11-16)ようやく安定バージョンとなりました。 Announcing Nuxt 3.0 stable Nuxt3の目玉機能の1つとしてハイブリッドレンダリングがあります。 以下公式ドキュメントからの引用と機械翻訳結果です。 Hybrid rendering allows different caching rules per route using Route Rules and decides how the Server should respond to a new request on a given URL. ハイブリッドレンダリングは、Route Rulesを使用してルートごとに異なるキャッシュルールを可能にし、与えられたURLの新しい
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt 3 を今すぐオススメしたい 15 のポイント
祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力
![さくらインターネットで活躍中の id:y_uukiを訪問 | はてな卒業生訪問企画 [#9] - Hatena Developer Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b5961cfe7e9736ef0e88bc0290b1599481d2626/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhatenatech%2F20240319%2F20240319125826.jpg)
新規プロダクトの開発に Nuxt 3 を採用して良かったこと - ANDPAD Tech Blog
Nuxt 3 への移行に向けて頑張ってます - STORES Product Blog
Rustでマークダウンパーサーを自作して、WASM+Nuxt3+Viteで動かしてみた
Nuxt3で個人的にuseFetchよりuseAsyncDataを推したい理由
2023-09-01のJS: Nuxt 3.7、Rome → Biome、Astro 3.0
Nuxt 3.6 · Nuxt Blog
Nuxt 3 の useFetch() と useAsyncData() の使い方
Nuxt 3.5 · Nuxt Blog
Nuxt 3を使いこなすために基礎から徹底解説 | アールエフェクト
Announcing Nuxt 3 Release Candidate · Nuxt Blog
Nuxt3でvue3-notificationをつかって通知する - くらげになりたい。
Nuxt 3.10 · Nuxt Blog
2024-03-19のJS: Storybook 8、Nuxt 3.11、Cloudflare Workers + Vitest
JavaScriptフレームワーク「Vue 3」と「Nuxt 3」の活用一覧
Nuxt 3 Migration Simplified: A Cheat Sheet · Harlan Wilton
Nuxt 3がパブリックベータ版になったので新機能の紹介や所感など
Nuxt 3 + TypeScript で状態管理（useState編）
www.47news.jp
haogadget.com
www.tsr-net.co.jp
mainichi.jp
ameblo.jp/sabathe
k-tai.watch.impress.co.jp