初めてのVue.js（Nuxt.js）開発業務を始める前に学んでよかった技術書・記事まとめ - 仮想サーファーの日常
フロントエンド開発の経験がなかったのですが、4ヶ月ほど前に始めた副業先で急にVue.js（Nuxt.js）でフロントエンド開発することになりました。 「急いでVue.jsを学ばないと！フロントエンド開発はじめてだけど何から学べば！？」 と色んな情報や学習ツールをあさりつつ四苦八苦したので、後世のフロントエンド（Vue.js）開発入門エンジニアに向けて参考になった情報をまとめておきます。 これからVue.js（Nuxt.js）で開発をしようとしている方の参考になれば幸いです。 Vue.js（Nuxt.js）の学習内容と技術書・記事 Vue.jsを業務で扱えるようになるために学習したい内容には、ざっと以下があります。 Vue.jsを業務で扱えるようになるために学習したい内容 JavaScriptの基本（Vue.jsの理解を進めやすくするために必要） JavaScriptの開発方法（JavaSc
先日の v-tokyo #11 の懇親会で質問されたので、Native TSX Support される Vue 3 でなぜ tsc だけで TSX が動作しないのかを聞かれたのでメモとして残しておこうと思います。 ちなみに Vue 3.0 beta が出た頃に既に検証し終えているコードは以下にあります。 https://github.com/potato4d/vue-next-tsx-only-tsc TL;DR Vue 3 にて、render function の h 関数が分離された h 関数の分離に伴い、 API が React のに近いインターフェースとなった この2点によって tsc だけで Vue TSX が動くようになったが、 近いだけで微妙に違う仕様によって実用は難しい 具体的には children のとり方が VNode[] か ...VNode かの違いがある Vue
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
スマートキャンプに入社しました！& Chrome拡張機能をVue.jsで作りました！ - SMARTCAMP Engineer Blog
初めまして！8月よりスマートキャンプにエンジニアとして中途入社した吉永です！ 私は現在19歳で、通信制の大学に通いながらエンジニアチームの一員として開発に携わっています。 プログラミングは中学生の時に始め、高校在学時にとあるスタートアップ企業でインターンしたり、卒業後はエンジニアとして正社員で開発を行っていました。 得意分野はフロントエンドで、主にVueやNuxtを使った開発が好きですが、前職ではLaravelやDjangoを使ったバックエンドの開発も行っていたため、メンバー構成に左右されない柔軟な開発を行えることが強みだと思っています。 薪入れ作業でChrome拡張機能を開発しました なぜこの拡張機能が必要だったのか どうやって作ったか 主要ファイル解説・作り方 詰まったところ 全体的なまとめ 参考にさせていただいたサイト 薪入れ作業でChrome拡張機能を開発しました スマートキャンプ
petite-vue
petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model as standard Vue. However, it is specifically optimized for "sprinkling" a small amount of interactions on an existing HTML page rendered by a server framework. See more details on how it differs from standard Vue. Only ~6kb Vue-compatible template
ROXX backcheck 事業部でエンジニアやってる、秋葉です！ 祝Vue.js3リリース Vue 3.0 "One Piece" is here! https://t.co/jH6FfByDmX— Vue.js (@vuejs) 2020年9月18日 弊社の2つのプロダクト、agent bank、 back check ともに、フロントエンドの技術として、 Vue.js を採用しており、Vue3への対応はROXXとして必ず課題となっていきます。 Vue3を語る会をした ↑の経緯がありVue3について、「ROXX全体でキャッチアップが必要だよね！」 って感じで企画し、Vue3についてのお勉強しようの会をしました。 内容としては Vue3 の新機能について なくなる機能について Nuxt への対応 ROXX として Vue3にどう取り組んでいく？ 当日は以下の資料を使って、用意したサンプ
VuetifyはVue.jsのUI(ユーザインタフェース)のライブありでVuetifyを利用することでデザインの知識がなくても効率的に美しいGUI画面を作成することができます。しかし使いこなすためにはプログラミングの知識が必要となるためVuetifyの基本的な使用方法を理解しておく必要があります。 本文書ではVuetifyがマスターできるように実践的なダッシュボードの作成を通して使用方法を確認していきます。 説明は2回に分けて行い、1回目である本文書ではダッシュボードのレイアウトの作成方法とルーティングの設定方法を確認します。本文書を読み終えるとVuetifyを利用して自分の力で下記のダッシュボード画面を作成することができます。 ダッシュボード画面 2回目ではダッシュボードに表示させるグラフコンポーネントを使って、Grid System(グリッドシステム)やResponsive Desig
🚩 初めに こんにちは。Vue Beginners です！ 😄 これまでに、Vue の勉強を始める方法や、環境構築の方法などを紹介してきました。 今回はもう少し範囲を絞って、具体的な疑問について解説していきます！！！！！ Vue.js について学んでいると、コンパイラ という言葉を見かけることがあると思います。 皆さんは「Vue.js のコンパイラとは何ですか？」と聞かれたら、どのように答えますか？ 🤔 意外と戸惑う方も多いのではないでしょうか。 今回はコンパイラとは何なのか、何のためにあるのか、Vue.js のコンパイラとはどういうものなのかについて説明してみます。 それではスタート！！！！！！！！！！！ 🤔 コンパイラとは これからの説明は、Vue.js に限った話ではありません。 プログラミング全般で使われる コンパイラ という意味について説明していきます。 コンパイラ (C
TL;DR ES6 modules(import/export)が優秀なのでこれで良いと思う。むりに難しくする必要はない。 Vue3 からはcomposition apiを使えるけどこれもES6 modulesベースで使っていくことになる。ReactのContext的なことがしたいならinject/provideを使おう。 自分は今までいろいろな理由でvueのmixinsを避けてたけど、最近転職して強制的に目の当たりにしたため改めてmixinsの何が自分にとって辛いものなのかを書いてみようと思った。ちなみにすでに社のslackでお気持ち表明済みで、いい反応をもらったことだしなんとかしていこうとなっている（なっただけ）。 thisがmixinの中にいる mixinsはプロパティオプションをコンポーネント間で使い回す（マージする）ためにオプション丸ごと外部定義する機能だが、普通に運用していれば
私たちVue.js日本ユーザーグループが、昨年の台風19号の接近に伴い「Vue Fes Japan 2019」の開催中止を決断してから早5ヶ月が経とうとしています。 改めて、参加を予定されていた皆様、スポンサー各社様、スピーカーの皆様、関係各位に多大なご迷惑、ご心配をおかけしましたことをお詫び申し上げます。 この度、時間を要していた興行中止保険の手続きが完了し、スポンサー各社様への協賛金の返金を開始したことをご報告するとともに、その概要についてご説明いたします。 Vue Fes Japan 2019で加入していた興行中止保険は、カンファレンス当日に悪天候または交通機関のマヒが発生した場合、実施に際して支出する費用の一部を補償する契約内容です。よって支出額の満額が補償されるわけではありません。 また、一部支出では同保険の補償対象外とされた費用（海外スピーカー招待のための旅費、宿泊費など）や、
We are happy to announce that we have released v1.0 of Volar, the official IDE/TS tooling support for Vue! 🎉 This major version ships with tons of improvements across the board. In addition to improving UX, performance, and package size, we also released Plugin API v1 and refactored the core code to be framework-agnostic. 注：結尾附有中文版本 (There is Chinese version of this post at the end)。 Earlier this
最近猛烈にスターを集めているビルドツール、Viteを触ってみたので簡単に紹介します。 この記事はVite v0.19.1時点での情報です。 Viteとは？ ViteはVue.jsの作者のEvan You氏が開発中のノーバンドルなビルドツールです。 ネイティブのESモジュールのインポートを利用しバンドル不要で高速に動作するdevサーバーと、Rollup.jsをベースとしたプロダクションビルド機能を提供します。 設定不要で.vueのSFC（Single File Components）をコンパイルできて、さらにデフォルトで今開発中のVue3.0が使えます。 しかも、vue-cliのようにVue.js限定ではなく、React、Preactにも対応しています。 注意 Still experimental, but we intend to make it suitable for producti
2024年5月11日（土）に開催された TSKaigi 2024 のセッションで発表したスライドになります。 Vue3がリリースされ、早くも4年弱経とうとしています、Vue2のLTSも2023年末に終了し、新規開発ではVue3を利用することが主流となってきました。 Vueと並ぶフレームワークとしてReactがありますが、未だにReactと比較される際、TypeScript対応が…という噂がたまに聞こえてきます。しかして、Vue3とTypeScriptの親和性は実際のところどうなのでしょうか。Piniaやその他ツールチェイン側などと共にVue3の機能や実際の実装例とともにVue3とTypeScriptの親和性の疑問を解消できるような発表にできればと思っています。 https://tskaigi.org/talks/karan_corons
この記事はVueを勉強している段階からTypeScriptでクラスベースのVueアプリを作りたい！という方へ向けて例を交えながらvue-property-decoratorの機能を基本と応用、上級の３セクションに分けて説明していきます。 基本では、Vueでアプリを作る上で必須となる機能を、応用では用意されている便利なデコレータを、上級では普通の開発ではほぼ使わない機能について説明します。 とりあえずは基本のみ理解しておけば困ることはないでしょう。 また、最後にnuxt-property-decorator独自のデコレータも紹介しています。 2019/12/09 追記：nuxt-property-decorator独自のデコレータの紹介を追加しました 動作確認バージョン vue-property-decorator v8.4.2 nuxt-property-decorator v2.5.1
ep.39 Vue 3 Study 『Render function で React の世界を覗いてみる』 | UIT INSIDE
@spring_raining と @potato4d が、 Vue 3 の render function についてのアップデート、TypeScript と TSX、Babelに依存しない Vue.js 開発について語りました。 UIT で定期的に実施している Vue.js 勉強会 前回の Podcast: https://uit-inside.linecorp.com/episode/36 Vue 3で変更されるRender Functionの仕様変更 https://github.com/vuejs/rfcs/blob/master/active-rfcs/0007-functional-async-api-change.md https://github.com/vuejs/rfcs/blob/master/active-rfcs/0008-render-function-api-
chibivue について chibivue とは 一言で言うと Vue の一部を自分で作ってみて、Vue の深い理解や本家のコードが読めるようになるオンラインブックです。 「はじめに」の本書の目的部分で詳細に書かれていますが、「Vue とは何なのか？」をステップバイステップでコードを書きながら学べる教材です。 まだ私は基礎編（Minimum Example）のみしか学習していませんが、フロントエンドに関わったことがある身として学習体験が非常に良かったので紹介する記事を書きました。 対象者 chibivue では、「Vue.js を触ったことがある」かつ「TypeScript が書ける」人が対象者となっています。 私はがっつりフロントエンドとして業務に携わった経験は 1 年ほどでしたが、何とか理解できるレベルだったので多くの Vue 経験者は対象者に入るはずです。 また、わからないことがあ
クライアントワーク（受託）のJamstack開発でNuxt 3を提案・実装する / Reject Conference - Vue Fes Japan Online 2022
Reject Conference - Vue Fes Japan Online 2022の登壇資料です。
Vue.jsに関する勉強会「Roppongi.vue #2」が2019年7月31日に開催されました。Vue.jsをさまざまな角度から掘り下げ、知見をシェアします。トークセッション 「最近のフロントエンドぶっちゃけどうっすか？」に登壇したのは、フロントエンドエンジニアで活躍するpotato4d氏とkahirokunn氏。昨今のフロントエンド界隈事情をディスカッションします。 最近のフロントエンド、ぶっちゃけどうですか？ tadano：本日はpotato4dでおなじみの花谷さんと、kahirokunn。フリーランスなんですよね？ kahirokunn氏（以下、kahirokunn）：そうです。 tadano：活躍されているエンジニアのお二人をお招きいたしまして、トークセッションをやらせていただこうと思います。テーマは「最近のフロントエンド、ぶっちゃけどうっすか？」。めっちゃ話し言葉ですね（笑）
この記事は、Vue #2 Advent Calendar 2019の4日目。 @nagimaruxxxさんのフロントエンド開発をjQueryからVue.jsへ乗り換えたので比較してみるの次の記事です。 この記事でわかること jQueryからVue.jsにはじめて移行したとき、「thisのなんちゃらを書き換えると動くんだー！」とか「computedって、依存する値が更新されたら自動で更新されてすごい！」というのが感想でした。 今回は、vue-nextという、いわば、「次世代のvue」でそういった「自動で更新されてすごい」がどのように実装されているか、を解説します。 普段Vue.jsを使っている人は、その裏の仕組みに感銘を受けるでしょう。日々の実装を少しだけ、いつもと違う視点で見れるようになると思います。 普段React.jsを使っている人はきっと、Vue.jsを使いたくなることでしょう。 皆
Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】フロントエンド編②｜Yuu's Memo
皆さんこんにちは！！ 前回に引き続き、フロント（Vue.js）側の開発を始めていきます。 前回はVuetifyを利用してカレンダーを表示しました。 また、APIサーバーへリクエストを送り、イベントをカレンダーへ表示するところまでをやりました。 axiosを利用して、Laravelのコントローラーを呼び出し、イベントデータを取得しましたね！！ 前回までの記事はこちらからどうぞ Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】準備編Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】API作成編①Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【Laravel8対応】API作成編②Laravel + Vue.jsでGoogleカレンダーのクローンを作ろう！！【L
More than 4 years have passed since the initial introduction of Vue 3. Many discussions over several RFCs and a lot of influence from other modern frameworks including React and Svelte have shaped Vue to become probably the most powerful and well-rounded framework out there, capable of progressively supporting applications of any scale and architecture. Sounds exciting, right? Well, the truth is f
概要 本記事は、Vue 3 で Options API を使用するためのフラグである __VUE_OPTIONS_API__ を無効化した場合の挙動やバンドルサイズの違いについてまとめになります。 TL;DR Options API を一切使わないプロジェクトなら、Vue アプリケーションの バンドルサイズを 5.49kB 削減 できました (gzip なら 2.14 kB) バージョン情報 vue 3.2.45 vite 4.0.2 @vitejs/plugin-vue 4.0.0 rollup 3.8.0 Options API と Composition API Vue 3 のコンポーネントスタイルには、 Options API と Composition API の2種類があります。 前者は Vue 2 時点での基本スタイルで、オブジェクトにコンポーネントの挙動を示す各フィールドを
はじめに こんにちは！ クラシルWebのフロントエンドを担当しているall-userです。 今回は、とあるプロジェクトをVue 2からVue 3に書き換えてみたので、その過程と所感についてまとめたいと思います。 この記事はdely #1 Advent Calendar 2020 14日目の記事です。 adventar.org adventar.org 昨日はfunzinさんのCarthageで生成したframeworkの管理でRomeを導入してみたでした。 元々使用していたcarthage_cacheをRomeに置き換える過程が分かりやすく解説されています。ぜひこちらも覗いてみてください🙌 さて、今回題材に選んだプロジェクトは小規模なVue 2で書かれたアプリケーションですが、そのスタック構成はかなりクラシルWebに近いものとなっており、今後クラシルWebへの導入を検討する上での良い足が
Webページやスマホアプリにスクロールのアニメーションを実装したり、特定の地点までスクロールしたらイベントをトリガーにしたりする際は、JavaScriptのライブラリを使用するのではなく、Intersection Observerが非常に簡単で便利です。 Intersection Observerを使用して、Vue.jsでスクロールイベントをトリガーする方法を紹介します。 How To Trigger a Scroll Event in Vue.js With the IntersectionObserver by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Intersection Observer APIで何ができるか IntersectionObserverのコンポーネント 終わり
はじめに こんにちにんにん、 art です。 僕が所属するレバテック開発部では、最近デザインシステム『VoLT』が誕生しました。 レバテックでは複数のプロジェクトが運用されており、フロントエンドの技術スタックは Vue.js × Nuxt React x Next.js の２つが採用されています。 ですので、両方の技術スタックに対応したデザインシステムを作る必要があるわけですね。 あら大変。_(:3 」∠ )_ というわけでこの記事では、『VoLT』のUIコンポーネントライブラリを制作するにあたり、肝となったデザインシステムのマルチフレームワーク対応についてお話しします。 🔗そもそも『VoLT』とはなんぞや？構築の背景は？と気になった方は、こちらをご覧ください！ 想定読者 デザインシステムに興味のある方 これからデザインシステム関連の業務に携わる方 すでにデザインシステム関連の業務に携わ
今日は週末に勢いでGIFアニメ生成アプリを作ったので開発の流れ＆技術的なポイントを共有します。ソースコードも全て公開しているので、ご自由に流用して遊んでみてください。 作ったもの アプリ： https://fulful.web.app/ ソースコード : https://github.com/yuneco/fulful 珍しく、ちょいバズりました（※当社比） ふるふるふるえるGIFアニメを生成できるWebサービスをリリースしました！あそんでみてね #フルフルネコチャンhttps://t.co/x49XIjEBuN — ゆき (@yuneco) May 10, 2020 この記事で書くこと ちょっとした個人開発アプリを短期間でリリースする流れ＆ポイント 技術解説：SVGフィルタの作り方 技術解説：ブラウザでGIFアニメを生成するアプリの作り方 なお、このアプリはもともとお仕事で↓の記事を書く
現場に残る Vuex の map ヘルパーのコードベースを消し去り、 Vue 3 時代の型に追従するための CLI ツールを TypeScript Compiler API で実現する - Qiita
現場に残る Vuex の map ヘルパーのコードベースを消し去り、 Vue 3 時代の型に追従するための CLI ツールを TypeScript Compiler API で実現するJavaScriptNode.jsTypeScriptVue.jsVuex はじめに Vue.js 製アプリケーションのレガシーコードベースにおいて、頻繁に課題となるのが mapGetters のような map ヘルパーのメソッドです。 これらはショートハンド的に使えて過去には便利なケースもありましたが、現在ではほとんど利用されることもなくなりました。 それもそのはず。現在のフロントエンド開発の主流となる言語は JavaScript ではなく TypeScript となっています。しかし、 map 系ヘルパーはその構造から任意の文字列を受け取った上でオブジェクトに影響を及ぼす形となっており、根本的に型システム
「Nuxt.js」の基本、「Vue.js」の利用方法を知ろう
本連載では、Webページのユーザーインタフェース（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回はVue.jsとNuxt.jsの概要を説明しました。今回はNuxt.jsでUI構築に利用するVue.jsについて、基本的な利用方法を説明します。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の機能を追加して、まとめて提供するフレームワークです。そのため、Nuxt.jsの機能を使いこなすためには、まずVue.jsの利用方法を知っておく必要があります。 Vue.jsでは、データとWebページの表示を関連付けるデータバインディングやイベント処理、条件分岐や繰り返しなど、動的なWebページを
フロントエンドの小林和弘です。 Vue Fes Japan Online 2022 でお話したことを少し掘り下げようと思います。 薬局のかかりつけ化支援サービス kakari の Vue3 対応の方針についてのお話です。 （Vue2 の LTS 終了まであと 1 年なので「もう Vue3 対応が終わっているよ」というサービスも多いかと思いますが、kakari はこういう方針でやってるよというお話をします） Vue3 の障壁 kakari では開発初期から、class ベースで Vue の SFC（Single File Component）を書くことができる vue-property-decorator というライブラリが導入されていました。 このライブラリは開発があまり活発ではなく、Vue3 への対応が行われるか怪しい状況にあり、Vue2 から Vue3 へ migration するとき
One of the first questions that arise when starting with the new Vue Composition API is ref() or reactive()? The initial instinct is to use ref() for primitives (Boolean, String,…) and reactive() for objects. But there is more to it. When to Use ref() and When to Use reactive()?The Downside of Using ref()Is Mixing ref() and reactive() a Good Idea?When to Use ref() and When to Use reactive()?Let’s
はじめに JavaScript フロンエンドフレームワークは 2014 年ごろから本格的に使用され始め、従来のサーバーサイドテンプレートに対し、現代では一般的な Web 技術としてすっかり定着し、シェアとしては React、Vue が 2 強状態になっています。本稿では、最初に過去から現在の状況を俯瞰した後、React と Vue の関数コンポーネントを使用して、同じ画面と機能を持つコードの書き方を比較していきます。 過去から現在の状況 フロントエンド MVC の衰退 10 年前、フロントエンド MVC を標榜していた Angular や Ember は低迷し、以降のフレームワークはもはや M とか V とか MV なんたらなどのレイヤーを言及しなくなり、ビュー + イベント + ステートを 1 つの責務としてまとめた直感的で分かりやすいコンポーネント指向となりました。以下は State
Migrating from Vue 2 to Svelte
Svelte offers a better typing experience with easier components' designing processes and built-in typed events, making it very user-friendly for us. Restricted global access. With Svelte, it is possible to import enums from other files and use them in the template, which is not the case for Vue 3. Escape Benchmark about frontend stackSyntax. Personally, I find Svelte syntax more elegant and user-f
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 3 速習シリーズ』：最速のVue3本＆変更点所感 - Rのつく財団入り口
最速のVue.js 3 本！ 2020年9月19日にメジャーリリースされたフロントエンドJSフレームワーク、 Vue.js バージョン3.0を扱った最速の本。技術書では安心の山田祥寛さんの手軽に読める速習シリーズです。本エントリでは本の感想とv2→v3の主な変更点を書いていきます。 最速のVue.js 3 本！ Part 1: イントロダクション Part 2: Vue.jsの基本 Part 3: イベント処理 Part 4: フォーム開発 Part 5: 条件分岐とループ Part 6: もっとデータバインディング Part 7: コンポーネント Part 8: もっとコンポーネント Composition API テンプレート配下のコンテンツを別の場所に表示するTeleport 非同期処理の待ちメッセージを表示するSuspense Part 9: ディレクティブ／プラグイン Part
なぜ、Vue Composition APIを使うのか、理解する【メリット/デメリットまとめ】 - Qiita
はじめに Vue3のリリースが迫ってきました。 順調に行けば、公式リリースは8月上旬のようです。楽しみですね。 Our current target dates are mid July for the RC (release candidate) and early August for the official release of 3.0. https://github.com/vuejs/rfcs/issues/183 Vue3の目玉の機能として、「Composition API」があります。 この記事では、「”なぜ” “なんのために” Composition APIを使うのか」理由について、まとめています。 「Composition APIの使い方」についての説明は、この記事では割愛します。 以下の記事に、具体的なComposition APIの使い方とProviderパターンに
vue.jsを含めフロントエンドの技術を学び始めるとライフサイクルという言葉を目にする機会が増えてきます。私がそうであったようにvue.jsを含めJavaScriptのフレームワークに触れたことがない人にとってはライフサイクルというものが一体何なのか理解するのが最初は非常に難しいと思います。最初はライフサイクルの中で行われているすべての処理を理解しようとせず利用頻度の高いcreated, mountedで何が行われるのかということと2つの区別がはっきりつけばライフサイクルの理解が進みます。本文書ではvue.jsのライフライクルフックcreatedとmountedの違いを要素elを使って説明していきます。要素elの説明は後ほど出てくるので安心してください。さらにVue3のOptions APIとComposition APIを利用してcreated, mountedの動作確認を行っています。
2019年はWebComponents元年(2回目)！WebComponentsをReact/Angular/Vueと一緒に使う - Qiita
2019年はWebComponents元年(2回目)！WebComponentsをReact/Angular/Vueと一緒に使うAngularVue.jsWebComponentsReactserver-side-rendering WebComponentsは未来の技術みたいな感じでしたが、lit-elementが登場してかなり作りやすくなりました。ただ、実際のウェブアプリケーションで使うにはどんな感じになるのかな、というのを脳内シミュレーション＆実験してみましたので、それの記録です。 この記事自体は5月ごろに書いて放置したのですが、JSConfで発表したのでそれに合わせて公開します。 本記事の想定ストーリー かっこいい部品を作りたいデザイナーさん、もしくは社内的なデザインガイドラインがある。ホストのフレームワークがなんであるかは気にしないで、とりあえずデザインを作り込みたい 管理画面は
この記事はBASE Advent Calendar 2020の2日目の記事です。 devblog.thebase.in こんにちは、BASEのフロントエンドチーム エンジニアの加藤です。 先日、弊社松原のこちらのブログにて、「既存のVue.jsによる資産は積極的にメンテナンスしつつ、その時その時で総合的に判断して最適な技術を選定する」スタンスで我々は考えているということをお話しました。直後にVue.js 3.0の正式リリースがあり、アップデートに関して実際に取り組みを始めています。 現在イメージしている流れ 現在、BASEのサービスで使われているバージョンは2.6系で、そこからのアップデートということになります。 現在利用しているVue.jsに依存したUIライブラリやバリデーションライブラリも3系対応で大きくAPIが変わることが予想され、一気に全ての使用箇所でバージョンをアップデートするこ
vue-interactive-paycardはVue.jsを使ったクレジットカード情報入力フォームです。上は動作サンプルです クレカのカード会社自動認識も可能で、スムーズでインタラクティブに動作します。カード情報は一部伏せられる親切設計です よく見るUIですが、動きが好みでユーザーにも分かりやすい印象だったので備忘録。MITライセンスの元、ソースコードが公開されています vue-interactive-paycard
Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応
Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応 GoogleはすでにリリースしているWebブラウザのChrome 110と現在開発中のChrome 111に搭載されているDevToolsで、Angular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応したことが明らかになりました。 2月16日付けで公開されたブログ「What's New in DevTools (Chrome 111)」では、Chrome 111で、Angularのシンタックスハイライトに対応したことが「Better syntax highlight for Angular」の項目で紹介されています。 下記のサンプルでは、例えば2行目のダブルクオーテーション内の値などがAngul
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js 3 の TSX を TypeScript Compiler だけで動かす方法について
Vue.js
Vue3 について語る会をした - ROXX開発者ブログ
【vue.js】Vuefityをマスターする(1) | アールエフェクト
【Vue.js】コンパイラってよく聞くけど一体全体なんなんだ！？！？！？
Vueのmixinsはなぜ辛かったのか - うしろのこの本ください
Vue Fes Japan 2019に関するご報告｜kazupon
Volar 1.0 "Nika" Released! | The Vue Point
【Vite】 Vue3.0もReactも！ノーバンドルなビルドツール「Vite」を試してみる - Qiita
サービス開発におけるVue3とTypeScriptの親和性について
はじめてのvue-property-decorator (nuxtにも対応） - Qiita
年末年始に「chibivue」でVueヂカラをつけた
最近のフロントエンド、ぶっちゃけどう？ 第一線のエンジニアたちが語るVue.jsでの開発事情
きたるべきvue-nextのコアを理解する - Qiita
Vue 3 was a mistake that we should not repeat
Vue 3 で Options API を無効化するという選択肢
Vue 2で書かれた個人プロジェクトをVue 3に書き換えてみた - dely Tech Blog
Intersection Observerを使用すると実装が簡単に！Vue.jsでスクロールイベントをトリガーする方法
デザインシステムをマルチフレームワーク(React/Vue.js)に対応させてみた
VueとSVGでGIFアニメ生成アプリ作ったのでソース全公開＆解説 - Qiita
Vue3 に向けて取り組み続けていること - メドピア開発者ブログ
Vue 3 Composition API: ref() vs. reactive()
ReactとVueの比較 | 完全に同じアプリのコードの書き方の違い - Qiita
vue.jsのcreatedとmountedの違いを目で見て理解 | アールエフェクト
Vue.js 3 アップデート対応の現状報告 - BASEプロダクトチームブログ
Vue.jsを使ったクレジットカード情報入力フォーム・「vue-interactive-paycard」