Vuetify

はじめに c-mappプロジェクトの一環として、今回はVuetifyを中心に編集していこうと思います。 というのも、前回のrouter導入時に無理やりソースを書き換えるタイプのコマンドを入力して実行したため、ソースが地味に変になっています。とは言っても、そこまで難しい話でもないので、そこをまずは直しつつ、更に有るべき形を目指しながらやっていきましょう。 Homeを編集してみる まず、新たに追加されたHome.vueを見てみましょう。 <template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <Hell…

Vuetify導入時にエラーが発生 前回の記事でVuetifyを入れてみました。 www.matematetea.com その時にこんなvueのエラーが発生。 error Component name "Home" should always be multi-word vue/multi-word-component-names コンポーネントの名前についてエラーがでましたので無視しようと思います。 解決方法 .eslintrc.jsにあるrules部分に次のを追加します。 'vue/multi-word-component-names': 0 こんな感じにrules中の最後、16行目に追加…

前提のはなし Vuetifyとは Vuetifyの導入手順 Vuetifyのインストール Choose a preset エラーが発生した場合 Vuetifyの起動 前提のはなし 今回はVuetifyを導入して起動してみます。 前提として、前回のVue CLIの導入ができている状態で始めます。 まだの方は以下リンクに手順をまとめています。 www.matematetea.com Vuetifyとは VuetifyはGoogleが2014年に提唱したマテリアルデザインに沿って設計されたUI(User Interface)のひとつです。 シンプルでかつ見やすいUIを作成することができます。 公式サ…

v-text-fieldのv-slot:prepend v-text-fieldのv-slot:prependを使うと以下の画像のように入力フィールドの前に指定した文字を表示させることができる。 この時先頭に追加する文字が半角英数字であれば文字の途中で改行されることが無いが、日本語を使うと文字の途中で改行がされてしまうので、改行されないようにCSSでパッチを当てる。 改行されないパターン 改行されるパターン CSSに以下を追加する .v-input__prepend-outer { flex-shrink: 0; } CSS適用後 無事改行がされなくなった ソース全文 <!DOCTYPE ht…

はじめに お正月休みを利用して久しぶりにVue.jsのお勉強をしたいなと思い、手取りの収入から家計黄金比を出してくれるアプリを作ってみました。 どんなアプリか 利用方法としてはとても単純で「月の手取りを入力してください」というフィールドに金額を入力すると、いくつかの分類ごとに支出額が計算されるというものです。 ※実際のアプリはAzure Static Web Appsにデプロイしており、以下のリンクから利用が可能です。 brave-forest-03723ea00.azurestaticapps.net 使用技術 使用技術は以下です。 フロントエンド Vue.js 2.6.14 デザイン Vu…

Vuetifyで日付や時刻の選択をするのに、日付だけや時刻だけであればコンポーネントが用意されている。 デートピッカー・コンポーネント — Vuetify タイムピッカー・コンポーネント — Vuetify 一方、日付と時刻を同時に選ばせるには、コンポーネントがないので調べてみた。 外部ライブラリ vue-datetime というそのものを公開している方がいたが、残念ながら2022年1月でアーカイブされていた。 https://github.com/mariomka/vue-datetime HTMLのdatetime-localを利用する 利用できるブラウザが限られるが、<input typ…

