タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話 - spacelyのブログ
はじめに 株式会社スペースリー フロントエンドエンジニアの宮坂と申します。 ふだんは3Dビューアやその編集画面のDOM部分をReactやVueで書きつつ、たまにフロントエンド開発環境構築おじさんとして他チームへ出しゃばったりして生きています。 今回はその環境構築に関わるところ、Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話を書きます。 レガシーを生かしつつアップグレードする苦労話としてニッチに刺されば幸いです。 経緯と背景 Vue 2 のEOLまで1年を切って スペースリーはサービスインから6年以上経つこともあり、技術スタックはプロジェクトによって新しいものもあれば、今となっては古いものもあります。 リリースから日が浅いパノラマ変換3Dプレイヤーは2023年6月時点でエンドユーザー向けの部分がReact 18で、事業者向けの部分
vuetify+vue/cliによるフロントエンドと、pythonのresponder+sqlite3によるAPIで、SPA（single-page application）のウェブサイトを実装してみたり - Qiita
vuetify+vue/cliによるフロントエンドと、pythonのresponder+sqlite3によるAPIで、SPA（single-page application）のウェブサイトを実装してみたりPythonSQLite3Vue.jsVuetifyresponder はじめに この前responderとSQLiteとの組み合わせで簡単なウェブサイトを作る例をしました。 今回はresponderとSQLに加えて、SQLデータベースと接続してデータの閲覧や追加や更新や削除したりできるSPA（single-page application）のウェブサイトにします。 フロントエンドは最近とても人気のjavascriptフレームワークであるvuetifyを使います。 vuetifyのコンポーネントは特に設定しなくてもレスポンシブデザインになっているというところは便利です。 pythonの方で
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
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
昨年、Zenn に Vue を使ったアプリの作り方について投稿しました。 上記投稿時点で Vue3 を使うことはできましたが、使おうと思っていた UIフレームワークの Vuetify が Vue3 に対応していなかったので、Vue2 を使っていました。 あれから半年以上たって、Vue3 対応の Vuetify3 がアルファからベータ版になり、 公式サイトを見るといろいろできそうな感じに見えたので、試しに Vue3 + Vuetify3 で Webアプリを作ってみました。 目標 先日、オープンデータカタログサイトリストの Web API を以下のサイトに公開しました。 ここで公開したデータの検索サイトを作ろうと思います。 一応目標として、このサイト(React + Material-UIで作成)のような見た目を目指すことにしました。 出来たもの こんな感じにしあがりました。 Vuetify3
Vue.js+Vuetifyでロードバイクのブランド辞典を作る① ～Vuetify導入編～ - Qiita
はじめに はじめまして。普段学生IT団体watnowに所属しており、Webアプリ開発をしている傍ら、大学のサイクリングサークルの部長を務めているものです。毎年この時期は新入生がサークルに入部してくるのですが、新入生の中には今までロードバイク、クロスバイクといったスポーツ用自転車の全く未経験という方もたくさんいらっしゃいます。 今回は、そんな彼らのロードバイク選びの参考になればという思いから、ロードバイクブランドの一覧サイトを作った所存でございます。タイトルには偉そうに「辞典」とつけておりますが、そんな大層なものではございません。 今回はVuetify導入編ということで、実際に記述したコードなどの紹介は「実装編」という形で次回記事を書きたいと思います。 完成図 今回作ったサイトは次のようなものです。 国別にリスト化して、ブランドごとに 1．ブランド名 2．フラグシップモデルの画像、モデル名、
デザイナー不在のスタートアップがVuetifyで救われた話 / A startup that has no designer saved by Vuetify.
デザイナー不在のスタートアップがVuetifyで救われた話 / A startup that has no designer saved by Vuetify.
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 を始める際は、つぎのコマンドを利用します。
ロンラン株式会社 CEO 兼 CTO の武部です。 もうすぐ Vuetify 3 の beta が取れて GA 版が届きそうですね！ 当社ロンランの主要 Web 製品では Vuetify 2 を採用しています。このため、必然 Vue 2 を使い続けざるを得なかったのですが、エコシステムがどんどん進化してゆくなか、いつまでも Vue 3 へ移行できないもどかしさがありました。 まずは来たるべき Vuetify 3 へ向けて、試しに一部機能を Vue 3 / Vuetify 3 beta / Vite へ移行してみることにしました。しかし、対処すべきことがなかなか多く、簡単な一部機能を移行し終えただけで燃え尽き気味。これはなかなか苦労することになるぞ...😫と渋い気持ちになりました。 ある日、Vite は Vue 2 にも対応していると気づき、対応ステップを分けて移行することに思い至りました
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を使って画面を作り
Vuetifyに入門する - Qiita
#Vuetifyとは？ Vue.jsのUIライブラリーです。Googleが提唱したマテリアルデザインにのっとっており、直感的で使いやすいコンポーネントを利用することができます。 デザインの知識が全く無くても、簡単にUIを作れちゃいます🤗 #プロジェクトを作成 まずはいつもどおりにvue createでプロジェクトを作成します。
Vuetify3 の基本
Vuetify3 の画面のレイアウトの基本と、ボックス（領域）を確保する方法、位置合わせや寄せの方法、色やフォントの指定方法、スペーシング、各種のコンポーネントについて説明した記事です。Vue3 そのものについての説明はありません。 サンプルコードは主に Option API および JavaScript で記述しています。
最近 お仕事でkintoneのJavaScriptカスタマイズをよくやっています。 よくある要望なのが、【一覧画面で、チェックボックスを並べて選択レコードに対して一括して〇〇を更新・処理したい。】というもの。 以前は、カスタマイズビューでHTML・CSSを手書きしてたんですが、もっと効率良く開発できないかと模索してた先に行き着いたのが Vue.js＋Vuetify.jsの組み合わせです。 Vue.jsはjQueryに変わるフロントエンドライブラリ、Vuetify.jsはVue.jsと組み合わせて使うデザイン化されたUIパーツみたいなものです。（ちょっと乱暴な言い方かも。） 何しろ、今時のデザインで高機能なUIを簡単なコードで作れるので、凄いお勧めです。 以下、今回作ったカスタマイズビューです。 チェックボックス付きで選択レコードに対して一括処理を行うVuetify.jsのデータテーブルを
Vuetifyがどのようなものなのか確認するために、Vuefity公式ホームページにリンクされている動画を参考に動作確認を行なってみたいと思います。Vuetifyはマテリアルデザインを元に作られているので、デザイン性の優れたページを簡単に作成することができます。Vuefityが使いやすいかどうかは個人差があると思うので実際にログインページを作成しVuetifyがどういったものなのか確認してみましょう。 後半にはVue.jsとのVuetifyの連携も行っているのでVuetifyだけではなくVue.jsとの連携も学ぶことができます。 作成後のログイン画面 本文書ではvuetifyを使用して以下のログイン画面を作成します。 作成後のログイン画面 プロジェクトの作成 vueコマンドを使ってプロジェクトの作成を行います。名前は任意なのでここではvuetify-firstとしています。vue crea
マテリアルカラーパレット — Vuetify
Material Design の色について学びましょう。JavaScriptのカラーパックをアプリケーション内で直接利用します。
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
Dialog component — Vuetify
ダイアログコンポーネントは、特定のタスクについてユーザーに通知し、重要な情報を含む場合や、特定のアクションを取るようにユーザーに要求したりすることができます。
data() { return { users: [] }; }, methods: { userListLoad() { axios.get('https://example.com/users') .then( result => { Object.entries(result.users).forEach(user => this.users.push({ name: user["name"], id: user["id"] }) ); }, err => { console.log(err); } ); }, },
Create a Laravel notification via Slack when batch jobs are finished
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 =>
タイトル通りですが、対象読者はNuxt.jsにVuetify（@nuxtjs/vuetify）をインストール後、VuetifyのSASS変数を変更するためにvariables.scssを作成したけど反映されずに困ってる方です。 結果的には@nuxtjs/vuetify のページをじっくり読めば問題なかったのですが、要点だけ書いておきます。 1. customVariablesの設定 nuxtjs/vuetifyのcustomVariables部分を読むと、customVariablesオプションについて以下のように書かれてます。 Provide a way to customize Vuetify SASS variables. 一例として以下のようにサンプルが載ってます。 ※ customVariablesはNuxt.jsをインストールする際、テンプレートにVuetifyを選択すると最初
Google Apps ScriptでVuetify v2を使ってUIを作る【GAS】 - 🌴 officeの杜 🥥
Google Apps Scriptは、HTML ServiceでウェブアプリケーションやスプレッドシートのダイアログのUIを構築可能です。しかし、標準ではUIを構築する為のライブラリやフレームワークを備えていないので、ユーザ自身が好きなフレームワークを導入して、HTML上に構築する必要があります。 自分は過去に、Google Apps Scriptのアプリをスマフォ向けとしては、framework7を使ってUIを構築しました。いずれ、framework7のまとめも作ってみたいと思います。今回はPC向けサイトとしてVuetifyを使って構築してみたいと思います。随時、自分がパーツを使うシーンがあれば、ここに追記していきたい。 ※2023年12月31日をもってVue.js v2がサポートアウトする関係で、Vuetifyについてもv3移行が促されいます。基本的な使い方は同じですが、変更されてる
Spacing — Vuetify
スペーシングヘルパークラスを使用すると、1から5までの増分で任意の要素にマージンまたはパディングを適用できます。
Vuetify+Vue CLIで構築したプロジェクトで、 Vuetify2.xにアップグレードしたらnpm run serveの開始時間が著しく長くなってしまったので改善します。 原因 Vuetify2.0よりデフォルトで有効となったA-la-carte(treeshaking)が原因です。 A-la-carteとは Vuetifyの数多くのコンポーネントのうち、「プログラム中で使われているもの」だけを成果物に含める機能です。使っていないコンポーネントをimportしないので、ビルドサイズが減少します。 しかしながら、これはビルド時間を増大させます。 A-la-carteを使わない場合、vuetifyの全てのコンポーネントはnode_modules/vuetify/dist/vuetify.min.jsから読み込まれます。これは既にimportの解決やminifyが済んでいるプリコンパイル
ボトムナビゲーション・コンポーネント — Vuetify
ボトムナビゲーションコンポーネントはモバイルデバイスに使用され、アプリケーションの主なナビゲーションとして機能します。
課題 vuetifyで用意されているボタン、v-btnでボタン名がアルファベットの場合は、必ず大文字となります。 このようにv-btnでSend Emailというボタン名にすると、以下の図のように大文字となります。 これをそのまま表示するようにしたい。 <v-card class="mb-5 mt-5"> <v-card-actions> <v-btn>Send Email</v-btn> </v-card-actions> </v-card>
Vuetifyを使っているときに参照したいと思う事が同じになってきたので、まとめを作っておくことにしました。 まだまだ不完全ですが、一回公開しちゃいます！ 秘伝のタレみたいにどんどん追記してオリジナルメモを完成させられればと思っています。 「これもまとめておけよ」ってことがあったらコメントお願いしますm(_ _)m レイアウト系 レイアウト
本記事はうるる Advent Calendar 2019 16日目の記事です。 はじめに laravel×vuecliでまとまった記事がなかったのでまとめた 要件 vuecliの雛形をそのまま使用できるようにする 今回はLaravel Mixは使わない というのもvuecliに新機能が追加されてもLaravel Mixが対応するのが遅いと使えないというデメリットがあるから なるべくvueは独立させてlaravelに依存しないようにしたい 構成 ざっくり解説 frontendディレクトリがvuecliプロジェクト frontendでnpm run buildすると resources/views/spa/app.blade.phpが作成される Laravelのプロジェクトを作成する composer create-project laravel/laravel sampleApp --pre
Docker AlpineベースのNode.js上で動くNuxt.jsにVuetifyを導入する - 独学プログラマ
このチャプターで達成すること チャプター「Nuxt.jsフロント開発事前準備」ではNuxt.jsのCSS環境を整えていきます。 具体的にはVuetifyの導入とカスタマイズ方法、Nuxt.jsメインCSSファイルの設定方法を解説します。 このチャプターを通してVuetifyとCSS周りの知識を深めましょう。 今回達成すること Docker環境のNuxt.jsにCSSフレームワークのVuetifyを導入します。 現状のDockerfileでは、Vuetifyのインストール時にエラーが出ます。 これはAlpineのNode.jsイメージに依存関係が存在しないために起こるエラーです。 この依存関係のインストール方法についても解説します。 ブランチを切っておく 作業に入る前にブランチを切っておきましょう。 root $ cd front front $ git checkout -b 202007
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
概要 Listコンポーネントの初歩的な使い方のまとめです。 環境 Windows 10 Professional 1909 Node.js 12.14.1 Vue.js 2.6.11 Vuetify.js 2.2.12 参考 Quick start - Vuetify.js Components Styles - Colors Material Design Icons Lists 基本的な構造パターン フラットなリストはv-listの下に1つ以上のv-list-itemを配置します。
Vuetifyのコンポーネントを利用すると見栄えのいいページネーションを簡単に設置することができます。Vuetifyのマニュアルには、v-paginationコンポーネントによるページネーションのタグは記述されていますが、どのようにvue.js上で設定を行い動作させるかについては説明はありません。 本文書では、最も簡単だと思われる方法でVuetifyのページネーションの設定方法を詳細に説明しています。Vuetifyのページネーションに興味がある人はぜひ参考にしてみてください。 vue.jsとVuetifyの環境について 本文書ではページネーションに焦点を当てているので、vue.jsとVuetifyの環境構築手順については説明を行なっていません。下記の文書の前半部分を参考に環境構築を行なってください。またVuefityの設定方法についても説明を行なっています。 ページネーションの設定 Vue
GitHub - Larkenx/Rotten-Soup: A roguelike built with Vue, Vuetify, Tiled, rot.js, and PixiJS! Playable at https://rottensoup.herokuapp.com/
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
※v-slotの構文はVue 2.6.0以上から使用できます。 v-slotの使用方法は以下の公式ドキュメントに説明があります。 https://jp.vuejs.org/v2/guide/components-slots.html#%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%97%E4%BB%98%E3%81%8D%E3%82%B9%E3%83%AD%E3%83%83%E3%83%88 v-slot:activatorとは？ Vuetifyでv-slot:activatorというスロットをよく見かけます。 これは特定の条件時(クリック時・ホバー時のみなど）のみポップアップする場合のトリガー用のスロットとして用意されています。 TL;DR activatorスロットにはポップアップを付与したい要素を記述 デフォルトスロットにはポップアップで表示する要素を記述 @to
ロンラン株式会社 CEO 兼 CTO の武部です。 Vue 2 & Vuetify 2 で開発していた当社の主力製品のひとつを Vue 3 & Vuetify 3 へと移行しました。 記念すべき CLOSE 済み PR 今現在は、最新の Vuetify 3.0.4 で安定動作しており、開発も Vue 3 & Vuetify 3 を前提としたワークフローへ移行し、快適です。 コード変化量は +21,471 行、-14,585 行。修正ファイル数は 183 ファイルで収まりました。 リードタイムとしては 2 週間程度、作業時間としては、うーん...合計 60 時間ぐらいかな？ フロントエンドエンジニア二名で対応しましたが、95% ぐらいはひとり（私）が対応しています。 事前に、移行を見据えた情報キャッチアップやできる範囲での移行は進めていたため、割とスピーディに対応できた方だと思います。 こ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vuetify2.x でよく使うUIComponents まとめ - Qiita
2022年4月現在 Vue3 + Vuetify3(Beta)でどこまでできるか
Vue 3 / Vuetify 3 に備えてまず Vite への移行をお勧めしたい
Vue CLI で作成した Vuetify アプリを Vite / Vitest に移行する - Qiita
VuetifyでCRUDを作る手順【Laravel6とNuxt.jsで作る管理画面】 - Deha magazine
Vue.js＋Vuetify.jsで作るkintoneカスタマイズビュー
はじめてのVuetify(ログインページ作成で使い方学ぶ) | アールエフェクト
Vuetify を使って困ったところ小ネタ集 - Neo's World
Vuetify でフィルタリング機能付きセレクトボックスを実装する - Qiita
5 Points Of Customizing Vuetify
Vuetifyでのバリデーションまとめ - inokawablog
Nuxt.js+VuetifyでSASS変数の上書きが反映されない場合の確認事項 - Qiita
Vuetify2を使ったプロジェクトのビルドが遅いので高速化する - Qiita
Vuetifyのv-btnのアルファベットが大文字になるのを抑制する - Qiita
Vuetifyを使っているときによく見に行くページと情報 - Qiita
Laravel vuecli最短レシピ（ついでにvuetify導入） - Qiita
【サンプルあり】Vuetify で DatePicker付きの テキストフィールドを作る！【v-date-picker】｜ProgLearn｜エンジニアのためのプログラミング情報メディア
Vuetifyでサイドメニューとハンバーガーメニューを作成する方法｜エンジニアライフブック
Release v3.0.0 · vuetifyjs/vuetify
Vuetify.js 2.2のListコンポーネントについて - Qiita
【vue.js】 Vuetifyで簡単ページネーション(Paginations) | アールエフェクト
Vuetifyのv-slot:activatorの使い方 - Qiita
主力製品の Vue 3 & Vuetify 3 へのマイグレーション全記録
news.yahoo.co.jp
www.moneypost.jp
payment.rakuten.co.jp
jp.ign.com
b.hatena.ne.jp
www.google.com