TIP This FAQ assumes prior experience with Vue - in particular, experience with Vue 2 while primarily using Options API. Composition API is a set of APIs that allows us to author Vue components using imported functions instead of declaring options. It is an umbrella term that covers the following APIs: Reactivity API, e.g. ref() and reactive(), that allows us to directly create reactive state, com
2022/11追記: Nuxt 3 の stable リリースに合わせて新しく記事を書き直しました。 祝・正式リリース!5つのテーマで理解する Nuxt3 の魅力 上記の記事の方が最新の情報を詳しく網羅していますので、そちらを読んで頂くことをオススメします。 Nuxt.js バージョン3のPublic Betaが公開されて約2ヶ月が経ちました。 私自身この2ヶ月、プライベートでNuxt 3を触っているのですが、かなり気に入っています。 とにかく開発体験が向上していて、一言で表すと「開発していて楽しい」フレームワークです。あまりにも気持ちよく開発できるので、Nuxt 3が公開されてから明らかに睡眠時間が減っています。 ただ、実際に何が変わったのか、どんなところが良いのか、よくわからずにとりあえず様子見している方もいると思います。 Vue 3の目玉機能であるComposition APIはVu
2021年のVueは結構動きが大きかったので、スナップショット代わりにちょっと振り返りのまとめを書こうと思います。 後半は2022年はVueとどうやって付き合うのが良さそうか、超個人的な見解を書きます。 ここ何年かのVueを使った個人開発をおさらい まずはここ何年かの個人制作からVueを使ってそうなものをリストアップして変遷を見てみます。ここ3年くらいのリポジトリから拾って並べたら、何となくVue3導入の歴史っぽくなりました。 なんか思ったほど作ってないけどそれは仕方ない。 2019.2 初代メザシアタック(ゲーム) リポジトリ: https://github.com/yuneco/mezashi 解説: VueとSVGを使ってシューティングゲーム『ネコ🐱メザシ🐟アタック🌟』を作ったのでソースと解説 開発環境: Vue CLI 言語: JS Vueのバージョン vue: 2.5.22
現在 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 を使用してプロジェクトを作成します。
vue.jsで手っ取り早くアプリを作りたいけど、フロントにそんな時間をかけないでそれなりのデザインを作りたい。 何かvue.jsで新しいアプリを作ったりするときは、バックエンド側に集中したりしたいので、このような悩みが出てきますよね。 もし今、UIフレームワークを使ってvue.jsのアプリを作るなら。。。 私はTailwindCSSかVuetifyを選びます 理由としては、以下のような理由で選択しています。 コミュニティがある程度の規模があり、継続して管理される可能性がある レスポンシブ対応している 軽い Nuxtのcreate-nuxt-appでUI Frameworkとして採用されている 私が作成するアプリは、大体Vuetifyを使用して作っていますが、自分で書くcssはどれも200行以内に収まっているので、その分バックエンド側に集中することができます。 さらに、デザインを学んでいない
Some time ago I wrote an article about state management patterns in Vue. You may or may not know but I’ve been working with Composition API intensively for the past few months while building a new version of Vue Storefront and I thought it might be a good idea to share some of my learnings. The topic I found really interesting is how using Composition API has changed the way I’m managing my applic
Vue.jsを使った開発でよく悩まされるのがコンポーネントの肥大化です。複雑なアプリケーションになると、1つのコンポーネントが<script>ブロックだけで数百行…なんてこともめずらしくないでしょう。従来、Vue 2までの標準的な書き方では、UIとしてのコンポーネントの細分化はできてもロジックの分割や整理には限界がありました。しかし、Vue 3のComposition APIを活用すると、はるかに柔軟な整理・分割が可能です。 「Composition APIは難しそうだからまだ使っていない」という方、あるいは「導入はしているけどイマイチメリットがわからない」という方は、この機会にぜひComposition APIを活用したコンポーネントの整理術を試してみてはいかがでしょうか? なぜ、Vueのコンポーネントは肥大化するのか? 簡単な例を見てみましょう。下のサンプルはミニマムなアナログ時計のコ
最終更新日: 2021年5月22日 このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための参考となります。しかし、スタイルガイドはすべてのチームやプロジェクトで理想とは限らないと考えていますので、過去の経験や、周囲の技術スタック、個人の価値観に基づいた上で必要に応じて慎重に逸脱することが推奨されます。 ほとんどのパートにおいて、基本的に JavaScript や HTML に対する提案はさけています。セミコロンやカンマの使用の是非はどちらでも良いです。 HTML の属性に対してシングルクォートかダブルクォートどちらかを利用するかもどちらでも良いです。しかし、特定のパターンにおいて Vue のコンテキストが役立つと判明した場合については、その限りではありません
はじめに v-modelはVue.jsを使ってフォームを構築する際によく使う機能です。 しかし、意外ときちんと使えていない場面を見かけることが多いので仕様と間違えやすいところを簡単に整理します。 v-modelの動作 公式のリファレンスにある通り、v-modelはv-onとv-bindをまとめて一行で書くためのシュガーシンタックスです つまり以下の二行は同じ動作をします <input v-model="searchText"> <input :value="searchText" @input="searchText = $event.target.value"> ※上記はテキストボックス <input type="text"> での例です。 公式リファレンスにあるように、チェックボックス、ラジオボタン、セレクトボックスの場合はプロパティが異なります。 表にまとめると、次のようになります。
Next Generation Frontend Tooling 💡 Instant Server Start ⚡️ Lightning Fast HMR 🛠️ Rich Features 📦 Optimized Build 🔩 Universal Plugin Interface 🔑 Fully Typed APIs Vite (French word for "quick", pronounced /vit/, like "veet") is a new breed of frontend build tooling that significantly improves the frontend development experience. It consists of two major parts: A dev server that serves your sour
できる・できないをまとめておく。 なお、 Class Component の記法は Vue 3 の仕様から Drop されたので、そこについて言及する場合はその旨を明確にする。 this の型について 基本的に全て有効化できる。 Vue 2.5 より this の型が正しく使えるようになっている。しかし、いくつかの条件がある tsconfig.json において、 noImplicitThis が true である必要がある 既存プロジェクトからの移行でない限りは strict: true であるはずなので、問題ない 逆に、既存プロジェクトの TS 化については、 noImplicitThis を false として Vue Template 以外の純粋な JavaScript 部分から段階的に移行できる。 computed などについて、戻り値を明示的に指定する必要がある これは Vet
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く