前提 vue@2.6.14 vuetify 2.6.2 どうやって実装した？ VuetifyのフォームコンポーネントにあるRulesプロパティを使った。 Rulesプロパティはルールの規則が格納された配列を指定した。 この指定したルールをもとにバリデーションを行ってくれる仕組みになっている。 コード例 実際に書いてみたコード。 HTML <template lang="pug"> v-container.ma-0.pa-0 v-row( justify='center' align='center' ) v-col(cols='12' xs='12' sm='5') v-text-field(…

Vutifyを使用しているVueプロジェクトで vue-test-utils を用いてVueインスタンスをマウントする際に Vutifyで提供されている一部コンポーネントが正常に動かないことがままある v-dialogコンポーネントもその一つで、 マウントしたインスタンス内では表示されず、 対応するには、v-dialogのモックを作成してマウント時にラップする必要があった VDialogMock.vue 以下のモックはVue2.xでComposition APIで作成している <!-- propによって表示切り替えされるスロットが存在するだけの簡単なモック --> <template> <di…

参考にさせていただいたページ 公式ページ Get started with Vuetify 3 — Vuetify その他のページ How to use Vuetify with Nuxt 3 | Cody Bontecou はじめに 2023年1月4日現在の手順です。 この記事では以下のバージョンを使用しています。 "nuxt": "3.0.0", "vuetify": "3.0.6" vuetify3をインストールする 以下のコマンドで vuetify@next と sass をインストールします。 npm install --save-dev vuetify@next sass 以下の通…

2022年にやったことを備忘録として残しておく。 主に学んだ技術を中心に記述する。 今年の出来事 1-3月 M2 修論などがあったはずだがあまり記憶がない。 4月 研修期間 入社後の研修期間。こちらも記憶がない。 5-6月 ソフト開発部 ソフトウェア開発部に所属となった。 工場研修の開始時期が未確定だったため主に雑用をしていた。よって技術的な業務は少ない。 学んだ技術 以下の技術については身についていない。 - Vue.js v2, Nuxt 2, Vuetify 2 - flask 7-9月 工場研修 思い出したくない。 10月のDBスペシャリストの勉強をしていた。 10-12月 ソフト開発…

この記事は、Advent Calendar 2022 / DevOps・インフラ・SRE「GitLab Advent Calendar 2022」の22日目の記事です。 はじめに こんにちは、AI・IoT サービス開発部のがんがんこと岩丸です。 今年も技術記事を読むのが忙しい季節がやってきましたね。昨年はVue.js + TypeScript + Vuetifyに関する記事を執筆しました。今年はGitLabに関した記事を執筆いたしました。 今回はGitLab Pagesに関する記事です。 前回も GitLab に関する記事を執筆しており、前回の記事ではGitLab Runnerで AWS La…

こんにちは！株式会社フォトラクションでプロダクトマネージャーをしています南風原（はえばる）です。 Photoruction Advent Calendar 2022の12日目の記事になります。 はじめに ついに、待望のNuxt3が正式リリースされましたね👏 これからNuxt3を使ってみようと思っている初心者向けに、Nuxt3 × Vuetify × Instagram APIを用いた簡単な写真検索アプリをハンズオン形式で紹介していきたいと思います。 [前提]開発環境の各種バージョンは以下になります os: macOS Monterey node: v18.12.1 yarn: 1.22.11 …

この投稿は 「Djangoのカレンダー | Advent Calendar 2022 - Qiita」 1日目の記事です。 この記事では、11月に「みんなのPython勉強会#87」で発表したトーク 「Django REST Framework はじめの一歩 〜押さえておきたい３つのポイント〜」の内容を詳しく説明したいと思います。トークの目的は「Django REST Framework（通称 DRF）がどんなものかをざっくり理解する」です。 DRF はよく分からないけど、Django なら何となく分かるという DRF 初心者の方を理想のトーク対象者として想定しています（もちろん Django…

画面の大きさを判定する 携帯の場合はtrueが返却される computed: { isMobile() { const mobileBreakpoints = ["xs", "sm"]; return mobileBreakpoints.some((e) => { return this.$vuetify.breakpoint.name === e; }); }, } pathでコンポーネントを切り替える html <component :is="component"></component> script <script> import Hoge from "./components/Hog…

ウェブ制作出身でソフトウェアエンジニアの髙橋です。 2022年10月18日発売の「Web Designing 2022 年 12 月号」で、フロントエンドの実装時 React/Vue.js など SPA フレームワークを選択する理由について、計8ページに渡るインタビュー「制作者・制作会社は今こそ！React、Vue.jsに舵を切れ」を掲載いただきました。 現在発売中のWeb Designing12月号では、「Web構築最前線」と題して、React、Vue.js、Angular、Next.jsなど、今注目のWeb制作技術について特集しています。各技術がどんな場面で求められ、どう使いこなすべきかを…

こんにちは、CTOの小林です。株式会社kickflowではクラウドワークフローのkickflowというサービスを運営しています。今日は、このkickflowを支える技術スタックについてご紹介したいと思います。kickflowの開発環境に興味のある方や、これから新規サービスを立ち上げようとしている方の参考になれば幸いです。

概要 v-btnの文字を改行する方法を示す。 ソースコード <template> <v-app> <div> <h1>button new line</h1> <div class="mt-6 mb-6"> <v-btn class="new-line-button text-pre-wrap text-left" block>{{textHello}}</v-btn> </div> <div class="mb-6"> <v-btn class="new-line-button text-pre-wrap text-left" block>{{textNewLine}}</v-btn> </…

個人開発を含めた触れている技術についてなんとなく思うことを書く。完全に主観で偏りまくりなので鵜呑みにはしないでほしい。 Angular 仕事で使っている。Angularのメリットとしてはバージョンアップの容易さのみ。フルスタックゆえ、使わざる得ない標準ライブラリが全て微妙に使いずらい。フレームワークにRxJSがゴリゴリ依存しているので、脱RxJSは不可能なので諦めて使うしかない。テストがJasmineと古すぎるしいつJestになるのか謎、標準であることが大事だからangularもjest使えるよみたいな話とは別。React Hooksみたいな新しい技術の導入が遅すぎる。全てが60点だが、バージ…

先日、担当しているプロダクトで使用していたUIフレームワークを削除する対応を行いました。 UIフレームワークは便利な一方でデメリットもあると感じています。 今回はその辺りについて書いてみたいと思います。 UIフレームワーク フロントエンド開発を行う上で何らかのUIフレームワーク（ライブラリ）を使用しているプロダクトは多いと思います。 主だったものをいくつか取り上げてみたいと思います。 Bootstrap まずは最も人気のあるフレームワークの1つであるBootstrap。 Githubのスターは15万以上と圧倒的な数字です。 classを指定するだけで簡単に使用できます。 Bootstrap4系…