Electron製動画再生プレイヤー「DMM Player v2」 - DMM inside
｜DMM inside
｜DMM inside
とあるWeb制作会社にて ワイ「ハスケル子ちゃん」 ハスケル子「はい」 ワイ「今日ワイは何の仕事するんやったっけ？」 ハスケル子「確か今日からは」 ハスケル子「Nuxt.jsとVuetifyを使って管理画面を作る案件が始まるんじゃなかったでしたっけ？」 ワイ「おお、せやった」 ワイ「とある管理画面のフロントエンド開発をするんやったな」 ハスケル子「もうFigmaのデザイン見ましたか？」 ワイ「ヒグマ？」 ワイ「ヒグマなんて、写真でしか見たことないけど」 ハスケル子「Figmaです」 ハスケル子「ブラウザ上でも使えるデザインツールですよ」 ワイ「ああ、そっちな」 ワイ「Higumaのほうね」 ハスケル子「じゃあ、さっそくデザイン見ながら」 ハスケル子「コーディングしていきましょう」 ワイ「おお、頑張っていこか！」 デザインを見てみる ハスケル子「↑このキャンセルボタンとOKボタン」 ハスケル
前書き フロントエンドエンジニアの松原(@simezi9)です。 先日10月30日にクラウドワークスさんをお借りして実施したVue.jsの設計勉強会である、Vue.jsアーキテクチャリング勉強会 にて、 BASEの現在のVueコンポーネントの設計に関して登壇してお話してきました。 全体の資料はこちらです もともとBASEではVue.js+TSを採用した大規模なシステムのリニューアルプロジェクトが2018年からスタートしていました。それにあたっての大まかなフロントエンドの構築方針は以前もblogや外部登壇で発表していました。 次世代の管理画面を作るフロントエンドの取り組み - BASE開発チームブログ 次の5年を支えるVue.js製UIコンポーネントライブラリを育てる これまでの発表では大枠の技術スタックやワークフローの話が多かったですが、 今回はVueコンポーネントの設計が勉強会の主眼にあ
VuetifyはVue.jsのUI(ユーザインタフェース)のライブありでVuetifyを利用することでデザインの知識がなくても効率的に美しいGUI画面を作成することができます。しかし使いこなすためにはプログラミングの知識が必要となるためVuetifyの基本的な使用方法を理解しておく必要があります。 本文書ではVuetifyがマスターできるように実践的なダッシュボードの作成を通して使用方法を確認していきます。 説明は2回に分けて行い、1回目である本文書ではダッシュボードのレイアウトの作成方法とルーティングの設定方法を確認します。本文書を読み終えるとVuetifyを利用して自分の力で下記のダッシュボード画面を作成することができます。 ダッシュボード画面 2回目ではダッシュボードに表示させるグラフコンポーネントを使って、Grid System(グリッドシステム)やResponsive Desig
Vue.js のフォームバリデーションライブラリ VeeValidate を評価してみた | DevelopersIO
【vue.js】Vuefityをマスターする(2)Grid System、Responsive Design | アールエフェクト
コンポーネントの準備 Grid Systemの設定方法を理解するためVuefityで簡易的なグラフを描写することができるSparklinesコンポーネントを利用します。 Sparklinesコンポーネントでグラフ作成 Sparklinesコンポーネントは簡易的にグラフをVuefityで表示させたい場合に利用することができるコンポーネントです。 グラフを表示するコンポーネントを作成するためsrc¥componentsディレクトリの中にSaleGraph.vueファイルを作成します。本文書ではグラフについての説明は行いませんがコードは下記の通りです。1日の売り上げ数をグラフにしています。 <template> <v-card class="mx-auto text-center" color="green" dark > <v-card-text> <v-sheet color="rgba(0
Nuxt.jsでVuetifyを使う(with vue-property-decorator) | DevelopersIO
スクラッチでNuxt.jsをTypeScriptを利用して開発する環境に対して、Vuetifyを使う環境作成の手順を確認したかったので、方法を調べつつ実際に作成してみました。 前回作成した記事（「Nuxt.jsでTypeScriptを使う(with vue-property-decorator)」）で作成した環境に対して、Vuetifyを使う環境にするための方法についてまとめています。 前回と同様に、できる限りミニマムな構成で作成したいのと、自分的には理解のブラックボックス化が進みやすいため可能な限りVue CLIやcreate-nuxt-appは使用したくなかったため使用していません。（より簡単に早く、動くものを作りたい場合にはVue CLIやcreate-nuxt-appの利用をおすすめします。） はじめに 「Nuxt.jsでTypeScriptを使う(with vue-propert
Vuetify を import する main.ts(main.js) 内でもいいですし、 /plugin ディレクトリを作って vutify.ts(vuetify.js) みたいなファイルを作成してもいいです。 ここでは後者の方法で TypeScript で書く方法紹介していきます。 import Vue from "vue" import Vuetify from "vuetify" import "vuetify/dist/vuetify.min.css" // フォント関係 import "@mdi/font/css/materialdesignicons.css" import "material-design-icons-iconfont/dist/material-design-icons.css" // 言語設定 import ja from "vuetify/src/l
本日 Vuetify v2.0.0 Arcadia がリリースされました！ 居ても立っても居られず、早速試してみました！ 個人的注目機能 VColorPicker リファレンス：VColorPicker vue-colorの使用を検討していた身としては、Vuetifyのコンポーネントとして提供されるのはありがたいです。 VFileInput リファレンス：VFileInput こちらも地味にVuetifyに今までなかったやつです。 「ファイルを選択」ボタンのカスタマイズは地味に面倒なので、大変ありがたいです。 VOverlay リファレンス：VOverlay こちらもたまにcssで自力でやっていたので、楽になりますね。 Nuxt.jsでVuetify 2.0を使う 素のvueの場合はvuecliでできるようですが、Nuxt.jsの場合は@nuxt/vuetifyモジュールがまだv2.0.0
ユーザ管理画面のUIをVeutifyのData tableを使って作ってみました。 ほとんどは公式のリファレンスを参考にしました。 https://vuetifyjs.com/ja/components/data-tables 概要 ここまでの経緯 Data tableで作ったものの紹介 ハマったところ 今後の課題 詳細 ここまでの経緯 以前の記事で、RailsでWebAPIを作り、ユーザ情報を管理するテーブルを作成しました。 このフロント部分にあたるものを、Vueで作成しており、今回VuetifyのData tableというコンポートネントを利用して作ってみたので、紹介します。 ソースはこちらに挙げました。 Data table で作ったものの紹介 GIFアニメーションで紹介 まずは以下のGIFアニメをご覧ください。 新規作成から更新、削除、フィルタの操作をしています。 入力フォームのバ
スロットとは スロット(slot)は、Vue.jsにおける親コンポーネントから子コンポーネントにデータを渡す手段の一つです。 スロットという名前はハーデスやリゼロなど様々な機種がある遊技マシン...のことではなく「差し込み口」という意味で使われています。 つまり、コンポーネントに外からコンテンツの差し込みを受け付けるという目的で使用されます。 スロットはその性質上、再利用の高いコンポーネントによく使用されます。再利用の高いコンポーネントは、Atomic DesignにおけるAtomのようなものが代表されます。 まずはさっそくスロットの基礎的な使い方を見ていきましょう。 スロットコンテンツ スロットを使用コンポーネントとして、汎用的に利用する削除ボタンを実装します。 コンポーネントの内容は、Vuetifyのv-buttonをラップしただけ簡単なものです。 <template> <v-btn
今回は Vuetify でシンプルな入力画面を実装するといった時に遭遇するかもしれない挙動の一つとその対応について紹介します。 v-form の中に一つの v-text-field を配置し、フォーカスを当てた状態で Enter キーを押すとページがリロードされることがあります。 投稿されて1年以上経過しているものですが、以下 Vuetify の GitHub Issue にも Bug Report がありました。 [Bug Report] v-form with single v-text-input submits on enter https://github.com/vuetifyjs/vuetify/issues/3032 [Bug Report] v-form reloads the page when user press enter while editing v-text
Nuxt 3 で Vuetify 3 を使う
Nuxt 3 で Vuetify 3 を使った開発の始め方をまとめました。 この記事の初稿時点でのバージョンは下記のとおりです。 Nuxt 3.2.0 公式サイト: https://nuxt.com/ リポジトリ: https://github.com/nuxt/nuxt Vuetify 3.1.4 公式サイト: https://vuetifyjs.com/ リポジトリ: https://github.com/vuetifyjs/vuetify Nuxt 3 をインストールする Nuxt 3 を始める際は、つぎのコマンドを利用します。
Vuetify 2 と @vue/composition-api を使用した TODO アプリを題材に Vue CLI から Vite / Vitest への移行を試して、とりあえず動くようになったので手順と設定を共有したいと思います。 ビルド速度やサイズの変化についてはこの記事の後ろにまとめてあります。 使用したコードは次のリポジトリにあります。 なお、この記事に記載している情報は 2022 年 1 月 30 日時点のものです。 記事の内容はあくまで一例であり、手順や設定が正しいものであるという保証はありませんのでご注意ください。 移行を試した背景 2022 年 1 月 18 日に Vue CLI がメンテナンスモードに入ったことが宣言されました。 1 Vue CLI 自体は引き続き利用可能で v5 安定版リリースに向けて作業が続けられています。 2 とはいえ今後の主流は Vite にな
PHPの人気のフレームワークLaravelではWebサイトの管理画面を開発することができます。 このシリーズではそんな管理画面の構築に関して、技術者向けにその手順を紹介しています。 この記事ではVuetifyを利用してCRUDを作る方法をご紹介！ Nuxt.jsからLaravelのAPIをAjaxで通信できるようにする手順はこちらの記事で解説。CookieによるAPI経由のユーザー認証機能を作る方法はこちらの記事で解説しています。 ・Laravelを使って構築をしたい方 ・Webサイト構築の具体的な手法が知りたい方 これらに当てはまる方におすすめの記事となっています。このシリーズを読めばLaravel6とNuxt.jsで管理画面を作成することができますよ。 Vuetifyを使う理由VuetifyはマテリアルデザインベースのVueのUIコンポーネントライブラリです。 Vueを使って画面を作り
Vue.js + Vuetify でログインしないと閲覧できないSPAサイトを作成する - Qiita
概要 JSフレームワークとして Vue.js 、CSSフレームワークとして Vuetify を用い、 ログインしてないとログイン画面に飛ばされる SPA (Single Page Application) 型サイトを作成してみます。 注意事項 今回の方式だと、ビルドされたHTMLが静的に置かれるため、ソースを解析すれば未ログインでも ログイン後のHTML が取得できてしまいます。 とは言え、肝心のデータは別途 API から取得するため、ソースだけ取得しても重要なデータにはアクセスされないですし、ここでは問題無しと割り切っています。 ソースを見られるのすら避けたい場合は、HTMLも 認証プログラム経由 で取得するような仕組みにする必要があるでしょう。 セットアップ 今回は、 Vuetify をベースにした Adminテンプレート Vue Material Admin を使います。 こちらを使
Vuetify を使って困ったところ小ネタ集 Vue CLI + TypeScript + SCSS + Vue-Router + Vuex なプロジェクトに、$ vue add vuetify で Vuetify を追加した。 Vuetify はマテリアルデザインを実現するフレームワークだが、細かなところでデザインを調整したい時に上手いやり方が分からないことがあり、ちょくちょく調べている。 今回はそんな、「ちょっとググッて調整した Vuetify 周りの小ネタ」を紹介する。 目次 Overlays 表示時に縦スクロールバーが消えて画面幅がズレるのがウザい scrollable な v-dialog の縦スクロールバーが見えたり消えたりするのがウザい v-list-item で省略せず折り返し表示させたい ページヘッダのタイトルにリンクを貼る v-text-field に required
Vuetifyがどのようなものなのか確認するために、Vuefity公式ホームページにリンクされている動画を参考に動作確認を行なってみたいと思います。Vuetifyはマテリアルデザインを元に作られているので、デザイン性の優れたページを簡単に作成することができます。Vuefityが使いやすいかどうかは個人差があると思うので実際にログインページを作成しVuetifyがどういったものなのか確認してみましょう。 後半にはVue.jsとのVuetifyの連携も行っているのでVuetifyだけではなくVue.jsとの連携も学ぶことができます。 作成後のログイン画面 本文書ではvuetifyを使用して以下のログイン画面を作成します。 作成後のログイン画面 プロジェクトの作成 vueコマンドを使ってプロジェクトの作成を行います。名前は任意なのでここではvuetify-firstとしています。vue crea
Vuefityでのバリデーションをまとめる。 最初にバリデーションの一連の流れを紹介し、その後それぞれのフィールドのバリデーションを確認する。 バリデーションの流れ vuetify rulesメールアドレスのフィールドを例にする template <v-form ref="form" v-model="valid" lazy-validation> <v-text-field v-model="email" :rules="emailRules" ></v-text-field> <v-btn class="mr-4" @click="submit">submit</v-btn> </v-form> script <script> export default { data: () => ({ valid: true, email: null, emailRules: [ value =>
Help us understand the problem. What are the problem?
Vuetify3 のレイアウトに関するメモ - Qiita
このページは、下記に順次移行中です。 Vuetify3 の基本 Vuetify3 のメモです。2 と違う点も多いので注意。Vuetify 3.3.18 で動作を確認しています。 関連記事 Vuetify3 のレイアウトに関するメモ（この記事） Vuetify3 でよく使うコンポーネントのメモ（１） Vuetify3 でよく使うコンポーネントのメモ（２） Vuetify3 Labs -- DatePicker -- DataTable Vuetify3 のプロジェクト作成 Vuetify3 stable になって、下記コマンド一発でいけるようになりました。 詳しくは、下記をどうぞ。 Vuetify3 Installation Nuxt3 の場合は、下記を見てください。 Nuxt3 で Vuetify3 を使う Vue-Router を使って初期化した場合は、App.vue の書き方のデフォル
【最新】Vuetify2系のインストールと使い方・書き方Vuetifyを使用するのが初めてという方に向け、Vuetifyの最新バージョンであるVuetify2系のインストール方法や使い方・書き方を解説しております。Vuetifyを使用することでWebサイトに最低限必要な機能を実装することができます。... 今回からVuetifyでレスポンシブなヘッダーを作成していきます。 本記事では、サイドメニューとハンバーガーメニューの作成まで行います。 完成イメージは下記の通りです。
v3.0.0 (Titan) Welcome to the v3.0.0 release of Vuetify! Supporting Vuetify Vuetify is an open source MIT project that has been made possible due to the generous contributions by sponsors and backers. If you are interested in supporting this project, please consider: Becoming a sponsor on Github John Leider Kael Watts-Deuchar Becoming a sponsor on Patreon Make a one-time payment with Paypal Suppor
[Documentation] v-slot:activator="{ on }" · Issue #6866 · vuetifyjs/vuetify
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
![[Documentation] v-slot:activator="{ on }" · Issue #6866 · vuetifyjs/vuetify](https://cdn-ak-scissors.b.st-hatena.com/image/square/3715f9cc39daa8806d816e97b5ace0de7af37954/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F8c70e780486700f968e3aac4dd51d979ba43e7b6fc521f4b17ff86570339aee5%2Fvuetifyjs%2Fvuetify%2Fissues%2F6866)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ワイ「何でそんな小っさいコンポーネント作ってるん？ｗ」 - Qiita
BASEのVue.jsコンポーネントの設計について登壇してきました - BASEプロダクトチームブログ
【vue.js】Vuefityをマスターする(1) | アールエフェクト
Vuetify2.x でよく使うUIComponents まとめ - Qiita
Vuetify 2.0の注目機能とNuxt.jsでの試し方 - Qiita
【Vue.js入門】ユーザ管理画面をVuetify.jsのData tablesで作る - TECH GUILD
Vue.js 削除ボタンを作ってスロットを理解する - Qiita
v-form (Vuetify) の submit イベントによってページがリロードされないようにする
Vue 3 / Vuetify 3 に備えてまず Vite への移行をお勧めしたい
Vue CLI で作成した Vuetify アプリを Vite / Vitest に移行する - Qiita
VuetifyでCRUDを作る手順【Laravel6とNuxt.jsで作る管理画面】 - Deha magazine
https://vuetifyjs.com/ja/styles/colors/
Vuetify を使って困ったところ小ネタ集 - Neo's World
https://vuetifyjs.com/ja/components/dialogs/
はじめてのVuetify(ログインページ作成で使い方学ぶ) | アールエフェクト
Vuetifyでのバリデーションまとめ - inokawablog
https://vuetifyjs.com/ja/styles/spacing/
Vuetifyを使っているときによく見に行くページと情報 - Qiita
https://sugimotonote.com/2019/03/03/post-1321/
【サンプルあり】Vuetify で DatePicker付きの テキストフィールドを作る！【v-date-picker】｜ProgLearn｜エンジニアのためのプログラミング情報メディア
Vuetifyでサイドメニューとハンバーガーメニューを作成する方法｜エンジニアライフブック
Release v3.0.0 · vuetifyjs/vuetify
Vue2 & Vuetify2でバリデーション付きのフォームを作ってみる - Qiita