並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 40 件 / 44件

新着順 人気順

NUXTの検索結果1 - 40 件 / 44件

  • Vue.js と Nuxt の 2023年まとめ

    2023年は Vue.js および Nuxt のアップデートがとっても活発な一年でした。 これだけ多くの、そして多様な進展があると、1年を振り返っておかないと何があったか忘れてしまいそうです。 というわけで Nuxt, Vue.js, Vite 関連の情報をピックアップして🏃‍♂駆け足で振り返ってみます。 (数が多かったので、おもに公式周辺のアカウントから告知されたものが中心です。漏れがあったらすみません。教えていただければ追加します) 🗓2023年1月 2022年の春先に正式に Vue.js 3 がデフォルトのバージョンとなり、2022年11月に Nuxt 3.0 がリリースされました。 年が明けて2023年1月の主だった情報です。 🔼Nuxt 関連 2023年1月17日に公開された Daniel Roe @danielcroe氏による公式ブログ記事 Nuxt: A vision

      Vue.js と Nuxt の 2023年まとめ
    • 新規プロダクトの開発に Nuxt 3 を採用して良かったこと - ANDPAD Tech Blog

      ANDPADフロントエンドエンジニアの小泉です。 昨年の夏頃、担当したプロダクトで新規リポジトリでの開発を立ち上げる機会があり、Nuxt 3 を用いて構築を行いました。 アップデートではなく新規で Nuxt 3 サイトを構築するのは業務としては初めての経験だったのですが、Vue 3・Nuxt 3 の様々な機能によって、型安全な状態を保ったまま快適な開発を進められ、かつ3ページの全体実装を約7営業日で形にすることができました。 この記事では、「いま新規サービスのゼロからの立ち上げにNuxt 3を選択するとどんな嬉しいポイントがあるのか」という実例をご紹介できればと思います。 担当したプロダクトについて ANDPAD資料承認 | 製品のご紹介 2023年10月にリリースされた「ANDPAD資料承認」という、資料の申請・承認を一元管理する機能のフロントエンド開発を担当しました。 ただし、紹介サイ

        新規プロダクトの開発に Nuxt 3 を採用して良かったこと - ANDPAD Tech Blog
      • リーナー、Nuxt.jsからNext.jsに乗り換えたってよ - リーナー開発者ブログ

        こんにちは。 めろたんです。 最近は咳としゃっくりが同時に出るようになってしまってとてもしんどいです。 はい。 今回は、弊社のサービスである、リーナー見積のフロントエンドをVueからReactに乗り換えた話について書いていこうと思います。 まず前提 リーナー見積では、フロントエンドは3つのサービスに分かれており 買い手向け画面 売り手向け画面 リーナー運営向け画面 という構成になっております。 サービスの構成図 各々Nuxt.jsで作られており、その全てでSEOや初期ページローディングのパフォーマンスをすごく求められるものではないため、CSRで行うように構成していました。 また作り始めた当時、会社やプロダクトがアーリーフェイズであり、そもそもプロダクトがこれで行けるかどうかというのもあったため、何を使って作るかというのは深く考えず、後に作り直すだろうというのを前提でNuxt.jsを選定して

          リーナー、Nuxt.jsからNext.jsに乗り換えたってよ - リーナー開発者ブログ
        • 技術ブログをNuxt + Netlify + Contentfulから、はてなブログ for DevBlogに移行しました - もふもふ技術部

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

            技術ブログをNuxt + Netlify + Contentfulから、はてなブログ for DevBlogに移行しました - もふもふ技術部
          • 複数の開発チームの機能開発を止めずに Nuxt3 へアップデートしました - ANDPAD Tech Blog

            はじめに 背景 1. 大きなリリースによるアップデートに失敗した 2. 機能開発を止めずにお客様へ価値提供したかった 課題 リリース管理の複雑さ 取り組んだこと 1. 変更予定の内容と実施時期を透明化する 2. アップデート作業による変更量を小さく頻繁にリリースする 2.1. Nuxt Bridge を利用してアップデートする 2.2. 互換レイヤーを作成してアップデートする 2.3 codemod script を作ってアップデートする おわりに はじめに SWE の sunecosuri です。 アンドパッドでは多くのプロダクトで Nuxt を使用しており、 使用していたバージョンの Nuxt2 が EOL を迎えたため、 Nuxt3 へアップデートしました。 この記事では、複数のプロダクトチームが開発する環境でどのように 機能開発を止めずに Nuxt のメジャーアップデート に取り組

              複数の開発チームの機能開発を止めずに Nuxt3 へアップデートしました - ANDPAD Tech Blog
            • Nuxt 3 への移行に Nuxt Bridge を使うのはいかが? - メドピア開発者ブログ

              こんにちは!フロントエンドエンジニアの土屋 (@tutti2612) です。 いよいよ Nuxt 2 の EOL が迫ってきましたね。 nuxt.com 先日、弊社でもとあるプロダクトの Nuxt 3 への移行を完了させました。 メドピアでは既に複数のプロダクトで Nuxt 3 への移行を行ってきましたが、今回の移行では今までとは違ったアプローチを取りましたので、その詳細をお伝えしたいと思います。 これから Nuxt 3 への移行を考えている方にとって、少しでもお役に立てれば幸いです。 今回の移行の特徴 Nuxt Bridge の使用 積極的な新機能開発を行いながらのビッグバンリリース 成功の要因 Nuxt Bridge の使用 週 1 回の定例ミーティング エンジニア以外の協力を得た手厚い手動テスト 巨人の肩に乗ることができた こうすれば良かった おわりに 今回の移行の特徴 今回の移行の

                Nuxt 3 への移行に Nuxt Bridge を使うのはいかが? - メドピア開発者ブログ
              • Nuxt Auth Utils でサーバーサイドの認証を(OAuth・マジックリンク・ワンタイムパスワード)

                Nuxt 3 では Universal Rendering (SSR) によるアプリケーションの開発が難なく可能です。 Nitro というサーバーサイドのフレームワークにより、Nuxt 3 はサーバー側の処理も簡潔に記述できるようになっています。 Nuxt Auth Utils はそんな Nuxt の特徴を生かした、SSR のアプリケーションに OAuth 認証を実装できる Nuxt モジュールです。 執筆時点で GitHub, Google, Discord など 17 の OAuth プロバイダーに対応していますので、通常用途では充分だと思います。 さて当記事では、そんな Nuxt Auth Utils を使った実装と、後半では OAuth 以外の認証方法であるマジックリンク認証とワンタイムパスワード認証を追加実装する方法を解説します。 完成形のイメージ 完成したログインフォームはこの

                  Nuxt Auth Utils でサーバーサイドの認証を(OAuth・マジックリンク・ワンタイムパスワード)
                • React to Nuxt

                  Nuxt for React devs in development everything you need to get started with Nuxt, from a React perspective. join waitlist with GitHub by registering you are signing up for email updates what will it cost? I'm still working out the details. I am aiming to be accessible to most developers. There will be purchasing power parity discounts. I'll also offer an early adopter discount for users who purchas

                    React to Nuxt
                  • Nuxt UI / Nuxt UI Pro、始めました

                    はじめに こんにちは、がんがんです。 皆さんは Nuxt 環境でコンポーネントを実装する時、どんな UI ライブラリ/FW を利用していますか? Nuxt 環境でコンポーネントを実装する場合、 Tailwind CSS、Panda CSS などを用いて自前で実装する Vuetifyを利用する shadcn-vueを利用する PrimeVueを利用する etc. などなどの選択肢が挙げられると思います。 本記事では Nuxt 公式が提供しているNuxt UIを実際に触ってみたいと思います。 Nuxt UI ってどんなもの? Nuxt UI の環境構築はどうすれば良い? などの疑問を解消出来たらと思います。 Nuxt UI とは Nuxt UI とは、Nuxt 公式が提供する UI Library です。 Headless UI と Tailwind CSS をベースに実装されており非常に利用

                      Nuxt UI / Nuxt UI Pro、始めました
                    • Nuxt Scripts でサードパーティスクリプトをより身近に

                      はじめに こんにちは、がんがんです。 2024 年 6 月に Nuxt v3.12 がリリースされました。 Nuxt v3.12 の目玉としては Nuxt4 のリリース準備が進んでいること、現環境で Nuxt4 のマイグレーション実験を行えること が挙がられると思います。 Nuxt4 へのマイグレーション実験はこちらの記事で実験されています。合わせてご覧ください。 そんな v3.12 のリリースノートの中に今まで見たことなかったモジュール名が記載されていました (以下ブログ記事の引用) 📜 Nuxt Scripts auto-install We've been gradually working to release Nuxt Scripts. It's currently in public preview, but we're near a public release, so w

                        Nuxt Scripts でサードパーティスクリプトをより身近に
                      • Nuxt Serverと$fetchを 組み合わせたTypeScript開発体験

                        TypeScript開発において、関数の返り値などに型がついていると、開発体験が向上するかと思います。しかしfetch関数を用いて外部API等を叩いた際、fetch関数の返り値には型が適用されません。API fetchの返り値に型を適用させるために、OpenAPI形式のAPI定義ファイルを元に、型定義フ…

                          Nuxt Serverと$fetchを 組み合わせたTypeScript開発体験
                        • Nuxt 3・Nuxt 4 の useFetch() を完全に理解する(したい)

                          以前(まだ Nuxt 3 がベータリリースだった頃)に『Nuxt 3 の useFetch() と useAsyncData() の使い方』という記事を書きました。 その後、より多機能になり、またベストプラクティス的な使い方が分かってきたこともあり、改めて useFetch() についてまとめてみたいと思います。 はじめに ここ数年、一貫して Nuxt 3 を使用している僕ですが、主要なコンポーザブルである useFetch については当初の理解が違っていたものもありました。 少しずつ修正しながら、都度コードを書き換えてきたのですが、その過程で得られた知見を共有したいと思います。 なお、記事内で Nuxt と書いた場合は Nuxt 3 および Nuxt 4 を指します。 (現時点では Nuxt 4 はリリースされていませんが、発表されている内容から Nuxt 3 との違いを考慮しつつ記述し

                            Nuxt 3・Nuxt 4 の useFetch() を完全に理解する(したい)
                          • Build, Deploy & Manage Nuxt apps that scale · NuxtHub

                            NuxtHub is a deployment and administration platform for Nuxt, powered by Cloudflare. Deploy your Nuxt apps at low cost and with ease, ensuring lightning-fast performance for your users anywhere on the planet. Ship faster with our built-in full-stack features: AI, Database, Files Storage, KV, Caching and more.

                              Build, Deploy & Manage Nuxt apps that scale · NuxtHub
                            • 【Nuxt 3移行】ユニットテストをNuxt 2から移行し、実行速度が4倍速くなった話 - メドピア開発者ブログ

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

                                【Nuxt 3移行】ユニットテストをNuxt 2から移行し、実行速度が4倍速くなった話 - メドピア開発者ブログ
                              • Nuxt Auto-imports機能の深淵を求めて

                                はじめに こんにちは、がんがんです。 2024.02.29 に関西で行われたReboot v-kansai Meetup #15で LT 登壇をしてきました。 登壇内容が GitHub の実装を掘っていくものだったため、本記事で改めて整理できたらと思います。 スライド資料はこちらです Auto-imports の使い方はこちらです Auto-imports 機能とは Auto-imports 機能とはcomponents、composablesを import 文不要で利用できる Nuxt の機能です。components の Auto-imports 機能はNuxt2時代からあったものです。 Nuxt3 の Auto-imports は以下の 2 機能を有しています。 機能 1. Built-in Auto-imports Vue, Nuxt composable が import 不要

                                  Nuxt Auto-imports機能の深淵を求めて
                                • 2024-06-22のJS: Nuxt 2 EOL、TypeScript 5.5、State of JavaScript 2023の結果

                                  JSer.info #697 - Nuxt 2は2024年6月30日でEnd-of-Life (EOL)となることが発表されました。 Nuxt 2 End-of-Life (EOL) · Nuxt Blog Nuxt 2.xの最終版となる2.18.0が6月末にリリースされる予定となっていて、それ以降はセキュリティアップデートも公式には提供されなくなります。 TypeScript 5.5がリリースされました。 Announcing TypeScript 5.5 - TypeScript TypeScript 5.5では、関数からtype predicatesを推論できるようになり、Array.prototype.filterなどでの絞り込みが簡潔に書けるようになっています。 また、Stage 3のSet Methodsをサポート、JSDocで@import {foo} from "foo"を

                                    2024-06-22のJS: Nuxt 2 EOL、TypeScript 5.5、State of JavaScript 2023の結果
                                  • Nuxt 3.10 · Nuxt Blog

                                    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

                                      Nuxt 3.10 · Nuxt Blog
                                    • 2024-03-19のJS: Storybook 8、Nuxt 3.11、Cloudflare Workers + Vitest

                                      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がデフォルトとなるように変

                                        2024-03-19のJS: Storybook 8、Nuxt 3.11、Cloudflare Workers + Vitest
                                      • Nuxt 2 End-of-Life (EOL) · Nuxt Blog

                                        What happens on June 30th, 2024?After this date, Nuxt 2 will continue to be available on the NPM package manager, but will no longer receive updates, such as security and browser compatibility fixes. In other words, your applications will continue to work, but you may get deprecation warnings from your package manager reminding you that Nuxt 2 is no longer a supported version. What’s Next?Nuxt 3 h

                                          Nuxt 2 End-of-Life (EOL) · Nuxt Blog
                                        • Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt.

                                          「Vue / Nuxt利用者が気軽に情報を得ることができ、またVue / Nuxt初学者がまずここを訪ねてみる」 と思える、そんなVue / Nuxtの情報が集まる広場。ハードルは低く、わちゃわちゃと知見が集まる広場へ。 ✍️ Articles: Vue, Nuxt, related libraries

                                            Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt.
                                          • 娘のためにFlutterでゲームを作ってみた with Nuxt.js

                                            昔作ったUnityのゲームアプリ、なぜか娘が楽しそうに遊んでいて、 Flutterでリメイクしてみよ!と思い立ち、無事リリースできたので、 構成とかをまとめてみました(*´ω`*) どんなゲーム? 鯖(サバ)の中から鮪(マグロ)を探す かわいいお気軽タッチゲーム🐟 実際のプレイ画面はこんな感じに せっかくリメイクするので、 「親子で一緒にたのしめるシンプルなゲーム」 にしたいな〜とおもい、子供でもできるシンプルなルールで、 大人も楽しめる難易度になるようがんばってます! システム構成 全体の構成はこんな感じ Flutter(アプリ) Nuxt.js(LPサイト) unjs/nitro(OGP生成など) Firebase(Auth/Firestore) Cloudflare R2(OGP保存) TypeSpec(Dart/TS間でのモデル共通化) Cloud Run + Firebase

                                              娘のためにFlutterでゲームを作ってみた with Nuxt.js
                                            • Nuxt Bridge を活用して Nuxt 3 へ移行しました - STORES Product Blog

                                              Nuxt Bridge を活用して Nuxt 3 へ移行しました 業務委託で STORES の開発をしている @inouetakuya です。 以前 STORES が Nuxt Bridge を活用して Nuxt 3 への移行を進めている旨の記事を wattanx が書いてくれました。 Nuxt 3 への移行に向けて頑張ってます - STORES Product Blog そして先月(2024年7月)ようやく Nuxt 3 へ移行することができましたので、本記事は前回の記事の続編にあたります。 Nuxt Bridge とは おさらいになりますが、Nuxt Bridge とは Nuxt 3 の機能の一部を Nuxt 2 でも利用できるようにしたライブラリです。これを活用すると Nuxt 2 のプロジェクトのまま Nuxt 3 の機能を利用するようコードを変更でき、Nuxt 3 へのバージョン

                                                Nuxt Bridge を活用して Nuxt 3 へ移行しました - STORES Product Blog
                                              • Nuxt3のモジュール開発は意外と簡単? | ドクセル

                                                Nuxt3のモジュール開発は意外と簡単? Module Author Guideをのぞいてみよう Vue Fes Japan2023 2023/10/28(土) きらぷか(@kira_puka) きらぷかとは? きらぷか (@kira_puka) ● 合同会社めもらば 代表 ● Webアプリの受託開発 ● 趣味: 積読と個人開発 積読ハウマッチ SSSAPI 総額がわかる書籍管理アプリ Googleスプレッドシートの JSON API化サービス

                                                  Nuxt3のモジュール開発は意外と簡単? | ドクセル
                                                • Nuxt DevTools 101

                                                  Slides for v-tokyo #20

                                                    Nuxt DevTools 101
                                                  • Nuxt3のLinterは Nuxt ESLint で整備する (マイグレーションあり)

                                                    はじめに こんにちは、がんがんです。 2024 年 4 月、Nuxt から Nuxt ESLint というモジュールが公開されました。Nuxt ユーザー待望の All-in-one ESLint モジュールです。 本モジュールの登場により Nuxt におけるリンターの設定方法が大きく変わりました。 本記事では Nuxt ESLint を用いたマイグレーションを中心に新しい Nuxt ESLint をセットアップしていきます。 Nuxt ESLint とは Nuxt ESLint はAll-in-one ESLint integration for Nuxtと公式ドキュメントに記載がある通り、Nuxt ユーザーのための All-in-one モジュールです。 今までの Nuxt ユーザーは Nuxt3 で ESLint を使う場合、どれが Nuxt 公式のルールだろう Nuxt で ESLi

                                                      Nuxt3のLinterは Nuxt ESLint で整備する (マイグレーションあり)
                                                    • Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト

                                                      【Oracle Cloud ウェビナー】基幹システムのクラウド化は可能か?失敗しないための検討ポイントと規模別事例をご紹介

                                                        Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
                                                      • Nuxt 3.12 · Nuxt Blog

                                                        🚀 Testing Nuxt 4 changesNuxt 4 is on the horizon, and it's now possible to test out the behaviour changes that will be coming in the next major release (#26925) by setting an option in your nuxt.config file: As we've been merging PRs for Nuxt 4, we've been enabling them behind this flag. As much as possible we're aiming for backwards compatibility - our test matrix is running the same fixtures in

                                                          Nuxt 3.12 · Nuxt Blog
                                                        • Nuxt 3 組み込みの新機能「Typed Pages」で型安全なルーティング

                                                          2022年末に正式リリースされた Nuxt 3 ですが、数多くの強力な機能を備えており、リリース後にもマイナーバージョンアップを続けているため、意外と知られていない機能が眠っていたりします。 今回はその中でも、かなり多くの方がその恩恵を受けられるはずなのに、少し知名度の低い印象のある、Typed Pages 機能について紹介したいと思います。 Typed Pages とは Typed Pages は、<NuxtLink> や useRoute() などの Vue Router を利用したルーティング管理において、指定したパスが実際に存在しているかどうかを厳格にチェックしてくれるようになる機能です。 Nuxt 3 で型安全なルーティングを実現する方法として、Nuxt Typed Router というモジュールもありますが、これとは別に、実は追加ライブラリを入れなくても Nuxt 自体がビルト

                                                            Nuxt 3 組み込みの新機能「Typed Pages」で型安全なルーティング
                                                          • Nuxt DevTools v1.0 · Nuxt Blog

                                                            Since this release, Nuxt DevTools is now enabled with Nuxt v3.8 and onwards by default. Generally available to all Nuxt projects! You can start playing with it by upgrading to the latest Nuxt, and press Shift + Option + D (macOS) or Shift + Alt + D (Windows) in your browser to open the DevTools. By default the floating panel is hidden to reduce the distraction. You can enable it inside Nuxt DevToo

                                                              Nuxt DevTools v1.0 · Nuxt Blog
                                                            • NuxtからSvelteKitへ移行しました - M&Aクラウド開発者ブログ

                                                              こんにちはkubotakです。 弊社M&Aクラウドでは先日、Nuxt(v2系)のアプリケーションをSvelteKitへ移行を完了しました。 ※一部ページは諸事情によりNuxtのままですが9割以上が移行済み。 本記事ではSveltekitへの移行した理由や移行方法について紹介したいと思います。 Vue2系がEOLを迎える Vue.jsは現在3系となり、Vueをベースとして作られているWebフレームワークであるNuxtも現在3系が最新となります。 また、Vue.jsの2系は2023年12月31日*1に、Nuxtについても2系は2024年6月30日*2にサポート対象外になることが発表されています。 それに伴い弊社でもNuxtの2系の対応について検討がされました。 NuxtからSveltekitへ まずはNuxt2から3への以降に際してどのようなマイグレーションが必要なのかを調査しました。 弊社の

                                                                NuxtからSvelteKitへ移行しました - M&Aクラウド開発者ブログ
                                                              • Nuxt 3.13 · Nuxt Blog

                                                                🏘️ Route GroupsWe now support naming directories with parentheses/brackets to organise your routes without affecting the path. For example:

                                                                  Nuxt 3.13 · Nuxt Blog
                                                                • Nuxt: Looking forward · Nuxt Blog

                                                                  A lot of things have happened for Nuxt over the last year. Sébastien and Daniel share their thoughts on what we've achieved, and where we're going next. A Review of 2023 - SébastienIn January 2023, Daniel set out Nuxt: A vision for 2023. We achieved most of the goals we set out to accomplish. Some of them are missing and we will tackle them this year! It was a productive year and the team shipped

                                                                    Nuxt: Looking forward · Nuxt Blog
                                                                  • Nuxt 3ではじめるテスト導入戦略と初手

                                                                    話者の所属する hacomono はここ数年でぐっとお客様も増え、それに比例して品質に対する期待値も高まっています。 一方で、製品にはテスト基盤が薄く、リグレッションやリファクタリングできないといった課題が強く意識されるようになりました。 本セッションでは、テスト導入に向けた戦略やそのために行ってきた準備と、その結果をお話できればと思います。 株式会社 hacomono プロダクト開発本部 POS グループ 野崎 才門

                                                                      Nuxt 3ではじめるテスト導入戦略と初手
                                                                    • Nuxt4への移行はそんなに大変じゃなさそう! (Opting in to Nuxt 4)

                                                                      こんにちは、keigoです。 先日リリースされたNuxt3.12では、Nuxt4 Opt-inの機能が提供されています。 今回は、Nuxt4 Opt-inに移行する際の手順や概要をご説明するとともに、Nuxt4 Migrationにかかるコスト感を掴んでいただければと思います。 Nuxt4変更点について Nuxt4の重大な変更として、デフォルトのディレクトリ構造変更があります。(後方互換性あり) これまでアプリケーションルートに存在していた components/, pages/, assets/, ...などといったディレクトリが、app/配下にまとめられるようになりました。 Nuxt3のディレクトリ構造 .output/ .nuxt/ assets/ components/ composables/ layouts/ middleware/ pages/ plugins/ utils/

                                                                        Nuxt4への移行はそんなに大変じゃなさそう! (Opting in to Nuxt 4)
                                                                      • 【Nuxt.js/Vue.js v2】$route.○○でURLのパスやパラメータを取得する

                                                                        <script>内ではthis.$route.〇〇 <template>内では以下の通り(this.不要) $route.path localhost:3000/search ↓ /search $route.name localhost:3000/search ↓ search $route.query localhost:3000/search?q=01 ↓ { "q": "01" } $route.query.○○ (例)$route.query.q localhost:3000/search?q=01 ↓ 01 $route.hash localhost:3000#content ↓ #content $route.params localhost:3000/user/1234 ↓ { "uid": "1234" } $route.params.○○ (例)$route.param

                                                                          【Nuxt.js/Vue.js v2】$route.○○でURLのパスやパラメータを取得する
                                                                        • Testing · Get Started with Nuxt

                                                                          Nuxt offers first-class support for end-to-end and unit testing of your Nuxt application via @nuxt/test-utils, a library of test utilities and configuration that currently powers the tests we use on Nuxt itself and tests throughout the module ecosystem. InstallationIn order to allow you to manage your other testing dependencies, @nuxt/test-utils ships with various optional peer dependencies. For e

                                                                            Testing · Get Started with Nuxt
                                                                          • SPA のアクセシビリティを強化する Nuxt の Route Announcer 機能

                                                                            SPA におけるアクセシビリティ課題について シングルページアプリケーション(SPA)は、1 つの HTML ファイルに対して JavaScript と Web API を活用して、ユーザーに素早いページ切り替えの体験を提供するウェブアプリケーションの一形態です。 しかし、SPA にはアクセシビリティの課題があります。例えば、視覚障害のあるユーザーが使うスクリーンリーダーという支援技術ではページが遷移したことを認識できないことがあります。これは、JavaScript を使ってページを切り替える際に発生する問題です。 具体的には、ユーザーがあるページから別のページへ移動した際、スクリーンリーダーが新しいページに移動したことを認識しないことがあります。 この問題を解決するために、JavaScript と WAI-ARIA という技術を使って、Route Announcer という方法があります

                                                                              SPA のアクセシビリティを強化する Nuxt の Route Announcer 機能
                                                                            • Nuxt でハイパフォーマンスを意識したアプリケーション開発 - Qiita

                                                                              はじめに フロントエンジニア3年目(総エンジニア歴6年)を迎えるにあたり、Nuxt / パフォーマンス / SEO など、Web アプリケーション開発について、たくさん学んできました。 今回は、Nuxt におけるパフォーマンスにフォーカスした話を記事にしたいと思います。 きっかけとしては、下記の記事を読んだ時でした。 医療のマスターDBを爆速で検索するWebサービスを爆速で作った こちら、本当に素晴らしい記事でした。。。 上記記事を読んだ時、「Nuxt でも同じように爆速で稼働するアプリケーション開発が可能では?」と思い、すぐに手をつけました。 注意点 本記事は公開されてから月日が経つにつれ、Nuxt での情報は古いものとなっていくので、本記事を確認する際は公開日をしっかり確認していただければと思います。(ただ、キーワードとしては、バージョン関係なくヒントにはなるので、そう言ったものはキャ

                                                                                Nuxt でハイパフォーマンスを意識したアプリケーション開発 - Qiita
                                                                              • Nuxt 3 に直接移行するか Nuxt Bridge を使うか

                                                                                結論 以下のような条件にあてはまる場合は、Nuxt Bridge を使う恩恵を得られると思っています。 コンポーネントやページ数が多く、比較的大きなアプリケーション Nuxt 3 へ移行するためのリソース(人員、工数)がない 上記に当てはまらない場合は、Nuxt 3 へ直接移行したほうが効率が良いかもしれません。 はじめに Nuxt 3 へ移行する方法として、大きくは下記の二通りだと思っています。 Nuxt Bridge を使って Nuxt 3 へ移行する Nuxt 3 へ直接移行する Nuxt Bridge を作っている身なのでもちろん Nuxt Bridge を使ってほしいですが、使わないほうが移行がスムーズだと思うケースもあるので、個人的にどう選んでいるかを書きます。 Nuxt Bridge を使った方がいいと思うケース コンポーネントやページ数が多く、比較的大きなアプリケーション

                                                                                  Nuxt 3 に直接移行するか Nuxt Bridge を使うか
                                                                                • Deep Dive to UnJS and Nuxt 3

                                                                                  Slides for Vue Fes Japan 2023

                                                                                    Deep Dive to UnJS and Nuxt 3