エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - ICS MEDIA
Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @click="reset">リセット</button> </div> </template> <script> export default { props: { // 表示するカウント値 count: { type: Number, default: 3 } }, methods: { // カウントをリセットします reset() { this.count = 0 } } } </script> それでも時として、
ポートフォリオサイトをVue.jsからNuxt.jsに書き換えてサーバーサイドレンダリングをする - Kekeの日記
本記事 本記事はVue.jsを使ってGoogle App Engineにホストしている静的なサイトをNuxt.jsを使って書き直そう思います。 題材は以前使った自分のポートフォリトサイトです。 keisukeyamashita.com GoogleCloudPlatform（GCP）で無料枠を使いきり画像などのコンテンツをCloud Storageに置いてありましたが、Embulkをマスターしたことによって簡単に二つ目のアカウントに移行できたので、再度ホストしようと思いました。 目的 今回の移行には、以下のような目的がありました。 コンポーネント設計が自由すぎる どこまでをどうコンポーネント分けするのかは、Vue.jsやReactを使っている人ならよくあると思います。 僕自身も、学生で、インターンといえばサーバーサイド、インフラ、モバイルアプリしか歩んでこなかったので、フロントエンドを知識
僕がNuxt.jsでアプリケーションを作るときに使用している技術 2020 Spring - ムニエルブログ
2020年4月現在、僕がNuxt.jsでアプリケーションを作るときによく使用している技術と、その選定理由や導入方法を紹介します。 目次 Vuetify.js HTML JavaScript Sass ESLint stylelint nuxt-i18n Netlify Vuetify.js Vuetify.jsは、マテリアルデザインに準拠したVue.js用のUIフレームワークです。 Vue.js用のUIフレームワークは他にもありますが、初めて使ったのがVuetify.jsだったこともあって愛用しています。 他の選択肢 Element Onsen UI など 選定理由 コンポーネントを一から作るのはつらいので、なんらかのUIフレームワークを使用したい コンポーネントの種類が豊富 コンポーネント名がイケてる（<v-btn>のようにv-が接頭辞になっている） 導入方法 以下の記事を参照してくださ
「SSRと規約だけ」の勘違いを解く、 Nuxt.js をプロジェクトで採用すべき理由 - ROXX開発者ブログ
back check 事業部に業務委託でコミットしているフロントエンドエンジニアの potato4d です。 ROXX では、 v1.0 が出る前から、プロダクト、コーポレートサイト、ランディングページ、メディアなど、多くのシーンにて、 Nuxt.js が採用されています。 Nuxt.js は多くの人に愛される一方で、最近は Vue 3.0 の話もあり、多少評価が落ち着いてきた印象があります。 この記事では、十分に普及した今だからこそ、 Nuxt.js の本当の優位性と、どういったときに使うべきか。あるいは使うべきでないかを再度言語化できればと思います。 「SSRとルールだけ」という勘違い まずは Nuxt.js の採用についてです。多くの場合、「Vue か Nuxt か」という問いには、いかが判断基準として使われます。 SSR 今必要かどうか Nuxt.js の組み込みのルールをチームに
Vue.observable でエラーの状態管理を行う - Mobile Factory Tech Blog
こんにちは、ブロックチェーンチームでソフトウェアエンジニアをしている id:odan3240 です。 ページをまたぐエラーを制御したい場合、グローバルな状態管理を行えるVuex が選択肢に上がるかと思います。しかし、Vue.js 2系に対応する 3系の Vuex は公式の TypeScript サポートがなく TypeScript と相性が悪いことが知られています。エラー状態管理のような規模の小さいものなら Vue.observable を利用すれば良いのでは？と考え実装してみたところ、いい感じになったので紹介します。 前提知識 Vue.observable とは Vue.observable は Vue.js 2.6 から追加された API です。この API はオブジェクトをリアクティブにすることができます。コンポーネントの data 関数の返り値がリアクティブになるのと同じ仕組みです
Vue.jsを漸進的にVue.tsへ変えていく/ Vue.js project progressive convert to TypeScript
私はVueが好きだ！そしてTSがいいのはわかった！ で、どうやったらTSにできそう？ Appendix: fruitriin/VueTStest: Vue2.6 をコミット単位で徐々に TS化 https://github.com/fruitriin/VueTStest VueでTypeScriptを始める 3つのStyle - Speaker Deck https://speakerdeck.com/fruitriin/3-style-to-start-vue-with-typescript [Vue+TypeScript] Vue.extend で Vue らしさを保ちつつ TypeScript で書くときの型宣言についてまとめた - Qiita https://qiita.com/is_ryo/items/6fc799ba4214db61d8ab typescript+vueで独
inject と Headless Vue インスタンスを活用したリアクティブな認証管理 - ElevenBack LLC. Engineering
この記事は Nuxt.js アドベントカレンダー 24 日目の記事です。 ここ一年ほどほとんど Nuxt.js で Vue.js を単体で使うことがめっきり減った @potato4d です。 今回はニッチな話題として、「JavaScript の世界のオブジェクトに Vue.js のリアクティブ機構をもたせる」という話をしたいと思います。 なお、今回はややこしいコードベースを省く意味でも Nuxt.js 環境を前提とします。 実現したい要件 まずは実現したい要件を定義します。 今回は、現在弊社にて開発中の Web サービスのシステムをベースとして考案します。 Firebase Authentication を使ってユーザー情報をやりとりする データベースヘの取得・保存操作では、 Firebase 側のユーザーの uid を利用するためグローバルから認証情報にアクセスできてほしい できればその
TypeScript + Vue.js の始め方
こんにちは。エンジニアの小椋です。 最近になって初めてTypeScriptを使う機会があり、TypeScriptもっと使おう！😠😠😠と思ったので、今回はVue.jsでTypeScriptを使う方法を紹介したいと思います！
Vue.js + Elelment UI + Lottieでお手軽にいい感じなUI/UXを作ってみる - SMARTCAMP Engineer Blog
デザイナー兼エンジニアの葉栗です！ スマートキャンプでは以前からWebフロントエンド開発にVue.jsを取り入れています。 Vue.jsなどコンポーネント指向のフレームワークは、UIフレームワークも豊富で、お手軽にリッチなUIが構築できるのでいいですよね。 今回は私のお気に入りの、Vue.js + Elelment UI + Lottie というライブラリを使って、数十分でできる簡易的なログインページを作ってみようと思います。 0から構築をはじめて、レイアウト設計、ElementUIで実装、Lottie組み込み、完成といった感じで詳しく説明していきます！ 完成画面 😊 使用技術 Vue.js Element UI Lottie（ロッティー） 実装します！ 事前準備 Vue CLIをインストール プロジェクトを作成 ElementUIをインストール ログイン画面を作成 不要コードの削除 コ
もうprettierで消耗したくない人へのvueでのeslint設定 - クソ雑魚エンジニアのメモ帳
タイトル通り。vscodeとvuejsを使ってのlintの設定をprettierなしでやってみた。 tl;dr 環境 問題点 手順 .vueの構文チェックその１ vscode上での自動フォーマット .vueの構文チェックその２ rulesをカスタマイズ <template>のカスタマイズ <script>をカスタマイズ まとめ。 おまけ tl;dr 対象ファイルとpackage.jsonと.eslintrc.jsの対応表👇 構文チェック・自動フォーマット 対象ファイル npmライブラリ(package.json) .eslintrc.jsでのextends .vue(<template>) eslint-plugin-vue plugin:vue/recommended .vue(<script>) eslint eslint:recommended . js eslint eslint
VueとFirebaseの基本機能全部使ってぬるぬる動くポートフォリオサイトを作ったのでソースと解説 - Qiita
絵描きとかUXとかやりつつフロントもやってる「ゆき」です。ポートフォリオサイトは10年くらい前にMoveableTypeで作ったきり。最近流石に「これでフロントやってますとか言ったら絶対次転職できなくね？」と危機を感じたので0から作り直しました。 サイト： https://pf.nekobooks.com/ ソース： https://github.com/yuneco/portfolio 機能・性能・運用を考えて作った結果、VueとFirebase(Web)の機能を一通り使ったサイトが出来上がりました。これからちょっと凝ったポートフォリオサイトを作りたい方向けに、どういう目的でどの機能を使ったのか、その時のポイントはなんだったのかを共有します。 2019.4.18追記 春なので期間限定1で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか
Vue.js 2.0 OAuth2.0ベースのサードパーティログインコンポーネント - プログラマーのフロントライン
Githubはアクセス記録を含むデータを返します。 Jsonは、異なるAcceptヘッダーに従って異なる形式を返すために推奨されています。 Accept: application/json {"access_token":"e72e16c7e42f292c6912e7710c838347ae178b4a", "scope":"repo,gist", "token_type":"bearer"} クライアントは、GETモードでGithubが提供するアドレスにアクセスし、ヘッダーにaccesstokenを追加または追加します。 GET https://api.github.com/user?access_token=... curl -H "Authorization: token OAUTH-TOKEN" https://api.github.com/user Githubはユーザーのjso
Vue.jsでAtomic Designを実践する - Qiita
DevicebookというNuxt.jsとLaravelを使ったWebサービスを個人開発しています。 最近、「うわっ、わたしのコンポーネント設計、見づらすぎ・・・？」と思いはじめたため、重い腰をあげてAtomic Designを導入しはじめました。 Atomic Deisngのメリット Atomic Designを導入すれば、コンポーネントの設計に統一感をもたらすことができて、再利用性が高まるという恩恵を受けられます。 今まではVue.jsのスタイルガイドに準拠しながら設計をしていましたが、個人開発サービスの規模感でも、そろそろ限界が見えはじめました。 コンポーネントの設計が、機能や開発時期によってバラつきがあるため、可読性が低い。 コンポーネントが他のコンポーネントやVuexと密結合になっているため、再利用しにくい。 つまり中規模段階に入るとVue.jsのスタイルガイドに限界が見え始める
Nuxt.js on AWS Lambda with Serverless Framework - mya-ake com
この記事についてこの記事はVue.js #2 Advent Calendar 2017 - Qiitaの 12 日目の記事です。 この記事では Nuxt.js（v2.6.2）を AWS Lambda で動かす方法について書いています。 Nuxt.js に関する説明もありますが、全体的にサーバー構築寄りの内容になっています。 しかし、Node.js で AWS にデプロイまでできる Serverless Framework というツールを利用しており、サンプルコード の npm scripts を実行するだけで AWS 上に環境を作れるようにしています。（AWS への登録と Credential の生成は必要です） ご興味のある方はそちらも参照してみてください。 また、先に断っておくとこの記事では API Gateway をエンドポイントとします。 API Gateway をエンドポイントす
Vue Fes Japan 2018のスタッフとして当日を振り返ってみた
去る2018/11/3（土）に日本初の大規模Vue.jsカンファレンス「Vue Fes Japan 2018」が開催されました。私はVue Fes Japan 2018実行委員会のスタッフとして昨年夏過ぎ（！）から準備に追われ、緊張感と幸福に包まれた当日を経て、今ようやく落ち着きを取り戻しつつあるところです。 おかげさまですでに参加者、スポンサーのみなさんからは多くのブログ記事を書いていただいているため、本記事では1スタッフの側から見たVue Fes Japan当日について書き記し、今後のVue.js日本ユーザーグループを含めたカンファレンス開催側の役に少しでも立てればと思います。 当日やったこと私はAV（Audio Visual）班のリーダーとして、主に会場Aの映像および音声のスイッチング、ミキシングを担当しました。様々な勉強会などで経験済みのこととはいえ、失敗が許されないポジションだっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
まもなくやってくる Vue.js 3
Vue___Vuex_のアーキテクチャ完全に理解した.pdf
noteをNuxt.jsで再構築した話
後悔しないためのVueコンポーネント設計 - PonyHead - BOOTH
さくらのフロントエンド さくらの Vue.js // vue.js in SAKURA - Speaker Deck
