Vue.js to TypeScriptの書き方一覧 - Qiita
最近ひたすら既存のVueプロジェクトのTypeScript化をやっているのでメモとしてまとめます。 （2019/09/09 追記） vue-class-componentはvue3のRFCから外されたようで、現在は、Composition APIがRFCとなっています。 Composition APIでのTypeScript化についてはこちらの記事をどうぞ https://qiita.com/ryo2132/items/f055679e9974dbc3f977 前提 .vueファイルで<script lang="ts">を使う vue-property-decoratorを使ったデコレータ方式のTypeScript化を行う data dataはそのままクラスのプロパティとして宣言します。 JavaScript <script > export default { name: 'Human'
Vue.jsの環境構築 — 仕事ですぐに使えるTypeScript ドキュメント
Vue.jsの環境構築 Vue.jsは日本で人気のあるウェブフロントエンドのフレームワークです。柔軟な設定のできるCLIツールが特徴です。本書では3系についてとりあげます。 作成時に最初に聞かれる質問でdefaultのpreset（babelとeslint）ではなく、Manually select featuresを選択します。 TypeScriptを選択する場合はManually select featuresを選択 次のオプションで必要なものをスペースキーで選択して、エンターで次に進みます。選んだ項目によって追加の質問が行われます。Routerやステート管理などのアプリケーション側の機能に関する項目以外にも、LinterやユニットテストフレームワークやE2Eテストの補助ツールなど、さまざまなものを選択できます。 TypeScriptを選択する場合はManually select f
最小限の構成でVue.extendとクラスコンポーネントを比べてみる
Vue.jsでTypeScriptを使う時、いくつか選択肢があるのを知って整理したくなったので最小限の構成で同じ機能のものを作成し見比べて見ました。 Vueのバージョンは２.x系です。 なお、Vueの3系では、クラスコンポーネント以外にComposition APIといった新しい書き方が主流になりつつありますが、2.x系を使用したプロジェクトはまだ沢山ある、現在携わっているプロジェクトもクラスコンポーネントを使用している為、TypeScriptの理解を深めるためにもVue.extendとクラスコンポーネントの比較をしています。 検証する ボタンをクリックすると、数字がカウントアップします。 １０回クリックするとコンソールが表示されリセットします。 確かめられます。 リポジトリはこちら。 構成はなるべくシンプルに ./src ├── components │ ├── AddButton.vu
Nuxt 3 を今すぐオススメしたい 15 のポイント
2022/11追記： Nuxt 3 の stable リリースに合わせて新しく記事を書き直しました。 祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力 上記の記事の方が最新の情報を詳しく網羅していますので、そちらを読んで頂くことをオススメします。 Nuxt.js バージョン3のPublic Betaが公開されて約2ヶ月が経ちました。 私自身この2ヶ月、プライベートでNuxt 3を触っているのですが、かなり気に入っています。 とにかく開発体験が向上していて、一言で表すと「開発していて楽しい」フレームワークです。あまりにも気持ちよく開発できるので、Nuxt 3が公開されてから明らかに睡眠時間が減っています。 ただ、実際に何が変わったのか、どんなところが良いのか、よくわからずにとりあえず様子見している方もいると思います。 Vue 3の目玉機能であるComposition APIはVu
Vue Metaでページタイトルを動的に切り替える
前回ページごとに動的にタイトルをつけるため、Vue Router のナビゲーションガードを使って画面遷移前にデータの取得するようにしましたが、肝心のタイトル変更がうまくいきませんでした。 しかし、vue-metaを使ったところあっさりと解決しました。 Vue MetaはNuxt.jsでも使われている、meta タグの値を変更するライブラリです。 Nuxt.js でなくても Vue を使っていれば使うことができます。 多くのサイトではトップページ以外のページで、[トピック名 - サイトタイトル]や[トピック名 | サイトタイトル]のように、サイトタイトルが必ず末尾または先頭に来るようにしていますが、vue-meta でも同じことが簡単にできます。 yarn(npm)で追加し、Vue.use()で登録します。 yarn add vue-meta import Vue from "vue"; i
普通のWebサイトをNuxt.jsで作り変えてみた話 | ARAKAZE NOTE
フレームワークはもはや流行りとか言うよりもひとつふたつは使っていて当たりまえ…みたいな雰囲気を感じる今日この頃ですが、受託制作で普通のWebサイトを作っていると普段の仕事では早々使う機会がないんじゃないかと思います。（僕だけですかね…？） Webサービスやゲームのように非同期で通信する要素があるわけでもなく、DBもなくページ内の物量も普通…そんな普通のコーポレートサイトやLPなんかを作るのにフレームワークはややオーバースペックに感じます。 ついでにクライアントから「ちょっとならHTML触れるから自分で更新します」と言われた日には開発環境の導入自体のハードルが高く、そもそもhtmlじゃないフレームワークの導入なんて出来ません。 今回はそんな風に「別に使わなくても仕事は出来るしなぁ」と腰が重かった自分が、自身のポートフォリオサイトをNuxtに作り変えてみた感想を書いていきます。 Nuxt.js
v-forの中でrefを生成すると、refが配列になってしまう
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
BASEのVue.jsコンポーネントの設計について登壇してきました - BASEプロダクトチームブログ
前書き フロントエンドエンジニアの松原(@simezi9)です。 先日10月30日にクラウドワークスさんをお借りして実施したVue.jsの設計勉強会である、Vue.jsアーキテクチャリング勉強会 にて、 BASEの現在のVueコンポーネントの設計に関して登壇してお話してきました。 全体の資料はこちらです もともとBASEではVue.js+TSを採用した大規模なシステムのリニューアルプロジェクトが2018年からスタートしていました。それにあたっての大まかなフロントエンドの構築方針は以前もblogや外部登壇で発表していました。 次世代の管理画面を作るフロントエンドの取り組み - BASE開発チームブログ 次の5年を支えるVue.js製UIコンポーネントライブラリを育てる これまでの発表では大枠の技術スタックやワークフローの話が多かったですが、 今回はVueコンポーネントの設計が勉強会の主眼にあ
Vue3に書き直してみる - Panda Noir
Vue2からVue3へ書き直す際に情報が不足していて困ったのでまとめておきます。 公式ドキュメント まだversion3の公式ドキュメントは揃っていません。マージされたPRかRFCを見るしかない状況です。 migrate from v2 to v3 ※「これだけ押さえれば7割くらいは移行できるだろう」くらいで網羅的には書けておりません new Vueによるインスタンス生成はcreateApp()へと置き換え setupメソッドの引数の型推論をしたい場合はSFCのexportするオブジェクトをdefineComponentでラップ new Vueのdataやmethodsはinject()とapp.provide()を使ってグローバルステートで置き換え React Context APIのようなもので、書き方もだいたい同じ。 watchやdata、computed、mountedなどほとんど
Vue 3 Composition API を使ってみよう - Qiita
// MyTodo.vue <template> <todo-list v-for="todo in sortTodo" :todo="todo" :key="todo.id" @toggle="toggleTodo" @remove="removeTodo" /> <add-todo @add="addTodo" /> </template> <script lang="ts"> import { computed, defineComponent, reactive, watchEffect, onMounted } from 'vue' import TodoList from '@/components/TodoList.vue' import AddTodo from '@/components/AddTodo.vue' import { fetchTodo } from '@/
Vue.jsの「Avoid mutating a prop directly since ...」の警告文がなぜ発生するのかを解説する | KATUBLO
Vue.jsの「Avoid mutating a prop directly since ...」の警告文がなぜ発生するのかを解説する はじめに この記事ではVue.jsで開発をしている最中「[Vue warn]: Avoid mutating a prop directly since …（以下略）」という警告文に遭遇して「どうやったらこの警告文を修正できるのか？」「なぜこの警告文が発生するのか？」などに悩んでいる人に向けて記事を書いていこうと思っております。 「Avoid mutating a prop directly since … 」の警告文が表示される状況 今回の記事で扱う「[Vue warn]: Avoid mutating a prop directly since …（以下略）」の警告文は親コンポーネントからpropsで受け取ったプロパティを子コンポーネントで更新したとき
【eslint-plugin-vue】Vue.js 3.xサポートを始めました - Qiita
Vue.js 3.x用に追加されたルールセット （上でも書きましたが）Vue.js 3.x用に下記のルールセットが利用できるようになりました。 plugin:vue/vue3-essential plugin:vue/vue3-strongly-recommended plugin:vue/vue3-recommended 下のルールセットの方が有効になるルールが多いです。 Vue.js 3.x用に追加された検証ルール 詳細はリリースノートを参照してください。 vuejs/eslint-plugin-vue - Release v7.0.0 vue/no-deprecated-filter このルールはフィルターの使用を禁止します。 Vue.js 2.xまで使用できたフィルターですが、Vue.js 3.xでは廃止されます。（詳細はRFC0015を参照してください。） このルールでVue.j
Vue.jsスタイルガイドとeslint-plugin-vue検証ルールのマッピング - Qiita
この記事は Vue.js Advent Calendar 2018 5日目の記事です。 気まぐれに覗いたら空いてたのでいただきました。 去年のAdvent Calendarで@mysticateaさんの記事「eslint-plugin-vue を作っている話」を見て、すごいなeslint-plugin-vue！と思って使い始め、ついでにいくつかPRしてたらeslint-plugin-vueのコラボレーターになりました (追記：現在2019年はメンバーになりました) なのでeslint-plugin-vueネタで記事書こうと思います。 この記事について 記事の内容 eslint-plugin-vueにはVue.jsの公式のスタイルガイドを守るためのLintルール（静的検証ルール）がいくつか存在しています。 つまりeslint-plugin-vueを使えば自動的にスタイルガイドのいくつかの項目
Vuex: mapStateの使い方を理解する - Qiita
=== 追記 === この記事を書いたのはだいぶ前ですが、それ以降Vueを触ることはなく、基本 React + TypeScript で開発しているので、現在の Vue の状況はよくわかりません。 が、Vuexのmapヘルパーはだいぶ型に弱そうとの話を見たため、追記させていただきます。 型は命！ =========== Vuexのドキュメントを読んでいて、mapStateの箇所で少し詰まった。理解すればすごい単純なことなのだが、あまりWEB上にドキュメントもなかったので、残しておく。 サンプルも作ってあります。記事中のコードは見やすさのためにimport文などを削ってあるので、完全なコードはサンプルからご確認ください。Vue CLI3を使って構築したため、vue-loaderを使っています。 まずはcomputedの理解から computedを使うことで、「今までthis.$store.s
VuexのMutationとActionの切り分け - Qiita
Vuexを勉強してたらMutationとActionで処理の切り分けをどうしようか、というところで悩んだので自分なりの考えを書きます。 MutationとActionの違い そもそもMutationは同期処理でなければならなず、Actionは非同期処理も可能という違いがあります。 これは、Mutationで複数の状態の変更が非同期に行われた場合に挙動が予測不能になるのを防ぐという意図があるようです。 Actionでは、Mutationに対してcommitを行うことで間接的に状態を変更しますが、Actionを呼び出すためのdispatchメソッドはPromiseを返すため、処理の順序を制御することが可能になります。 同期処理はどっちに書く？ 非同期処理はActionに書かなければないですが、同期処理はどちらに書くべきか？ ここで、Actionに渡されたtextが"Yes"ならcount+1、
Vue.jsを習得するためにやった事 まとめ（随時更新） - Qiita
JSフレームワーク「Vue.js」を習得するためにやったことをここにまとめます。2019年現在、最優先で取り組んでいるテーマです。随時更新中！！ ※2020/01/07追記：vuex-persistedstateでローカルストレージにデータを保存 Vue.js基本 三大フレームワーク比較とHello world そもそもJSフレームとは何か？どんなことができるのか？三大フレームワークと言われるReact、Angularなどと比較した結果、Vue.jsを最初にやってみることにした。 ※参考：三大フレームワークとかSPAとか仮想DOMとかわかりにくかったのでHellow Vue.jsしてみた！ イベント（v-on）、分岐（v-show、v-if）、ループ（v-for） イベント設定の「v-on」、条件分岐の「v-show」と「v-if」、ループの「v-for」でどんなことができるのか実際にやっ
Vuetifyチュートリアル。CSSを書かないマテリアルデザイン
フロントエンド 52124 view Vuetifyチュートリアル。CSSを書かないマテリアルデザイン 最終更新日:2019/03/23 VuetifyとはVue.jsで使える、マテリアルデザインのフレームワークです。 Vuetifyにはマージンの調整、文字サイズの変更等デザインをする上で便利なクラスや、マテリアル。 マテリアルにまつわるオプションがデフォルトで備わっています。 マテリアルやオプションを使いこなすと、凝ったレイアウトでなければ、CSSを書くことなくデザインをすることが可能です。 今回は、以下のようなよくある会員登録フォームをVuetifyでCSSを使わずに実装していきましょう！ Vuetifyの環境構築はこちらでまとめておいたので、環境がない方はこちらから初めてください。 Vuetifyが便利すぎる【マテリアルデザイン3分入門】 Vuetifyでマテリアルデザインをする流れ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vue-awesome-swiperでサムネイル付きスライダーを作成する【Vue.js】 | grandstream blog
Vue: default value for prop function
vue.js+vuetify ヘルプ集 戻るボタン/テキスト色の変え方/アイコン付きボタン/v-navigation-drawerのTipsなど – Everyday’s Sunday
