Vuetify

はじめに 今回は、Vue,jsプロジェクトの起動時の名前を設定する方法についての内容です。 通常の場合、プロジェクトの名称がそのまま起動時の名前になります。 vue.config.jsを編集する vuetifyを導入したときのvue.config.jsは以下の内容になっていると思います。 module.exports = { transpileDependencies: [ 'vuetify' ] } 現在の状態でnpm run serveで起動すると、タブの表示名は以下の形になります。 これは、プロジェクト名称を「front」としたためです。（c-mappプロジェクト内のフロントエンド側とい…

はじめに c-mappプロジェクトの一環として、今回はvue.jsのvuetifyによってナビバーを改修していこうと思います。 vuetifyjs.com アイコンボタンを作成してみる 前回の記事でとりあえずでボタンを配置しています。 今回は、まずそのボタンにアイコンの要素を加えてみます。 まず、現在のApp.vueが以下の内容になります。 <template> <v-app> <v-app-bar app color="primary" dark > <v-app-bar-title>c-mapp</v-app-bar-title> <v-btn to="/">Home</v-btn> <v…

はじめに 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行目に追加…

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

はじめに 新たなアプリケーション「c-mapp」の開発についての記事になります。 今回は、フロントエンドの開発に用いられる「Vue.js」に付いての関連記事です。 Vuetifyを導入するところまでを記述します。 そもそもなにそれ？って話 vuetifyjs.com Vuetifyとは、Vue.jsのために開発されたUI（ユーザーインターフェース）ライブラリです。 UIライブラリってそもそもなんだよって話なんですが、例えば入力フォームやボタン、リストなど、ユーザー側が画面を見る際に利用されている各コンポーネントをある程度の形にテンプレートとして用意されているものです。 Angular Mate…

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

ポートフォリオをリニューアルしました（ドメインも取りました）。メインビジュアルとしてフラクタル図形の３次元化を試みています。 followthedarkside.com 勉強がてら色々と初めてのものを導入してみたので、備忘録として記事にしておきます。Web開発って初心者向け情報だと「HTML+CSS+JSで簡単なサイト作ってみよう」から、ちょっと深掘りし出すと急に知らない言葉や概念が大量に出てきてようわからんってなりませんか。あとWordPressで稼ごう記事や怪しいオンラインスクールなど（WPが悪いわけじゃないんです）。 今回の記事は導入からデプロイまで網羅的に（雑に）書いてますので、Web…

vue3-migration-improve-frontend はじめまして！ BALES CLOUDエンジニアのえーす（井上）です。この度、BALES CLOUDで長年使ってきたVue2から卒業し、Vue3を導入した状態でリリースできました。今日はこれについてお話できればと思います。 やったこと なぜVue3移行をしたか TypeScriptサポート 各ライブラリが古い Vue2のEOLが近い 具体的なVue3移行ステップ Vuetify卒業 Vue3導入 Vue3完全移行 移行にあたって問題だったこと ライブラリのアップグレード Vuetify卒業 ElementUI -> Element…

npm init vue@3 xxxdb cd xxxdb/ npm install npm install vuetify npm run dev

普段javaばかり使うのでパッケージ管理コマンドが分からなくなるなんちゃって開発者です。 【apt】 Linux系で使うパッケージ管理コマンド 【npm】 node.jsのパッケージ管理コマンド 【yarn】 node.jsのパッケージ管理コマンド npmより歴史が新しく、比較的高速で動く npmとyarnはnode.jsのためのパッケージ管理コマンドか。 node.js長い間触ってなかったから忘れてしまっていた。 aptとかとは全然別物なのね。 なんでvuetifyのインストールで出てくるんだと思ったけど、 vuetifyがvueのフレームワークで、vueがnode.jsのフレームワークだか…

tailwindcss.com Tailwindcssのドキュメントを参考に導入していきます。npmを導入済みの状態です。 Tailwind Cliでの確認 ドキュメントのまま実行するだけで確認できるところ Install Tailwind CSS ターミナルで実行 npm install -D tailwindcss npx tailwindcss init Configure your template paths 設定ファイルを編集。 module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, },…

参考にさせていただいたページ Vuetify公式ページ この記事執筆時点ではVuetify3の公式ドキュメントがまだ不充分だったので、以下のVuetify2の公式ドキュメントを参考にしました。 Selectsコンポーネント: Vuetify — A Material Design Framework for Vue.js v-select API: Vuetify — A Material Design Framework for Vue.js 単一Vueコンポーネントのサンプルコード 以下の通り記述しました。Nuxt3の環境下でVuetify3を使用しているため、<client-only>コ…

参考にさせていただいたページ 公式ページ 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…

「Pixela」開発者の @a_know さんが「じぶんリリースノート」という記事を毎月書かれていて。自分自身の振り返りと棚卸しにすごくよいな・・と思ったので真似して書いてみる🙃 blog.a-know.me pixe.la 仕事関係 LINE Platform (Bot/LIFF/ミニアプリ) Android タブレット向けアプリ 決済まわり (LINE Pay/PayPay) 基本的に在宅、1人で開発 (インフラ含む) 新人研修講師業 はお休み中 技術スタック Vue.js (NuxtJS) + Vuetify Node.js (Express, NestJS) Flutter Googl…