Quasar vs. Vutify vs. Bootstrap Vue: Choosing the Right Vue.js UI Library
Photo by Nick Fewings on UnsplashOver the past few years, Vue.js has stepped up firmly, becoming a strong contender to compete with Angular and React. If we look at Vue’s growth, it relates to the framework’s simplicity, and availability of libraries, components, and learning materials to strengthen the ecosystem. Besides, Vue also comes with a good set of UI component libraries to choose from. Th
🎄こちらは kintone Advent Calendar 2020 25日目の記事です🎅 今年もたくさんの記事ありがとうございました！！ おかげさまでPart2まで広がっています！！ 今年はPart2は埋まらなかったけど・・・ これはアドベントカレンダーのオーナーとしてあとで全部埋めておくべきか・・・ 怒涛のQiitaラッシュが始まる・・・ はじめに 2年前に投稿した Chrome拡張の作り方 (超概要) が、今でも定期的にいいねもらえている状況でして、ふと、 またChrome拡張関連の記事書けばいいね貰えるのでは・・・ という不純な動機でこの記事書きますw しかもVue.jsというこちらも人気のやつで、「いいね物乞いだ！」と言われても否定できません(￣ー￣)ﾆﾔﾘ でも真面目に記事は書きますよ！ つくったもの（はいけい） kintoneのスレッドは標準でいろいろと文字のデザインとか
Vue.js is a JavaScript library that helps you build web applications using the MVVM (Model-View-ViewModel) architectural pattern. Evan You, an ex-Googler, developed the project. It is a strong open-source project with high usage popularity and GitHub stars and forks. Why Use VUE.js?As we know, there are many frameworks on the market, and choosing the proper framework for the project can be challen
正式リリースされた二つの機能 本連載は、フロントエンドフレームワークVueのアップデート内容を紹介しているものです。今回は、2023年12月にリリースされた3.4、および、2024年9月にリリースされた3.5の内容をまとめて紹介します。 3.4、3.5ともに、SFCのビルドの改善やリアクティブシステムの改善など、パフォーマンス面での改善もかなり行われていますが、こういった目に見えない部分だけでなく、目に見える機能面でもいくつか新しいものが導入されています。 その中から最初に紹介するのが、以前は実験的リリースだった機能が正式リリースとなったふたつの機能です。実はこれらの機能は、第1回ですでに詳細に紹介しています。 正式リリースとなったdefineModel() ひとつめは、defineModel()マクロです。これは、v-modelによる新しい値の自動格納の仕組みを簡潔に記述できるようにした
お疲れさまです。POTTIRIです。 ダイエットですが、体重が一向に減りません。 3ヶ月ぐらい停滞してるんじゃないかなー。 まあでも、身体の方が引き締まってきてるのでいいのかな。 さて、僕が作った爆弾パズルですが、 ブログなどに埋め込めるように作ってます。 今日はその話をします。 今日のステージ 爆弾パズルははてなブログに埋め込めます 何かを組み合わせることしかできない 外側のサイトをゼロから用意したのはセキュリティの問題 今日のステージ 今日はこちらです。 敵を動かせるようになったのをいいことに、 タイミングを測らないとクリアできない面を作りました。 最初は？？？と思うかもしれませんが、敵が一直線に並ぶ瞬間がある！ というつもりで作ったのですがいかがでしょう。 他の面はこちらにあるので、万が一興味を持たれたらサイトを訪れてください。 blast.pottiri.tech 爆弾パズルははて
mountedはここでは理解する必要はない。 DOM要素がマウントされ画面が描画され、再描画される準備が整ったところと思っておけば良い（たぶん） つまり objに "b" のキーを新規で追加したので { "a": "A: OK", "b": 0 } となることを期待したコードだ。 しかし、実際は次の表示になる。 { "a": "A: OK" } これがリアクティブではない状態だ。初心者が躓く箇所である。 なぜ"b"は描画されないのだろうか。 デバッガで確認する 画面上はまだ"a"しか表示されていない状態でvueのデバッガを見てみる。 objはどうなっているだろうか(デバッガの使い方が分からなければconsole.log(obj)でもよい) 間違いなく"b":0も追加されている。 しかし、画面には描画されていない。 リアクティブにするには これは公式の「リアクティブの探求」ページに記載されて
【Vue 3】Vue 2との違いについて
はじめにNuxtJSをメインに使用していることもあって、執筆時点でも今だにVue 2を使用している筆者ですが、 Nuxt3がRC版になったということでようやく重い腰を上げてVue 3を触っていきたいと思います。 この記事では、Vue 2からVue 3への変更点について、いくつかピックアップして紹介していきます。 参考：はじめに | Vue.js 導入Vue 3の導入（インストール）については公式ドキュメントを参考にしてください。 参考：インストール | Vue.js 導入方法自体は変わらないと思います。 CLIについては、Vue 2と同様に公式のVue CLIが提供されていますが、 Vue 3からはViteというツールも使用できます。 Viteについては割愛しますが、Vue CLIよりもビルドがかなり速いため、快適に開発を進めたい方にはおすすめです。 筆者も簡単にしか試したことがないので、
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Laravel9のバージョン9.2からデフォルトのビルドツールがWebpack(Laravel Mix)からViteに変更になりました。Viteはフロントエンドツールとして現在爆発的に人気のあるツールでViteを利用することでフロントエンド開発のスピードを加速させることができます。対象対象はLaravel、Reactを利用した経験がある人なのでLaravel, Reactについての細かな設定は含まれていません。対象はLaravel、Vue.js 3を利用した経験がある人なのでLaravel, Vue.jsについての細かな説明は含まれていません。 Vite環境でVueを利用するためにはいくつかの追加設定が必要なので本文書ではその手順について説明を行っています。 Laravel + Vite + Vue.js 3環境の構築に興味がある人はぜひ参考にしてください。 Laravelプロジェクトの作
Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。 JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
スタディスト開発ブログ Advent Calendar 2021の20日目の記事です。本日は技術支援ユニットの笹木(@s_sasaki_0529) が、開発環境で Rails を立ち上げずに、リモートAPIサーバに接続してフロントエンド開発を行えるようにした話をします。 TL;DRSPA なのに Rails と Vue が密になってるアプリケーションを開発してるせめて開発環境ぐらいはフロントエンド単体で開発できる状態にしたい様々な問題を対処し、理想のフロントエンド開発環境を実現したTeachme Biz の現状のアーキテクチャスタディストが開発・運用する、マニュアル作成・共有システム Teachme Biz は、Vue.js (≠ Nuxt.js) によるフロントエンドと、Ruby on Rails によるバックエンドで構成されています。
コンポーネントディレクトリ
コンポーネントディレクトリ components ディレクトリには、Vue.js コンポーネントが含まれています。コンポーネントは、ページのさまざまな部分を構成するものであり、再利用して、ページ、レイアウト、さらには他のコンポーネントにインポートすることができます。 データの取得 コンポーネントの API から非同期データにアクセスするには、fetch() を使用できます。 $fetchState.pending をチェックすることで、データがロードされるのを待っている時にメッセージを表示することができます。$fetchState.error を確認し、データの取得中にエラーが発生した場合はエラーメッセージを表示することもできます。fetch() を使用する場合、data() で適切なプロパティを宣言する必要があります。フェッチから取得したデータは、これらのプロパティに割り当てることができ
【GitHub Copilot】GitHub Copilotを使ってVue.jsでTodoリスト作成RTAしてみた - Qiita
はじめに 先日GitHub Educationの申請が通り、その特典がスゴすぎてTwitterで大騒ぎしていたのですが、唐突に「そういえば、GitHub Copilotって学生だと無料じゃないっけ...?」と思い至り、実際無料だったので「そうだ！GitHub CopilotでコーディングRTAしよう！」となったのでついでに記事にしました。 結果は...まぁお察しください。 GitHub Copilotの導入 これは本編じゃないので備忘録程度に画面のスクショそーい！ あとはこのドキュメントを見ながらVisual Studio Codeに拡張機能インストール！ 自動的に候補を提示してくれた！ RTAの事前準備完了！ Todoリスト作成RTA 要件として、なんとなくTodoリストとしての体裁であればよしとします！ ゆるゆるレギュレーションですが早速やっていき！ 開始1分時点。 「<」を入力した時
はじめに こんにちは、つきやま です。 ブラウザで動くシンプルでミニマムなドット絵作成サービスを個人開発で作ったので記事にまとめたいと思います！ どんなサービス？ この記事のタイトルの通りブラウザで動くシンプルでミニマムなドット絵作成サービスです。 コンセプトとして気軽にドット絵を描けるサービスにしたいと思い、１ページで完結するサービスにしました。 描いたドット絵を画像保存できます。 保存した画像は SNS のアイコンとしてつかったり、Slack や Discord で絵文字としてもつかえます。 なぜ作ったのか？ 結論から答えると自分がつかいたかったからです。 ブラウザで動くドット絵作成サービスは既にいくつかあります。 ドット絵に興味を持ち使ってみたのですがドット絵初心者には機能が多くて分かりづらかったので、自分が思う「こうだったらもっと良いんじゃないか」を盛り込んだサービスを作ってみまし
Vue Routerを使ってURLを動的に制御する方法
Vue Routerは、Vue.jsの公式ルータで、ルーティング制御をするためのさまざまな機能を利用することができます。
2019年7月31日、Vue.jsに関する知見を共有する勉強会「Roppongi.vue #2」が開催されました。Vue.jsをさまざまな角度から掘り下げるライトニングトークには4人が登場。「Reg suitで始めるお手軽画像差分テスト」に登壇したのは、おとべ氏です。登壇資料はこちら Reg suitで画像差分テストおとべ氏：おとべです。このタイトルでLTしようと思うんですけど、ちょっとお気づきの方いらっしゃるかと思いますけど、スライド68枚あって大変で、5分じゃ収まりそうになりないので、マジでライトニングにすっ飛ばしつつ進めたいと思います。 自己紹介です。おとべです。僕も読み方がわからないIDでTwitterやGitHubとか全部やっているので、よかったら見てください。 また、ゆめみですね。出ました、ゆめみ。「全員CEO」とか「有給取り放題」とかいろいろ言ってるんですけど、僕はまだア
productionで DOMException: Failed to execute | Tetsuya Koibuchi Site
vue productionで DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method. Home › Memo › productionで DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
お疲れさまです。POTTIRIです。 毎日毎日プログラムを書いてますが、 自分の理想とするプログラムが年齢と共に変わってくのを感じます。 今日はそんな話です。 今日のステージ 格子模様つけてみました ２０代の頃の理想 ３０代の頃の理想 現在の理想 今日のステージ 今日はこちらです。 昨日作ったステージを嫁に見せたところ、 もっともーーーーっとシンプルな面いいということなので、 こんな感じにしてみました。 こ・これでいいのかなあ？ （ていうか爆風が重なりすぎて処理オチしてる・・・） 長男にやらせてみよう。 どんな反応するかな？ 他の面はこちらにあるので、万が一興味を持たれたらサイトを訪れてください。 blast.pottiri.tech 格子模様つけてみました 今までステージのマス目が真っ白だったので、 ちょーっと寂しいかなーっていうことで格子模様にしてみました。 爆弾パズルはマス目を一定に
こんにちは。てぃろです。 今回はVue.jsで作ったフロントを多言語化し、日本語と英語を切り替えできるようにした話です。Vue I18nというモジュールを使用して、Vue.jsのアプリを簡単に多言語化できました。 本記事は個人的に開発したVueSlsAppというサーバーレスアプリフレームワークへ修正を入れていった過程をもとに、基本的な導入方法から独自に工夫した点も含めて解説しています。 デプロイしてあるので、以下のリンクから実際にアプリを触ってみてもらえます。（多言語済） https://vueslsapp.thiroyoshi.com/ VueSlsAppのことをご存じない方は、以下の記事を参照してみてください。
さてさて、Vue 3が登場してから少し時間が経ちました。基本的には前回バージョンと同じ構成になっているので、移行はそれほど手間取ることはないと思います。 ※ ただし、Laravel + npmでVue 3を使おうとするとシングル・ファイル・コンポーネントがうまく処理できないので個人的にはガンガン使ってません💧これは、Laravel Mix 6で対応するとのことです。 そして、そんなVueで今回作ってみるのが、 入力候補から選択できる機能 です。 例えば、次のようなカンジですね。 というのも、「めんどうな入力をできるだけ省略したい」というのは誰でも要望が高いでしょうし、特に毎日の業務で使う場合は「またおんなじ入力かよ・・・」とうんざりするはずだからです。 そして、そんなときに思い出したのがHTML 5の<datalist></datalist>です。（これ、すっかり忘れてました😂） 入力
Framework7 日本語サイト - iOS、Android、デスクトップアプリケーションを構築するためのフル機能フレームワーク
Framework7 - は、ネイティブなルック＆フィールを持つモバイル、デスクトップ、またはウェブアプリケーションを開発するためのフリーでオープンソースのフレームワークです。また、必要に応じてアプリのプロトタイプをすぐに表示できる、不可欠なプロトタイピングツールでもあります。 Framework7が提供する魅力的なUIコンポーネントのセットを使えば、ウェブアプリ、プログレッシブウェブアプリ（PWA）、iOSおよびAndroidアプリをネイティブなルック＆フィールで作成することができます。 また、ElectronやNW.jsなどの追加ツールと組み合わせることで、ネイティブなデスクトップアプリを構築することができます。 Framework7では、お好きなツールをお使いいただけます。HTML、CSS、JavaScript以外の使用を強制されることはありません。Framework7でアプリを作る
追記 最近では型安全にグローバルステートを扱える Pinia が登場しているので新規で使う場合は先にそちらを検討するのが良いと思います。一方、Vuex からのマイグレーションは結構大変っぽいので、既存の Vuex リソースで型付けをしたいと考えているならこの記事で紹介している vuex-typing やその他の選択肢も選択肢になりそうです。 Vuex を仕事で使う機会がありそうなので勉強していたんですが、型付けのサポートが不十分で不満があったので型付けするためのヘルパーライブラリを作りました リポジトリ: https://github.com/d-kimuson/vuex-typing npm: https://www.npmjs.com/package/vuex-typing Vuex の型定義が不十分 アプリケーションがいずれ肥大化することを考えれば、はじめからモジュールに分けて管理す
ReactやVueやAngularといったフロントエンドフレームワークを用いたWebアプリケーションにもソースコード盗用から守る対策は必要ですか？
回答 (5件中の1件目) フロントは、ソースコード盗用から守る対策は、なーんもだれも行っているのをみたことないです。 (ミニファイくらいはみんなやってます。) 守るべきはデータであり、それを活用する仕組みのソースコードは、盗んでもうまくうごくように調整することすら難しすぎ、 オープンソースとして優れたコードがあるので、それらの価値の方がよほど高いので、 普通のウェブアプリから盗む価値は全くないです。 また、コード上隠蔽したいものはサーバーサイドで行われるので、そこに任せる、みたいな感じなので、コード盗用とはフロントは無縁だったりします。 気にするべきセキュリティの問題は他にあ...
背景 筆者は実務で約1年半Vue.jsの開発をしています。Reactは記事でも見ることが多く、SPAといえばReactが一番に出てくるけれど、Reactを一才触ったことがなかったです（結局リアクティブだからそんな違いはないだろうと思うのもあってあまり触っていなかった）。とはいえ、よく聞くReactを一切触っていないのも怖く、その勉強がてらチュートリアルをやってみました。以下の比較は主に、Vue.js options API と React Hook を比較しています。 筆者はReactについてほとんど知らないです。（クラスコンポーネントと関数コンポーネントの違いを最近知ったくらい） Reactのチュートリアルが新しくなっていました。React hookを前提とした内容になっています。 チュートリアル：三目並べ – React 親コンポーネントのデータ書き換え Vue.jsで親コンポーネント
こんにちは。 現役の教員エンジニアを名乗っています。りゅーそうと申します。 普段わたしは、React.jsを使ってフロントエンドのコードを書くことが多いのですが、今回Vue.jsに初めて入門してみました。その際に心がけたことやTipsを紹介したいと思います。 何か間違っていることを書いていたらぜひ教えていただけると嬉しいです。 やりたいこと Vue.jsではスタンダード(とされているような気がする)SFCを使用して書きたい。 TypeScriptを使用してなるべく型安全なプログラミングを導入したい。 templatesにも型の情報を元に補完を聞かせたい。 Vue3を対象に解説していきます。 使用エディタはVSCodeです。 Veturを使用してtemplatesでも型チェックをする 早速ですが、VueのSFCではReactのJSX記法とは異なり、templates部分では型の情報を与えるこ
Vue2時代にTypeScriptを使う場合は Vue Property Decolator（Vue Class Component）か，Vue.extendでした． 正式リリースからもうすぐで1年経つVue3ではTypeScriptとの親和性が向上し，Class Componentの必要性は薄れてしまいました．しかし，どうやらVue3でもClass Style Componentが使えそうなので試してみました． Vue CLIでプロジェクト作成$ vue create sample Vue CLI v5.0.4 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors,
[Amazon Lex] AWS Amplify + Vue.js でWebページにボットを追加してみました | DevelopersIO
1 はじめに CX事業本部の平内（SIN）です。 AWS Amplify（以下、Amplify）では、UIツールキットの１つに、チャットボット機能が提供されています。 INTERACTIONS Chatbot こちらを利用すると、Webページなどに簡単にチャット機能を追加することが可能です。 Amazon Lex（以下、Lex）も最近、日本語に対応したので、利用される場面も広がっているだろうという事で、ここで手順を確認してみたいと思います。 Amazon Lex が日本語に対応。東京リージョンでお使いいただけますhttps://aws.amazon.com/jp/blogs/news/amazon-lex-tokyo/) Lexのボットは、テンプレートにあるOrderFlowerをそのまま利用した、下記のものを利用しています。 また、ユーザー認証は省略し、Cognitoの未認証IDに、最低
![[Amazon Lex] AWS Amplify + Vue.js でWebページにボットを追加してみました | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/ad3def86c56b7328cc1dcb9cc661071a305a4601/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F05%2Famazon-lex.png)
Vue.jsでのグローバル定数管理を工夫してみた話 - MicroAd Developers Blog
システム開発本部フロントエンドエンジニアの工藤です。 マイクロアドの WEB アプリケーションのフロントエンドは、大半を Vue.js を用いて開発しています。 そこで、フロントエンドエンジニアとして効率の良いVue.jsの開発を目指し、日々奮闘しています。 今回は、Vue.jsでのグローバル定数管理についてお話していこうと思います。 はじめに マイクロアドには様々なプロダクトがありますが、私の担当しているUNIVERSEというプロダクトについては、 フロントエンドフレームワークにVue.jsを利用し、SFCを採用しています。 Vue.jsやSFCについては、以前の記事を参考にするとより詳しく理解頂けると思います。 developers.microad.co.jp また、props down、 events upの思想にならいながらコンポーネントの細分化を行うことで開発効率上昇やUIの統一
Slides for Vue Fes Japan 2023
Vue Fes Japan Online 2022 に登壇 & 参加しました - 弁護士ドットコム株式会社 Creators’ blog
こんにちは。クラウドサイン Product Engineering 部です。 今回 Vue Fes Japan Online 2022 にてプラチナスポンサーとして参加させていただきました！ 本記事は登壇させていただいた「Design System Meets Vue.js」の紹介をしつつの Vue Fes Japan Online 2022 全体の参加レポートとなります。 なお各セッションのアーカイブは以下にございますので、見られていない方はぜひご覧ください。 メドピアトラック FUTURE トラック クラウドサイントラック Design System Meets Vue.js エンジニアリングマネージャーの芳賀です。 今回はクラウドサインとデザインシステムの成長にフォーカスをあてて発表させていただきました。 デザインの管理系ツールとフロントエンドの管理系ツールの組み合わせは膨大にあり、
Vueのpropsの使い方 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
概要 自作のNuxt.jsはSSRモードでfirebaseにホスティングしようとネットで方法を探してました。 見つかった記事は2019の物でちょっと古くて（実際その通りやったら詰んでしまう）困ってました。 そこでこの記事とこの動画を参考になんとかデプロイできました。 でもどれも英語だったのでせっかくなので日本語の記事を書こうと思った次第です。 手順を見たくない方へ このボイラープレートをそのまま使う。 手順1 新規Nuxtアプリを作成する 注意 nuxt本体のソースコードを管理しやすいために/srcの中に入れてますが、そうしなくても良いです。ただ後述のfirebase.jsonのpredeployの設定をご自身のパスに合わせて修正してください。 手順2 まずfirebaseでアカウントを申請し、新規プロジェクトを作成してください。 nodeバージョンを10以上を使うため、プランはblaze
Are you new to the Nuxt.js framework and totally overwhelmed by the number of folders it comes with? Are you also surprised that most of them are empty with just the readme file in them? Well, that’s where I was little over a year ago. Since then, I’ve always wanted to learn and document the magic that each folder brought into the Nuxt project. And now, after implementing a few projects with this
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://slides.nahoko.dev/v-tokyo-16-nuxt-3-migration/1
kintoneのスレッド投稿がスマートになるChrome拡張をVue.jsで作る - Qiita
Guide to Lifecycle of Vue in VUE.js
Vue.js3.4～3.5の新機能をまとめて紹介！ 新しいAPIやSSRの改善
作ったゲームはブログに埋め込む - POTTIRI'S AUTOBIOGRAPHY
【Vue.js】オブジェクト(連想配列)をリアクティブにする | 謎の技術研究部
Vue.jsでファイルアップロードの実装--ついでにプレビュー機能も実装した話-- - Qiita
Laravel9のVite環境でVue.js 3を利用する方法 | アールエフェクト
【Vue.js】子コンポーネントのmounted後に処理を実行したい
Rails と密なフロントエンドの開発環境を分離するための3つの工夫
ブラウザで動くシンプルでミニマムなドット絵作成サービスを作った話
Vue.jsユーザーに贈る、Reg suitを使った画像回帰テスト | ログミーBusiness
年齢と共に理想は変わっちゃった - POTTIRI'S AUTOBIOGRAPHY
Vue.jsのフロントをVue I18nで多言語化してみた - 実装の工夫や注意点も解説 | thilog
Vue + datalist で簡単に入力候補を有効にする（デモページあり）
Vuex 4 に型付けするための vuex-typing を作った
Reactチュートリアルをやってみて分かったVue.jsとの違い - Qiita
VuejsとTypeScriptで快適にコーティングをするTips
Vue3でもClass Style Componentが使えそう｜しゅねい
Deep Dive to UnJS and Nuxt 3
【Nuxt.js】Nuxt.js SSRモードでfirebaseにデプロイする手順 2020年版
Vueでフロント実装してみる｜VueとGASでつくる！サーバーレス家計簿📔
Universal application code structure in Nuxt.js
hina10.lo.gob.jp
yukimi.dt.weblog.vc
akari0.ub.geo.jp
share.google
note.com/china_hase
www.tohoku.ac.jp