VueUseVueUseCollection of Vue Composition Utilities Collection of Essential Vue Composition Utilities
Nuxt 3 の useFetch() と useAsyncData() の使い方
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 は、とてもシンプルに（意識することなく）活用する
VuetifyのDate Pickerを日本語化したら"日"ってついてくる、やだキモい - nanisore oishisou
長い前置き（飛ばし読み推奨） 最近、フロント側を完全に脱jQueryして、Vue.js + Vuex + VueRouter + Vuetifyで開発を進めている。 これまでもVue.js + Vuex この２つは使っていたわけなんだけど bootstrapベースであるAdminLTEと組み合わせることに限界を感じていて、 それぞれの開発者がVueライブラリを探して入れてみたり、 自作してみたりみたいなことを、それぞれの案件で繰り返していたわけだ。 心の声（もう、こんなお飾りのjQuery依存のUIフレームワークなんて実際は足枷じゃねーか。確かにデザインは綺麗なんだけど。。） そこで出会ったのがVuetify。 少し使い込んでみた感じ、グリッドレイアウトにflexboxを採用しているので レイアウトに苦戦することもあるけど、それだって新しいbootstrap4も同じだし もはや、これが時代
Nuxt.js×Axios×RepositoryFactoryのオレオレベストプラクティス - Qiita
はじめに 今回はNuxtのAPI設計をRepositoryFactoryパターンを適応して実装して 昔と比べてかなりスッキリした設計にできたかなと満足できたので、そちらの構成の紹介をしていこうと思います。 ディレクトリ設計 project ├ src | ├ repositories │ │ ├ user-repository.js │ │ └ post-repository.js │ ├ factories │ │ └ api-repository-factory.js │ ├ store │ │ └ post.js │ └ plugins │ ├ axios.js │ └ api.js │ └ nuxt.config.js Repositoryの作成 まず大本となるRepositoryをVue.jsなどであれば作成するのですが、 Nuxtの場合は@nuxt
Vue + JSX + Nuxt Composition API で最高のフロント開発体験 - ANDPAD Tech Blog
はじめに ANDPADでフロントエンドの開発を担当している小泉です。 前回、約3ヶ月前にVue Composition APIをチームで導入して得られたメリットという記事を書かせて頂きました。 その後、今年の5月頃からまた新たなプロダクトの立ち上げを担当する機会があり、フロントの技術選定についていろいろ検討する中で、Vue.jsでもJSXを使って書けること、かなり導入しやすくなっていることを知りました。 そこで、Nuxt Composition API + TSXという組み合わせを採用してみたところ、かなり使いやすく、Vue と React のいいとこ取りができて最高 なのではないかとさえ思いました。 この記事では、そんなVue + TSX の導入方法と、メリット・デメリット、そして使う際のTipsをいくつか紹介しています。今後のフロントエンドの技術選定や、Vue + JSXでの開発に興味
Vue.jsのslotの機能を初心者にわかるように解説してみた | フューチャー技術ブログ
はじめにはじめまして。2017年入社の永井です。 東郷さんによる「Vue.js最初の難関、「props down, event up」を初心者にわかるように解説してみた」はご覧になられましたでしょうか？おそらくVue.js最初の難関は無事乗り越えられたと思います！ 今回は「Vue.js初心者にわかるように解説してみた」第二弾として、props down,event up と同様に親子関係が肝となる、「slot」について、初心者に向けて説明していきたいと思います。 slotとはslotとは親となるコンポーネント側から、子のコンポーネントのテンプレートの一部を差し込む機能 です。 スロットというと「スロットマシン」が思い浮かびますが、もともとslotの「差し込み口」という意味から派生して、コインの投入口があるスロットマシンの意味をもつようになったそうです。 以下では大きく3つ、デフォルトのsl
You Might Not Need Vuex with Vue 3
Vuex is an awesome state management library. It's simple and integrates well with Vue. Why would anyone leave Vuex? The reason can be that the upcoming Vue 3 release exposes the underlying reactivity system and introduces new ways of how you can structure your application. The new reactivity system is so powerful that it can be used for centralized state management. Do You need a shared state? The
Vueのライフサイクルを完全に理解した - Qiita
Vueのライフサイクルについて 今回はVueのライフサイクルについて説明したいと思います。 Vueのライフサイクルは以下のようになっております https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグラム このようにVueではインスタンスが作られてから、削除されるまでの間で、ライフサイクルフックを実行することができます。 ここでは、インスタンスのライフサイクルごとに説明したいと思います。 インスタンス作成時 インスタンス作成時には以下の2つのフックを実行されます beforeCreate <script> export default { data(){ return{ hoge:"a" } }, beforeCreate () { console.log('hoge is: ' + this.hoge) } } </script> /
Vue.jsでシンプルなローディングを表示する「vue-loading」の使い方 | DevelopersIO
Vue.jsでローディングを表示 Webアプリにおいて、非同期処理を行うこと（APIを呼び出してデータを取得するなど）はほぼ必ずと言っていいほど必要なことです。また、非同期処理中にはローディングを表示しておき、ユーザーに処理を待っている状態であることを伝える必要があります。 Vue.jsでローディングを表示するモジュールは様々ありますが、中でも個人的に気に入った「vue-loading」をご紹介します。シンプルで使いやすいのでオススメです。 使い方 まずはVueプロジェクトが作成済みの前提で進めます。 以下のコマンドでインストールします。 $ yarn add vue-loading-template あとは表示したいViewでモジュールをインポートして使います。 <template> <div class="container"> // 使用 <vue-loading type="spi
レガシーでウォーターフォールなVue.jsでの大規模開発に捧げるテスト駆動フロントエンド開発の話 / v-tokyo10
大規模ウォーターフォール開発の中で実施している、vue-testing-libraryを利用したテスト駆動開発の紹介です。
Vue+VuexでMVVMなWebApplicationを設計するときに考えたいこと
まえがき ここ最近、Vueを使って実装されたWebアプリが随分と増えてきたように感じます。自分も何度となく実装してきました。すごく小さなデモを作るときにも使えるし、中規模以上のWebアプリを作るときにも使えるし、扱いやすいライブラリでとても好きです。 ある程度の規模になってくると「複数の画面でデータを共有したい」「こっちのComponentの状態をあっちのComponentに伝えたい」といったような問題にぶち当たり、アーキテクチャを導入することでそれらを解決するというのもお馴染みな感じです。特にVueでは双方向データバインディングの特性上、MVVMアーキテクチャが使われることが多いと思います。 今回は、VueでMVVMを実現する際に起き得る設計上の問題について、現時点での私の解決方針をまとめてみました😌 まえがき Vue+MVVMとはどんなものか 一般的なMVVMを理解する View V
Vueの秘密のパフォーマンステク9選紹介 - Qiita
VueConf USでのさまざまな発表 今年の3月に VueConf US が開催されました。最近になってビデオが公開されて初めて知ったこともあるので本記事ではその紹介をします。 いろいろ面白いトピックがあるのですが、特にVueコアチームのGuillaume Chauさんによるパフォーマンス改善テクニックはまじかーという感じだったのでここにまとめたいと思います。 "9 Performance Secrets Revealed with Guillaume Chau" プレゼン動画: http://www.youtube.com/watch?v=5B66qer8cZo スライド: https://slides.com/akryum/vueconfus-2019#/ デモサイト: https://vue-9-perf-secrets.netlify.com ソース: https://githu
Nuxt.jsでnoteの記事ページを置き換えました｜こんぴゅ
noteの記事ページがリニューアルしてパワーアップしました。記事の読み込み、描画が格段に高速化されています。 noteのフロントエンドはAngular.jsの1系で運用されてきましたが、実行効率が悪く表示速度が遅いという問題がありました（特に古いスマホで顕著）。問題を根本解決するためにNuxt.jsへの移行を進めていました（詳しい経緯は以下の記事をごらんください）。 今年から、おすすめページ、マガジンページ、コンテスト一覧ページなど部分的にNuxt版に置き換えていきました。nodejsやNuxt.jsサーバーの運用が初めてだったので一気に置き換えるのではなく少しづつリリースして様子を見ながら進めました。 運用を2ヶ月ほどしてみて、インフラ面、実装面で問題なさそうなことが確認できたため、noteのトラフィックの多くを占める記事ページ（このページがまさにそうですね）のNuxt.js版リリースを
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTips - Qiita
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTipsTypeScriptes6DesignPatternsVue.jsVuex はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 現在は構築したシステムを保守・運用しており、その際に得られたノウハウを言語化し、共有出来たらと思います。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ※ パフォーマンスの話はしません。 ゴール 役立つTipsを身につけコード品質を向上させる コンポーネントのバグを減らせるTips ほとんどのバグは変数から来ます。 もし全ての値が定数なら状態から
破綻しない Vue.js アプリケーション開発のために大切なこと / How to make a robust Vue.js application - Speaker Deck
2018/10/15 に JSLounge の活動として UUUM株式会社様で行った発表のスライドです。
Storybook for Vueでエンジニアとデザイナーの協業を加速させる - Studio Andy
この記事はCAMPHOR- Advent Calendar 2017の23日目の記事です。 はじめに アプリケーションの機能を「カプセル化」、「コンポーネント化」しようというのは、フロントエンド/バックエンド問わずに近年のWeb開発におけるトレンドのひとつです。 Web業界も5年もの、10年ものと呼ばれるシステムが増える中で「最初から完璧なシステムを作ることなんて無理なんじゃないか」と多くの人が気づきはじめました。 その流れを受けて「どうせ改修が必要なら、小さなスコープで新しいものに置き換え可能な仕組みを作ろうぜ！」というのが「カプセル化」、「コンポーネント化」の大きなモチベーションであると、個人的には理解しています。 Vue.jsとコンポーネント JavaScriptのフレームワークであるVue.jsも、例に漏れずコンポーネントドリブンな開発に適した仕組みの1つです。 SFC(Singl
一休.comレストランのスマートフォン検索ページがSPAになりました - 一休.com Developers Blog
一休.com レストランは今年の 7 月 18 日、スマートフォン向け検索ページのリニューアルを行いました。このエントリーでは、その中身について少し紹介させていただきます。 検索ページの課題 一休.com レストランではスマートフォン向け検索ページに対して「遅い」という課題意識がありました。これは技術面で少しブレイクダウンすると; パーソナライズドを含む複雑な処理を行っているため、サーバーサイド処理が重い。 UI 上無駄な遅延処理を行っているため、クライアントサイドの描画が遅い。 というサーバー側とクライアント側両方の課題がありました。クライアントサイドの「無駄な遅延処理」というのは; 検索結果取得が REST API 化されているにも関わず、再検索の度にページリロードを行い、サーバーサイドの描画からやり直している。 という実装に問題がありました。下図がリニューアル前のページ描画の様子です
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Vue.js】編集機能とキャンセル機能のあるフォームを実装
JSLounge Archives
GitHub - vuejs/vue-hackernews-2.0: HackerNews clone built with Vue 2.0, vue-router & vuex, with server-side rendering
