フロントエンドなエンジニアの皆さま、ご機嫌いかがでしょうか。 唐突な質問ですが、Internet Explorer 11というブラウザはお好きでしょうか。勿論大好きであられるかと存じ上げます。Webの歴史をまさにその身をもって築き上げてきた由緒正しきブラウザであります。唯一無二の王道です。昨今は様々なブラウザが溢れてあそばせております。しかし所詮それは一時的なこと。やがて全人類は母なるInternet Explorer 11の元へと還っていくことでしょう。 我々が目指したこと Internet Explorer 11（以下、IE11）を目にすること、操作すること、その他あらゆる接点を限りなく減らしつつ、プロダクトがIE11でも動作可能なことの検証と保証を行いたい。 これを成し遂げるエンジニアリング的な手段、つまりIE11環境でのE2Eテストを自動化することを目指します。 環境 自動化を行う
うちのチームにおけるTypeScriptの付き合い方
MVPは最低限の機能しか作らないので、ブラッシュアップするのが前提にある。 なので変更しやすい方がいい
概要 Nuxt.jsは今最も「イケてる」とされるWEB開発フレームワークです。ポストRailsという文脈で語られることも多いようです。巷でNuxtについての記事も増えていますね。 しかし、ネット上のNuxtの記事では、Nuxtを始める上で前提となる前提知識の存在が省略されているように思います。Nuxt.jsはVue.jsの発展形(=Nuxtを触る人はVueの経験があるという前提）なので当然なのですが。 本記事では、これからWEB開発者を目指す人を対象に、 ・Nuxtを習得するには何が必要か？ ・そのための勉強方法 を紹介します。 解像度を高めた言い方をすると、**「Nuxtの公式ドキュメントを理解できる」「自分で簡単なNuxtのエラーや問題を解決できる」程度の実力を身に付けることで、「メンバーとしてチーム開発に参加できる」**をゴール設定に置きます。 自己紹介 NuxtとFirebaseを
Nuxt自体の動きを外部から変えたいと思ったことはありませんか? もちろん、ベタに nuxt.conf.js を弄るのもよいのですが、共通分に関しては切り分けて個別の部品として管理したいですよね。そんなときに、 モジュール が役に立ちます。 Nuxt モジュールができること モジュール は nuxt.conf.js で記述するようなビルドの動きを拡張することができます。例えば、ミドルウェアを追加したり、事前に特定のファイルを作成したいときなどに便利です。 一方で、Nuxt は混乱しやすい用語として プラグイン という仕組みが存在します。 プラグインは、Vue インスタンスと、サーバコンテキストから特定のオブジェクトを利用できるようにするために利用されるものです。 Nuxt モジュールからは、Nuxt プラグインを追加することができるので、使い分けとしては以下のようになります。 種類 用途
Universal Application にありがちな LB ガチャ問題を解消する #awswakaran_tokyo / Resolve LB mistake in Universal Application
2019年07月22日に #awswakaran_tokyo でのセッションスライドです。
なぜ大喜利サービスを作ったのか - Crieit
お笑いは人並み程度の「好き」です。 劇場へ足を運んだことは無いし、常にチェックしているお笑いコンテンツがあるわけでもありません。 タイムラインで目に留まれば見ますし、笑います。 「ボケる」文化はどちらかと言えば苦手です。 「ここはボケるところやろ！なんで！？」 「スベってもえーからボケたろゆう姿勢は見せてーや！」 とか言う人、ちょっと苦手です。 マナーの強要というか。 「会話転がしてこ！？」とか知ったこっちゃねーです。 キャッチボールで勝手にカーブ投げてくるなって話です。 すみません、脱線しました。 こんな僕ですが、個人開発でこんなサービス作りました。 【#拡散希望】🙌🎉🎊サービス開始🎊🎉🙌ボケをツイートして「いいね❤️」「リツイート🔁」の数でランキング！Twitter連動型 大喜利サイト「ついぎり」サービス開始しました‼️#ついぎりhttps://t.co/bkXfzHyV
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回は複数のコンポーネントをURLによって切り替え表示できる「Vue Router」の利用法を説明しました。今回はVue.jsの状態管理ライブラリ「Pinia」について説明します。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型定義ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。 一般にWebページは、ユーザーの入力値やWeb APIから取得したデータなど、さまざまな状態を持ちます。これらの状態がさまざまなコンポーネントに散
SREチームの長田です。 Advent Calendar Migration Track 22日目の記事です。 今回は弊社で運用しているLobiというサービスの、Webブラウザ版(Web版)をECSに移行したはなしです。 web.lobi.co なぜ移行したのか おなじみ、Amazon Linux1 EoL対応です。 すべてのアプリケーションをEC2から移行するプロジェクトの一環です。 移行前 LobiのWeb版はNuxtJSを使って実装されています *1。 各APIにリクエストし、サーバーサイドレンダリング(SSR)した結果を、Webブラウザに返しています。 NuxtJSアプリは他のアプリケーションも同居するEC2インスタンスで実行していました。 移行前の構成 (実際にはクライアントで動的にコンテンツを更新するためのAPIリクエストも発生しますが、今回の話題には関わってこないので省略して
ajaxなど、ブラウザ経由でGET, POST, DELETEリクエストを投げると、実際のリクエストが走る前にOPTIONSリクエストが送信されることがあります。 一度しかリクエストを送信していなくても、実際はOPTIONSとGETなど、２回リクエストが走っています。 APIによっては、OPTIONSリクエストを受け付けないため、Response to preflight request doesn't pass access control checkのようなエラーが返ってくる場合があります。このOPTIONSリクエストはCORSプリフライト（preflight requests）と呼ばれていて、これが通らないと、実際のGET, POST, DELETEなどのリクエストは送信されません。 このプリフライト・リクエストとは何なのか、OPTIONSリクエストを回避する方法はあるのか調べてみま
この記事はVueを勉強している段階からTypeScriptでクラスベースのVueアプリを作りたい！という方へ向けて例を交えながらvue-property-decoratorの機能を基本と応用、上級の３セクションに分けて説明していきます。 基本では、Vueでアプリを作る上で必須となる機能を、応用では用意されている便利なデコレータを、上級では普通の開発ではほぼ使わない機能について説明します。 とりあえずは基本のみ理解しておけば困ることはないでしょう。 また、最後にnuxt-property-decorator独自のデコレータも紹介しています。 2019/12/09 追記：nuxt-property-decorator独自のデコレータの紹介を追加しました 動作確認バージョン vue-property-decorator v8.4.2 nuxt-property-decorator v2.5.1
図解 CSR, SSR, SG(SSG), ISR
何周も遅れてしまっているのですが、フロントエンド周りの勉強に取り組んでいます。色々と遠回りをしつつ、Next.jsに流れ着きました。SSRとかSSGとか分かりにくい言葉が多くて難しそうに感じたので、自分なりの理解を図にしてみました。 Server Side Application サーバーはリクエストを受けると動的にHTML文書を生成して返却する。 1993年にCGIが登場した時から基本的に同じ仕組みであり、今でも主要なアーキテクチャです。 Ajax クライアント（ブラウザ）側のJavaScriptでサーバーから追加データを取得し、DOM操作でページの内容を書き換える。 ページ遷移することなくコンテンツを書き換えることができる手法です。このアーキテクチャが登場してから、Webアプリケーションで実現できるUIや表現の幅が飛躍的に広がりました。 CSR (Client Side Renderi
SSRとCookie Forwardingの闇
本記事はPhotocreate Advent Calendar 2019 2日目の記事です。 フロントエンドなみなさんこんにちは。Andyです。 2019年3月より、業務委託という形式で株式会社Photocreateの運営するスクールフォト販売サイト「スナップスナップ」のリニューアルプロジェクトをお手伝いさせていただきました。 今回はその中でチームの仲間とチャレンジした課題についてご紹介したいと思います。 はじめに 昨今のフロントエンド界隈はエッジノードでのpre-renderingエコシステムが非常に充実してきました。ひと昔前のように「検索エンジン最適化(SEO)のためにはSSRがマスト！！」といった要件がSingle Page Application開発に求められることも減ってきた気がします。 とはいえ依然としてSSR機構を求められる案件も少なくなく、無垢な初心者が誤って迷い込もうもの
nuxt generateの機能は、静的サイト生成とか、単に静的生成といわれることが多いですが、文中で多用するのがツラいので、より短く「SSG(Static Site Generation)」で統一しています。 Nuxt.jsにおけるビルドの選択肢 Nuxt.jsでは、SPA・SSR・SSGの中から、好きなものを選んで開発できます。 初期設定ではSSRで動作するようになっていますが、流れとして自然なのでSPAから順に利点と欠点をまとめました。それぞれのビルドを行うため設定は、ドキュメントにわかりやすく書いてあるので、そちらでご確認ください。 サーバーサイドレンダリング - Nuxt.js SPA（Single Page Application） 利点 実装しやすい サーバーの準備が楽 欠点 初期表示が遅い SEOに不安がある OGをページごとに設定できない SPAは、最もシンプルに実装でき
はじめに 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
Optimized Images for your Nuxt Apps Plug-and-play image optimization for Nuxt apps. Resize and transform your images using built-in optimizer or your favorite images CDN.
【Rails+Nuxt】RailsのActive Storage ダイレクトアップロード機能を Nuxt から使う
今までRailsでファイルをアップロードする場合、加工処理を行いたいためにRails側でファイルを受け取るような実装が主流でした。 ファイルアップロード → Rails → ファイルの加工 → S3へアップロード しかし、現在は画像変換サービスを利用したり、自前でリサイズ サーバを運用したり、S3にアップロードされたらAWS Lambda側で加工処理を実行できたりと選択技が増えています。 そうすることで、Railsを通すことなくS3へアップロードできるので、今まで悩まされていたRailsサーバの画像加工処理の負荷とおさらばできます✨ また、Herokuを使用している場合、Herokuのリクエストタイムアウトは30秒なので大きいファイルをアップロードする際にタイムアウトしてしまうのを防ぐことができます。 今回弊社のリードエンジニアが、RailsのActive Storage を使用しPDFの
Vue.js v3.xのRFC（Request for Comments） となっているComposition API を色々触ってみたのでまとめます。 Vue Composition API とは？ Introducing the Composition API: a set of additive, function-based APIs that allow flexible composition of component logic とある通り、コンポーネントのロジックの柔軟なコンポジションを可能にする関数ベースのAPIです。 型推論の改善と、合成関数によるロジックの整理が可能になっています。 @vue/composition-apiを追加することで、Vue2系でも使用することができます。 環境構築 vue-cli でプロジェクトを作成します。 ポイントはManually sel
Nuxt.jsのSSR/CSR処理について
はじめに Nuxt.js の SSR/CSR の処理がどう動いているか（ライフサイクル）、また、安全な処理を書くにはどうしたらいいのか、いまいち分かっていない方や曖昧な方も多いと思います。 今回の記事では、Nuxt.js での開発における SSR/CSR 処理とセキュアなデータの取り扱いについて少し書きます。 ライフサイクルを理解し、Nuxt.js でどのように情報を扱うべきか検討しやすくなります。 AWS や GCP、Firebase、Azure など、クラウドサービスと連携するにあたりセキュアな情報の取り扱いで悩むことが出てくると思います。 AWS でいうと AppSync や API Gateway、S3 などの各種サービスに接続するための認証情報をどのようにフロントエンドで安全に扱うか、という点は気になるポイントだと思います。 この記事は直接ある特定のサービスへの接続方法のソリュー
axios-mock-serverとは フロントエンドの開発体験を向上させ、生産性を格段に高めるために作られたTypeScript製のモックサーバーです。 axios専用ではあるものの、JSON Serverよりも遥かに手軽にRESTfulなモック環境を構築出来ます。 GET/POST/PUT/DELETEのAPIエンドポイントを数行で作成できる サーバーを立てないので静的なJSファイルに出力してブラウザ単体でも動かせる TypeScript対応 Node環境のaxiosでも動く Nuxt.js同様のオートルーティング機能でパス記述が不要 IE11対応(>= v0.13.1) axios-mock-server - GitHub この記事はやたら長いので以下の入門記事から読むのをおススメします。 秒でaxiosをモックするnpmモジュールの入門サンプル Nuxt.jsのaxiosを秒でモッ
今年6月に、実践TypeScript という書籍で、Nuxt.js に TypeScript を導入する方法を執筆させて頂きました。「書籍で扱っている Nuxt.js のバージョンが少し古いけど、今現在はどうするのが良いの？」という読者の方から寄せられた疑問に、アップデートとして私的見解をここにまとめました。（といっても、すでに日本語の良記事で紹介されている内容と変わりなく、n番煎じですmm） typescript.nuxtjs.org 少し日が経ちましたが、Nuxt.js の 公式TypeScript導入ガイド が公開されています。このガイドは、最新の Nuxt 2.10 以降向けとして書かれています。更新が目的であれば、Migration from Nuxt 2.8 を必ず確認するようにしましょう。 custom server framework で異なる型定義 基本的に 公式Type
WordPressサイトをWP REST API + Nuxt.jsでリニューアルした際のポイントまとめ | ブログ | Glatch（グラッチ） - 夫婦で活動するフリーランスWeb制作ユニット
先日Glatchのポートフォリオサイトをリニューアルしました。 前回の記事では妻がポートフォリオの設計・デザインプロセスに関して投稿してくれました。 今回は実装編です。 普段は技術系の記事はテックブログに書いているのですが、ポートフォリオの宣伝も兼ねているので今回はこちらに投稿します。良かったらテックブログも見ていただけると嬉しいです。 さて技術面に関してはせっかくリニューアルするのでこの機会に新しい技術を試したい、でもWordPressで管理してきた資産はできればそのまま活かしたい、という2つの要望が自分の中にありました。 この2つを両立させるためにコンテンツ管理には引き続きWordPressを使用し、フロント部分にモダンなフレームワークを採用することで要望を満たしました。 検討の結果WP REST API + Nuxt.jsというJAMstackな構成で構築することにしました。 本記事
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
microCMS+Nuxt+Netlifyでサイトを作りました。 new shitです。みてくれたらうれしいです。。https://t.co/8pouvxCCq8 — ゆ (@uchoco898) October 8, 2019 twitterはじめたてでエンジニアさんをフォローしまくりたいのでよかったらフォローして欲しいです。 使用技術 ・Nuxt.js ・microCMS ・Netlify のJAMstack構成です。 この記事の目的 僕はWordPressが嫌いです。ついでに言うとJQueryも使いたくないです。でも実務ではまだまだ使われているのが現状なのではないでしょうか？僕は使ってますよ（T T） microCMSを触ってみて、クライアントワークでもreactとかvue+ヘッドレスCMSがWordPressに取って代われる可能性を大いに感じたので、それを少しでも応援したいと思い書
morishitaです。 このところNuxtのSPAを作っていました。 次のエントリで紹介したものに手を入れていたのですが、このときにはテストを書いていませんでした。 tech.actindi.net 今回はちゃんとテストも書こうと思ってやってみました。 いくつかすんなり行かず試行錯誤した部分があるのでそれを書こうと思います。 Nuxt SPAのテスト SSRを含まないNuxt SPAアプリケーションの構成要素は大雑把に次を含んでいます。 コンポーネント ページコンポーネントから使われる構成要素を実装したVueのSFC1 ページコンポーネント ルーティングとひも付きページを構成するSFC Vuexストア クライアントサイドでデータを格納しデータフローを制御するモジュール PluginやMiddleware Nuxtからフックされるモジュール その他ユーティリティ的なモジュール 他のコンポー
エンジニア転職のリアル
Vue.jsはオワコンになり、Vue3は衰退する。Nuxt2からNuxt3へのアップデートは破壊的変更が多すぎて移行できないからだ 2022 年 11 月 16 日、Nuxt3が正式リリースされました。 Nuxt2 を使っていた多くの企業が移行に四苦八苦しているのが現状です。 その背景として、Nuxt2→Nuxt3 へのアップデート + Vue2 → Vue3 のアップデート、周辺ライブラリのアップデートを全部同時にやらなければいけない点があります。当然、地獄です。 以前の Nuxt2 は Vue3 に対応していなかったため、Nuxt2 を使っているプロジェクトでは Vue2 を使うしかありませんでした。 そのため、Nuxt Composition APIというライブラリを使って、Vue3 の Composition API 的な書き方を Nuxt2 で使えるようにするのが、Vue2 +
本文書ではNuxt.jsのモジュールnuxtjs/authを使い、Tokenを利用したJWT(JSON WEB TOKEN)のAuth(認証)の設定を行っています。Nuxt.jsでJWTの認証を行うためにはバックエンドが必要になります。バックエンドにはNodeのExpress.jsを使って構築します。本文書を読むことでNuxt.js環境下でTokenを利用したユーザ認証の設定手順の流れを理解することができます。 Tokenを使った認証の設定が行えることを本書の目的としているため入力フォームのデザイン、バリデーションやセキュリティについての説明は行っていません。特にセキュリティについてはJWTの設定方法がわかった後にしっかりと勉強してください。 Express.jsを使ったバックエンドの設定については一緒に記述すると文書が長くなるためまたフロントエンドにNuxt.jsを利用した場合のみ利用で
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 は、とてもシンプルに（意識することなく）活用する
vue.jsではSlotを利用することで親コンポーネントから子コンポーネントにコンテンツを渡して表示させることができます。例えばボタンというコンポーネントを作成し、ボタン上に表示されるテキストのみ変更したい場合、親コンポーネントからSlotを使ってテキストを渡すことで子コンポーネントのボタン上に表示させるテキストを変更することができます。ボタン上のテキストを変更できることでボタンコンポーネントを再利用することが可能となります。 本文書ではSlotのみに特化して説明を行っているので本文書を読み終えるとSlot、Named Slot、データプロパティを使ったScoped Slot, メソッドを使ったScoped Slotの4つを理解することができます。 前半はSlot, Named Slotを使って親コンポーネントから子コンポーネントにコンテンツを渡す方法を確認し、後半ではScoped Slo
📝 Nuxt 3 公式ドキュメント 日本語訳
💎 ハイブリッド Vue フレームワーク Vue 3 で次のアプリケーションを構築し、ハイブリッドレンダリング、パワフルなデータフェッチなどの新機能を体験してください。Nuxt 3 は、Web 開発をシンプルかつパワフルにするオープンソースのフレームワークです。 GitHub で ❤️ する 新機能を搭載 Nuxt 3 は、より小さなコアで再設計され、より速いパフォーマンスとより優れた開発者経験のために最適化されています。 🪶 より軽く 最新のブラウザで最大 75 倍、サーバーデプロイとクライアントバンドルサイズを小さくしました。 🐇 より速く nitro（ナイトロと呼ぶらしい）による動的なサーバーのコード分割でコールドスタート（ハードウェアが初期化された状態から再起動すること）を最適化しました。 ❎ ハイブリッド soon ISG（Incremental Static Genera
TypeScript開発において、関数の返り値などに型がついていると、開発体験が向上するかと思います。しかしfetch関数を用いて外部API等を叩いた際、fetch関数の返り値には型が適用されません。API fetchの返り値に型を適用させるために、OpenAPI形式のAPI定義ファイルを元に、型定義ファイルを生成するような取り組みもあります。 今回は、Nuxt Serverで作成したAPIを$fetch関数で叩いた際、自動で型情報が適用されることで開発体験が向上するという話をします
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
初めに この記事はyamanokuさんの投稿されたzennのscrapの内容について自分がまとめたものです。（yamanokuさんの許可はいただいています、ありがとうございます！） compassで1月13日に開催されるFEStudyでyamanokuさんが登壇されるのでもしよければ参加してみてください。 Zennに分割したのを投稿していますが、個人的にまとめてどこかにおいておきたかったためにこのような形で投稿しています。 間違った情報がないように注意はしていますが、もし間違っている箇所、不十分な箇所がありましたらコメントなどでいただけると幸いです。 それぞれの用語などの情報についてリンクを貼っているのでそこまで読めば深くまで理解できると思います。 かなり長いですが、頑張って書いたのでぜひ読んでください。 HTML HTML Standardを参照できる 入れ子関係 どういった用途で使われ
Nuxt.js、Google Apps Script、スプレッドシート（DB）を組み合わせて検索アプリケーションを作ってみた - Qiita
Nuxt.js、Google Apps Script、スプレッドシート（DB）を組み合わせて検索アプリケーションを作ってみたJavaScriptGoogleAppsScriptVue.jsclaspNuxt Google Apps Script（GAS）で Nuxt 動かしてみたら面白いのでは？ と思い試していたら動いたので、スプレッドシートをDBにして検索アプリケーションを作ってみました！ Nuxt.js の SPAモードを GAS を使って実際に GAS で Nuxt を動かしているURL https://script.google.com/macros/s/AKfycbw9rOqkFPqP4Ym3n7goiL0tI4V3cx0UTOjVM8DTHT8FRG3ogjJs/exec そして Google サイトで上記 URL を埋め込んで完成です。（GAS の 分かりづらい URL を隠
Next.js Learn (Basic) を試して学んだ Next.js の基礎の基礎 - kakakakakku blog
React を使ってプロトタイプを実装したりすることはあるけど，今まで Next.js を試したことがなかった．そろそろ入門しなければ！という危機感もあり，Next.js Learn (Basic) を一通り試してみた．入門する前と比較すると「Next.js でできること（基礎の基礎）」を把握することができ，非常に良質なコンテンツに仕上がっていた．今回は Next.js Learn (Basic) から学んだことを整理する．Next.js に入門するならまず試してみると良いと思う． nextjs.org なお，今回は Next.js 9.2.1 を使えるようにローカル環境を構築した． $ npm view next version 9.2.1 Next.js Learn (Basic) Basic では「計9種類」のコンテンツが用意されている．Next.js を使ったサイト内遷移（ルーティ
Nuxt3入門(第1回) - Nuxtがサポートするレンダリングモードを理解する | 豆蔵デベロッパーサイト
Vue.jsのハイブリッドフレームワークとして人気のNuxtですが、メジャーアップデートとなるNuxt3がそろそろGAになりそうです。 Vue3やNitro、Vite等、多くの変更があるNuxt3ですが2022年春にRC版が公開された後、ハイペースで更新が続きかなり安定してきた印象です。 ここでは、Nuxt3入門と題してNuxt3が提供する基本機能について連載を書いていきたいと思います。 まず、初回はNuxtが提供するレンダリングモードを整理します。 なお、基本的なプロジェクト作成の方法は公式ドキュメントに記載されているとおりですので触れません。 今回は、新しいVueコンポーネントを作成せずに初期状態のNuxtのWelcomeページで見ていきます。
export default eventHandler(async (event) => { const database = hubDatabase() const blob = hubBlob() const kv = hubKV() // Do your magic here return { hello: 'world' } }) All you need to start shippingNuxtHub provides you with all the tools you need to build and deploy your Nuxt apps, on the edge with zero configuration.
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 を使用してプロジェクトを作成します。
株式会社スタメンでフロントエンドエンジニアをしている神尾です。普段は、エンゲージメントプラットフォーム「TUNAG」の開発をしています。 TUNAGでは、2023年1月からWebフロントエンドのリプレイスプロジェクトが始まり、今もプロジェクトが進行中です。現在のWebフロントエンドでは技術選定の選択肢が多く、選定にあたっての検討事項がとても多いと思います。 この記事では、リプレイスの際に採用した技術の選定理由や設計についてまとめたので、この記事を通して、読んでくださった方のお役に立てれば嬉しいです。 また、リプレイスの背景やインフラについては別記事になっているので、そちらもご覧ください。 tech.stmn.co.jp 技術構成 / 選定理由 React / Next.js / TypeScript React Next.js TypeScript SWR aspida msw story
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
Vuexの根幹 【ストア】 【役割】 Vuexを使う上でアプリケーションの状態（情報）を保持する役割です。 Vuexのコンセプトである『Vuexは信頼できる唯一の情報源である事』が前提にあるため、ストアはアプリケーションの中でただ一つだけの根幹となる存在です。 今回はその大事な役割であるストアの４つの概念をまとめます。 ４つの概念 ・state→アプリケーションの状態（情報） ・getter→stateの一部やstateから返された値を保持する ・mutation→stateを更新（変化）させる ・action→非同期通信や外部APIとのやりとりを行う この４つを一纏めにしたものをモジュールと言います。 モジュールでこの４つを守っているイメージです。 ストアの作成 Vue-cliでVuexを取り込んでおけば、srcフォルダにstore.jsが入っています。 Vuexも読み込まれていますので
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt利用プロダクトでIE11と仲良くするためのE2E - メドピア開発者ブログ
Nuxt.jsに飛びつく前に~Nuxt.jsを習得するための前提技術と、その勉強方法の紹介~ - Qiita
Nuxt モジュールパーフェクトガイド 🍜 Nuxt.js 2.15 🍜 TypeScriptでの開発対応
TypeScriptとも相性抜群なライブラリ──Vue.jsで状態管理を行う新定番「Pinia」を解説！
NuxtJS製のWebサービスをECSに移行したはなし - KAYAC engineers' blog
CORS: OPTIONSリクエスト（preflight request）を避ける - Qiita
はじめてのvue-property-decorator (nuxtにも対応） - Qiita
Nuxt.jsを使うときに、SPA・SSR・SSGのどれがいいか迷ったら - Qiita
Nuxt3で個人的にuseFetchよりuseAsyncDataを推したい理由
Nuxt Image: Optimized Images for your Nuxt Apps
先取りVue 3.x !! Composition API を試してみる - Qiita
RESTfulな「axios-mock-server」の使い方 - Qiita
Nuxt.js TypeScript - 実践TypeScript アップデート - - Qiita
最近話題のヘッドレスCMS「microCMS」+Nuxtでサイトを作った話 - Qiita
NuxtアプリケーションをJestでテストする - アクトインディ開発者ブログ
Nuxt.jsのAuth認証の設定(バックエンド設定含む) | アールエフェクト
Nuxt 3 の useFetch() と useAsyncData() の使い方
vue.jsのSlotからScoped Slotまでを理解しよう | アールエフェクト
Nuxt Serverと$fetchを 組み合わせたTypeScript開発体験
Nuxt 3.5 · Nuxt Blog
フロントエンドに関わる人のスキルとして触れておきたい・知っておきたいこと - Qiita
NuxtHub: Build full-stack Nuxt apps, on the edge.
TUNAGの新フロントエンドを支える技術と設計 - stmn tech blog
Nuxt3でvue3-notificationをつかって通知する - くらげになりたい。
【Vuex】ストアの4つの概念まとめ【唯一の情報源】 - Qiita