【Vue.js】CSS Modulesで書き始めるときに見るべきTips - Qiita
<template> <div :class="$style.container"> ExampleComponent! </div> </template> CSS Modules では親コンポーネントと子コンポーネントの間でクラス名の重複を気にする必要がない1ので、Scoped CSS に比べてあまり頭を使わずに短いクラス名を付けられます。 この2つのメリットが大きいので $style. を付くことで可読性が下がったり、書きづらかったりといったことは感じられませんでした。 むしろ注意が必要なのは、 :class で複数のクラスを当てたい場合は :class="[$style.class_name_1, $style.class_name_2]" のように配列構文を用いる必要があることです2。 ポイントは3つです: 親コンポーネントと子コンポーネントの間で、クラス名の重複を気にする必要は
2020年後半版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita
2020年後半版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips はじめに 最近iCAREさんの所でVue.jsを一緒にやらせていただいているのですが、フロントの技術スタックがGraphQL + Vue.js + TypeScriptで開発しており、そこでのVue.jsの開発体験がかなり良く、iCareさんの詳細なノウハウを公開しても良いと言っていただけたので、言語化し、整理して、共有出来たらと思います. ※ いつも通り記事の内容に意見がありましたら直接編集リクエストをください 前置き 今回のサンプルは@vue/cliを利用し、プリセットはTypeScriptだけいれときました. versionは2020年7月16日時点の最新4.4.6です. リポジトリはこちらから見れます. https://g
Vue.js × Atomic Design - コンポーネント分割の指針 / Vue.js and Atomic Design - Guideline for components division
Vue.js 講演用資料です。 # 概要 コンポーネントをどのような粒度で分割し、どのように実装するべきかというのは難しいテーマです。 一概に正解があるとも言い切れないテーマですが、この指針を疎かにすることはチームを混乱に陥れることと同義です。 それが SPA 未経験のチームであればなおさらです。 直近のプロジェクトはまさにそんなプロジェクトでした。 本セッションではアトミックデザインのエッセンスを用いてコンポーネント分割の指針を示し、 またコンポーネント実装時に注意すべき事柄についてお話します # URL HomePage: https://nrslib.com Twitter: https://twitter.com/nrslib
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
【Vue.js】Web API通信のデザインパターン (個人的ベストプラクティス) - Qiita
はじめに Vue.jsを使用したアプリケーションでのWeb API呼び出しのデザインパターンについて調べてみました。 しかし検索して出てくるチュートリアルやサンプルは、コンポーネント内でaxiosをインスタンス化していたり、Vuexの中でaxiosを使用するというサンプルがほとんどでした。 しかし実際のプロダクトでこれをしてしまうと コンポーネント内でAPIアクセスの直書きによって単体テストが困難に Vuex(actions)の肥大化(使い回さない処理はStoreに記述しないほうがいいとする文献もある) API通信部分をPureJSでモジュール化しても依存度がイマイチ下がらない（コンポーネントでモジュールをインポートするため）。 などなど問題になることが多そうでした。 ある日、Jorge氏が投稿した「Vue API calls in a smart way」という記事にたどり着きました。
Vue.js おすすめライブラリ 21選（おまけ+1） - Qiita
どーも、8ビットエンジニアです。 今更感はいなめませんが、まとめます。 対象者 ・これからVue.jsを勉強する人 ・Vue.jsに興味がある人 ・npm or yarn をある程度理解している人 機能側 1. vue-chartjs vue-chartjsはvueのChart.jsのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。 デモ 公式ドキュメント 2. vue-fa Vue.js で使用するアイコンですね。 FontAwesome5 を使用しています。 公式ドキュメント 3. vee-validate vee-validateは、入力を検証してエラーを表示することを可能にする、Vue.js用のテンプレートベースの検証フレームワークです。 テンプレートベースであるため、値が変更された時にどの種類のバリデータを使用するべきかを入力ごとに指定するだけで済みます。
Nuxtとfirebaseによるサービス開発から100人の初期ユーザーの獲得までにやったこと - Qiita
都内でサーバーサイドエンジニアをやっている山下です。 webサービスを作るのが好きで、個人でもいくつか開発をしています。 先日Nuxtとfirebaseを使った個人サービスをリリースしたので、開発から初期ユーザ獲得までに行ったことをまとめておこうと思います。 作ったサービス 行きたい場所への同行者を募集するwithruitを作りました。 もしよかったら、使ってみてください！！ 個人サービスなので、もしかしたらバグがあるかもしれません、、。 その際は、お問い合わせフォームから優しく連絡いただけるとありがたいです。 機能一覧 withruitには様々な機能があるのですが、大体がfirebaseを使って実装されています。 今回は、以下の機能について自分がfirebaseでどのように実装したのかを書いていこうと思います。 facebookログイン 投稿（画像アップロード） お問い合わせ 通知 それ
NuxtのSSRモードで一部だけSSRをスキップする方法 - Qiita
そういえばわざわざ探して公式ドキュメントに追加しておきながら日本語の情報としてまとめてなかったなぁと思いメモ。 Nuxt の SSR モードにおける悩み Nuxt はデフォルトでサーバーが立ち上がって Node.js サーバーがサーバーサイドレンダリングを行う SSR モードで起動するようになっている。 SSR をしたい場合はどうしても SSR モードを使う必要があるけれど、とはいえ例えば SSR 非対応な Vue コンポーネントを読み込んでいる時に、 plugins で ssr: false にしていてもカスタムコンポーネントを記述していると問題となったりしてすこし具合が悪い。 そんな時の、「ここだけSSRしないでおきたい」という要望も、 Nuxt は対応している。 <no-ssr> コンポーネント Nuxt には、本体にデフォルトで登録されたカスタムコンポーネントである <no-ssr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue3 便利帳（随時更新） - Qiita
【Vue.js】Scoped CSSよりCSS Modulesの方がベターだった件 - Qiita
Vue Fes Japan - Speaker Deck