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
🚀 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
スプシの翻訳情報を用いた型付けと段階的i18n対応のためのカスタムESLint ### 内容 ・@nuxt/i18nのt関数にパッチを当ててスプシから生成された翻訳情報で型を付ける ・段階的なi18n対応のために特定ファイルから参照されるコードのみに翻訳漏れを検証するカスタムESLint
こんにちは。Vue.js 日本ユーザーグループの jay-es です。 2024 年 5 月 28 日（火）に Vue.js v-tokyo Meetup #20 を開催しました。 今回は「Developer Experience 開発者体験特集!」というテーマで、Vue.js エコシステムの DX 関連の内容をキャッチアップできるイベントとなりました。 当日参加いただいた皆様、誠にありがとうございました。 また、会場スポンサーをしていただいた株式会社プレイド様、ツールスポンサーの esa 様にも心よりお礼申し上げます。 会場の様子GINZA SIX の株式会社プレイドの社内にある広々とした人工芝のスペースが今回の会場です。 後方には大きな冷蔵庫があり、好きなドリンクをいただくことができました。太っ腹！ オープニングまずは Vue.js 日本ユーザーグループ代表の kazupon 氏による
Speaker : Yuito Kawashima ( https://github.com/yuitokawashima ) at 「Vue.js v-tokyo Meetup #20」 https://vuejs-meetup.connpass.com/event/318066/
なぜ分割代入をすると Vue は reactive ではなくなるのか - Stockmark Tech Blog
こんにちは。 Anews の開発に携わっている Engineer の 羽柴 と申します。 Anews はフロントエンドを Vue で開発しています。 自分自身の背景として、Stockmarkに入社するまでは React を使って開発していたので Vue の経験は殆どない状態でした。 そこで理解を深めるために chibivue を使った勉強会を社内で進めています。 その時に気づいたことを share したいなと思い、この記事を書きました。 ja.vuejs.org chibivueとは Vue を書き始めた感想 chibivue の勉強会を進めて Proxyについて でもなんで まとめ 余談 最後に chibivueとは ubugeeei.github.io Vue を最少単位で作ってみようという project です。 浅い理解でよければ公式 docs をさらっと読んで実装するのが早いので
2024 年 5 月 28 日に東銀座の PLAID さんで開催された v-tokyo 20 に参加してきた。 v-tokyo は Vue.js 日本ユーザーグループが不定期（3 ヶ月に 1 回？）に開催している Vue の Meetup イベントだ。 頭がフレッシュなうちに参加レポートを残す。 headless な UI ライブラリを選択するアンカーリンク会場スポンサーの PLAID さんのセッション。 Headless UI ライブラリの説明からはじまって、Vue 向けの Headless UI ライブラリの Radix Vue を使って社内で Vue 版のデザインシステムを作成しているという話だった。 PLAID さんの社内には Sour というデザインシステムがあって、それの Vue 版を Radix Vue で実装しているらしい。 Sour のことは検索してもあまりアウトプットさ
Slides for v-tokyo #20
ちょっとしたリアクティブユーティリティのご紹介 baseballyama
TypeScript開発において、関数の返り値などに型がついていると、開発体験が向上するかと思います。しかしfetch関数を用いて外部API等を叩いた際、fetch関数の返り値には型が適用されません。API fetchの返り値に型を適用させるために、OpenAPI形式のAPI定義ファイルを元に、型定義ファイルを生成するような取り組みもあります。 今回は、Nuxt Serverで作成したAPIを$fetch関数で叩いた際、自動で型情報が適用されることで開発体験が向上するという話をします
JavaScriptのProxy(Reflect) JavaScriptのProxy(Reflect)と 昨日より仲良くなる20分 2024.05.24 JavaScript祭り hiroko_ino ※掲載させていただいているOSSのコードは 発表現在のものです 自己紹介 猪野 浩子 / hiroko_ino 所属：RUN．EDGE株式会社 Web Front-end Engineer, Designe Vue.jsやFlutterでの開発や、UIデザインを時にはやっ たりしま 神奈川在 趣味はゲームのRTA
Reactでのダイアログの開閉制御については以前、別のエントリーで書きました。 ダイアログもアラートも、Reactで子コンポーネントの開閉管理を実装するVue3でも、何か簡単に書ける方法はないかと試行錯誤して、ちょっといい感じかな？という方針を見つけたので、備忘がてら技術ブログに書いておきます。 使いやすいダイアログAPIとは太古の昔より、便利なダイアログ機能というのは、呼び出し元はダイアログの開閉状態とか細かい制御は気にせず、必要な情報を渡して、結果だけもらうというものです。JavaScriptのブラウザのAPIにもありますよね。 const result = confirm("今日はいい天気でしたね") // OKのときはtrue console.log(result) これはVisual Basicとかでもなんでも同じですね。ただし、JavaScriptだとconfirm()、ale
2024年5月11日（土）に開催された TSKaigi 2024 のセッションで発表したスライドになります。 Vue3がリリースされ、早くも4年弱経とうとしています、Vue2のLTSも2023年末に終了し、新規開発ではVue3を利用することが主流となってきました。 Vueと並ぶフレームワークとしてReactがありますが、未だにReactと比較される際、TypeScript対応が…という噂がたまに聞こえてきます。しかして、Vue3とTypeScriptの親和性は実際のところどうなのでしょうか。Piniaやその他ツールチェイン側などと共にVue3の機能や実際の実装例とともにVue3とTypeScriptの親和性の疑問を解消できるような発表にできればと思っています。 https://tskaigi.org/talks/karan_corons
e-on's VUE PlantFactory PlantCatalog Now Free - e-on Softwareが長い歴史を持つ景観作成ソフトやノードベースの植物作成ソフトとアセットコレクションの開発＆販売を終了し完全無料ソフトとして公開！
3Dモデリング ソフト ソフトウェア＆ツール-Software&Tool Uniform 1.0 - iPad用の本格3DCG制作アプリがリリース！ローポ... 2024-05-16 SparsealによるiPad向け3DCG制作アプリ『Uniform』がリリースされました！！！！ 続きを読む ソフトウェア＆ツール-Software&Tool 生成 ツール InvokeAI 4.2 - ローカル環境で動作する多機能で無料＆オープンソース... 2024-05-16 最新AI技術による画像生成をシンプルかつ多機能なインターフェイスで扱うことの出来るInvokeAIのv4.2がリリースされました！ 続きを読む Blender アドオン プラグイン＆アドオン-Plugin&Addon Deep Paint v1.0 - GAKU氏によるGrease Pencilを... 2024-05-15 ハ
Vue/Vite 関連のライブラリー名の読み方は間違えられやすいものが多く、混乱を招くことがあります。この記事では、2024 年現在における Vue/Vite 関連ライブラリーの正式な読み方や由来をまとめ、正しい知識を共有することを目的としています。 Vue フロントエンド UI フレームワークのひとつ。 「ヴュー」と読む（口語だと「ビュー」と発音することが多い）。 Vue（発音は /vjuː/、view と同様） https://ja.vuejs.org/guide/introduction.html#what-is-vue Pinia Vue 公式の状態管理ライブラリー。 「ピーニャ」と読む。スペイン語で「パイナップル」を表す単語 piña に由来。 「ピニア」ではない。 Pinia (pronounced /piːnjʌ/, like "peenya" in English) htt
静的サイトジェネレーター「VitePress 1.0」正式リリース。VueとViteを採用し、高速なWebサイトを構築
静的サイトジェネレーター「VitePress 1.0」が正式リリースされた。UIフレームワークのVueと高速なバンドラであるViteを基盤に、MarkdownのコンテンツからSPAなWebサイトを構築できる。 オープンソースとして開発されている静的サイトジェネレーターの「VitePress 1.0」正式版がリリースされました。 VitePressは、Markdownで記述されたコンテンツを静的で美しい外見を持つWebサイトへと高速に変換する機能を備えたフレームワークです。 デフォルトでテクニカルドキュメントに適したテーマが用意されており、すでにVite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、IconifyなどのWebサイトのドキュメント部分に使われているとのことです。 VitePressは、同じく静的サイトジェネレーターである「VuePress」のモダン
This is possibly the last minor release before Nuxt v4, and so we've packed it full of features and improvements we hope will delight you! ✨ 🪵 Better loggingWhen developing a Nuxt application and using console.log in your application, you may have noticed that these logs are not displayed in your browser console when refreshing the page (during server-side rendering). This can be frustrating, as
Emit が分からない！ Vue.js で ref や computed でのステート管理を学び、コンポーネント間でのやり取りで props を学び、次に emit を学ぼうとするとなんだか難しく感じることがあります。 確かに初学者の方からすると、慣れるまで少し時間がかかるかもしれません。 でも大丈夫です。 この記事では図でのイメージとあなたが既に知っているはずの知識を使って emit を理解するためのヒントを提供します。 基本のキ とりあえず emit の基本をおさらいします。 <!-- ChildComponent.vue --> <script setup lang="ts"> const emit = defineEmits<{ "my-event": [] }>(); function handleClick() { emit("my-event"); } </script> <
🏆 結論 「とりあえず ref を使えばいい！」 おしまいです。ref でできないことはありません。 注意点として補足しておくと、これは「Vue.js が ref を推奨している」「迷ってるならとりあえず ref を使っておけばいい」という話であって、reactive をはじめとする他の Reactivity API が非推奨だという話ではありません。 reactive がケースによって便利であることは Evan 氏なども認めており、そもそも Vue.js には厳密なルールがあるわけではないので、結局は自分の手に馴染むものを選択していくのが良いと思います。 なので、究極的な結論としては「とりあえず ref ファーストで考えておいて、なんらかしらの理由で reactive を使いたいなら別にそれも良い」という話になりますが、特別な理由がない場合は ref の方が推奨されます。 🚩 はじめ
AWS IAM の結果整合性を避けるためセッションポリシーを用いてポリシーの動作確認を行う、を解説する
Vue 3.4
Data Contracts In Practice With Debezium and Apache Flink (Kafka Summit London)
はじめに vue公式の拡張機能のバージョンアップにより、VSCodeで開発するときに推奨される拡張機能や設定に変更がありました。 非推奨の設定のままの人は、多分以下のような通知が出てると思うので、直しましょう。 今までの推奨設定 Vue - Officialをインストールする TypeScript Vue Plugin (Volar)をインストールする テイクオーバーモードを有効にする 今後の推奨設定 Vue - Officialをインストールする 新しく設定する人がやること Vue - Officialのインストール Vue - Officialをインストールする 今までの推奨設定をしていた人がやること TypeScript Vue Plugin (Volar)のアンインストール TypeScript Vue Plugin (Volar)が非推奨になったので無効に、もしくはアンインストー
![[2024年3月2日] Vue3+TypeScriptの環境構築で推奨される拡張機能と設定が変わったよ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/f28ba34c6e547e0c824adf322d8478550799e91c/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--AjgvUUB7--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255B2024%2525E5%2525B9%2525B43%2525E6%25259C%2525882%2525E6%252597%2525A5%25255D%252520Vue3%25252BTypeScript%2525E3%252581%2525AE%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E6%2525A7%25258B%2525E7%2525AF%252589%2525E3%252581%2525A7%2525E6%25258E%2525A8%2525E5%2525A5%2525A8%2525E3%252581%252595%2525E3%252582%25258C%2525E3%252582%25258B%2525E6%25258B%2525A1%2525E5%2525BC%2525B5%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252581%2525A8%2525E8%2525A8%2525AD%2525E5%2525AE%25259A%2525E3%252581%25258C%2525E5%2525A4%252589%2525E3%252582%25258F%2525E3%252581%2525A3%2525E3%252581%25259F%2525E3%252582%252588%2525E3%252580%252582%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Asimo%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2YyYTk1ZTA4YmUuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
はじめに こんにちは、がんがんです。 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 不要
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.
新しい UI テストの手法を提供するテストライブラリ SafeTest 2024.02.25 SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。SafeTest は単体テストと Playwright を使った E2E テストの手法を組み合わせることで、それぞれの手法が抱える欠点を補うことを目指しています。 SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。 従来のフロントエンドのテストの手法は Testing Libra
💡 ヒント: コミュニティとはグラデーションである 🚩 序 こんにちは。Vue Beginners (の管理人) です。 すでに多くの方に記事を見ていただけていてとても嬉しく思います。感謝しています。 今回はソースコードは 1 行も出てきません。 ひょっとすると、Vue.js の勉強法や使い方などを求めている方にとっては多少つまらない内容かもしれません。 ですが少し早まらず、是非とも一緒に考えてほしいです。🙏 今日の話は、これからあなたが Vue.js について学び、使っていく際にとても重要な話だと筆者は信じています。 🤔 あなたがコミュニティの一員であるかどうか 回答: それはわかりません。 ・ ・ ・ 「自称だからでしょ？」と思う方もいるかもしれませんが、そういう話ではありません。 あなたがいくら自称したところでこの答えは決まりません。 というのも、いくらあなたが「私はコミュニ
フロントエンドを Vue.js から React にリプレイスしたお話 (前編) - NTT Communications Engineers' Blog
【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】
【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】 🤔 Vue.js って何から勉強すれば良いですか？ この疑問は Vue.js に限らず、多くの初学者の中でホットなトピックです。 すごく端的にこの問いに答えてみると、「好きにすればいい、正解はない！自分で考えなさい！」です。 これは確かにとても正しい意見[1]だと思いますが、そうは言っても初学者にとっては何から手をつけたらいいのかわからない状況が多いです。 と言うことで、上記のような前提は持ちつつ「まぁ、とりあえずこんな感じで良いんじゃないですかね(安牌)」と言う私(筆者)なりのアイデアを書いてみたいと思います。 ご参考までに 😙 それではスタート 💨 Vue.js の公式ドキュメント 「おいおい、急にハードルが高すぎるだろ...」 そう思った方も少なくないかもしれません。
【脱仮想 DOM !?】Vue.js が控えている進化 "Vapor Mode" の詳細 (2023/12)
※本記事は Qiita / All I know about Vue 3's Vapor Mode Details (2023/12) のミラーです ⚡️ Vapor Mode ってご存知でしょうか? 🤔 少しでも聞いたことがあるようであれば、おそらくあなたは日常的に情報を収集している熱心な方でしょう。 というのも、現在(2023/12)、Vapor Mode について日本語での言及はほぼありません。 かといって英語圏に情報が出回っているかというと、そうでもありません。(後述) 今回は現時点で筆者が知っている Vapor Mode の詳細について、前提知識も整理しつつ理解していければと思います。 😋 初めに 🎯 お品書き (何を理解するか) 改めて Vue.js とは これから Vue.js を学び始める方や、Vue.js をのぞいてみるのは随分と久しぶりだという方もいるかと思うので
ANDPADフロントエンドエンジニアの小泉です。 昨年の夏頃、担当したプロダクトで新規リポジトリでの開発を立ち上げる機会があり、Nuxt 3 を用いて構築を行いました。 アップデートではなく新規で Nuxt 3 サイトを構築するのは業務としては初めての経験だったのですが、Vue 3・Nuxt 3 の様々な機能によって、型安全な状態を保ったまま快適な開発を進められ、かつ3ページの全体実装を約7営業日で形にすることができました。 この記事では、「いま新規サービスのゼロからの立ち上げにNuxt 3を選択するとどんな嬉しいポイントがあるのか」という実例をご紹介できればと思います。 担当したプロダクトについて ANDPAD資料承認 | 製品のご紹介 2023年10月にリリースされた「ANDPAD資料承認」という、資料の申請・承認を一元管理する機能のフロントエンド開発を担当しました。 ただし、紹介サイ
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】 - Qiita
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】TypeScriptフロントエンド個人開発Next.jsprisma はじめに 皆さんこんにちは、mamiなのだ！ 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ！ フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ！ ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまっ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt 2 End-of-Life (EOL) · Nuxt Blog
Nuxt 3.12 · Nuxt Blog
TypeScriptを活用したi18n対応
Vue.js v-tokyo Meetup #20 を開催しました｜jay-es
Vuex から Pinia への移行を行いました - every Tech Blog
HeadlessなUIライブラリを利用する価値
v-tokyo 20 に参加した | blog.kzhrk.com
Nuxt DevTools 101
ちょっとしたリアクティブユーティリティのご紹介 (v-tokyo #20)
Nuxt Serverと$fetchを 組み合わせたTypeScript開発体験
https://ubugeeei.github.io/v-tokyo-20/1
https://tsukuha.github.io/v_tokyo20/1?timestamp=2024-05-28-17-00
JavaScriptのProxy(Reflect)と 昨日より仲良くなる20分 | ドクセル
Vue3でモーダルダイアログの起動をいい感じに実装する | フューチャー技術ブログ
サービス開発におけるVue3とTypeScriptの親和性について
Vue / Vite 関連ライブラリー名の読み方 2024
2024-03-19のJS: Storybook 8、Nuxt 3.11、Cloudflare Workers + Vitest
Nuxt 3.11 · Nuxt Blog
【Vue.js】イメージとアナロジーとヒストリーで理解する Component Emits
「ref と reactive」 結局どっちを使えばいいのか？ (2024 年最新版)
【Vue.js】defineProps はなぜ import 文を書かずに使えるのか【マクロ】
Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
[2024年3月2日] Vue3+TypeScriptの環境構築で推奨される拡張機能と設定が変わったよ。
【Vue.js】コンパイラってよく聞くけど一体全体なんなんだ！？！？！？
Nuxt Auto-imports機能の深淵を求めて
NuxtHub: Build full-stack Nuxt apps, on the edge.
【徹底比較】Vue.js と React でレンダリングされる値、されない値
新しい UI テストの手法を提供するテストライブラリ SafeTest
【初学者にこそ伝えたい】Vue.js コミュニティ入門
新規プロダクトの開発に Nuxt 3 を採用して良かったこと - ANDPAD Tech Blog
Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt.
Vue公式のクイックスタートは何してるのか - Qiita