タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
はじめに 株式会社スペースリー フロントエンドエンジニアの宮坂と申します。 ふだんは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）のウェブサイトを実装してみたり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を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
NuxtとVuetify環境を構築するときに毎回調べてるので、簡単に開発環境を作れるようにしてみました。特に、個人開発では、開発から本番環境へデプロイするのに数週間、数ヶ月かかり挫折することが多いです。 これを使えば数クリックで本番環境へデプロイできモチベーションを維持することができます。 含まれている物 Nuxt: npx --yes nuxi@latest init --packageManager npm --gitInit . Vuetify: npx nuxi@latest module add vuetify-nuxt-module GitHub Actions: https://nuxt.com/deploy/github-pages GitHub Codespaces: https://github.com/GitHub30/nuxt-vuetify-github-page
はじめに はじめまして。普段学生IT団体watnowに所属しており、Webアプリ開発をしている傍ら、大学のサイクリングサークルの部長を務めているものです。毎年この時期は新入生がサークルに入部してくるのですが、新入生の中には今までロードバイク、クロスバイクといったスポーツ用自転車の全く未経験という方もたくさんいらっしゃいます。 今回は、そんな彼らのロードバイク選びの参考になればという思いから、ロードバイクブランドの一覧サイトを作った所存でございます。タイトルには偉そうに「辞典」とつけておりますが、そんな大層なものではございません。 今回はVuetify導入編ということで、実際に記述したコードなどの紹介は「実装編」という形で次回記事を書きたいと思います。 完成図 今回作ったサイトは次のようなものです。 国別にリスト化して、ブランドごとに 1．ブランド名 2．フラグシップモデルの画像、モデル名、
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とは？ Vue.jsのUIライブラリーです。Googleが提唱したマテリアルデザインにのっとっており、直感的で使いやすいコンポーネントを利用することができます。 デザインの知識が全く無くても、簡単にUIを作れちゃいます🤗 #プロジェクトを作成 まずはいつもどおりにvue createでプロジェクトを作成します。
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
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
ダイアログコンポーネントは、特定のタスクについてユーザーに通知し、重要な情報を含む場合や、特定のアクションを取るようにユーザーに要求したりすることができます。
Create a Laravel notification via Slack when batch jobs are finished
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); } ); }, },
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は、HTML ServiceでウェブアプリケーションやスプレッドシートのダイアログのUIを構築可能です。しかし、標準ではUIを構築する為のライブラリやフレームワークを備えていないので、ユーザ自身が好きなフレームワークを導入して、HTML上に構築する必要があります。 自分は過去に、Google Apps Scriptのアプリをスマフォ向けとしては、framework7を使ってUIを構築しました。いずれ、framework7のまとめも作ってみたいと思います。今回はPC向けサイトとしてVuetifyを使って構築してみたいと思います。随時、自分がパーツを使うシーンがあれば、ここに追記していきたい。 ※2023年12月31日をもってVue.js v2がサポートアウトする関係で、Vuetifyについてもv3移行が促されいます。基本的な使い方は同じですが、変更されてる
スペーシングヘルパークラスを使用すると、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が済んでいるプリコンパイル
ボトムナビゲーションコンポーネントはモバイルデバイスに使用され、アプリケーションの主なナビゲーションとして機能します。
Vite+Vue3+Vuetify3+Expressのプロジェクトを1から作成する（ESLint、Prettier、Node.jsをPJに含めたモノレポ？構成）JavaScriptExpressVue.jsVuetifyvite はじめに 個人開発で使うプロジェクトをVue-CLIから移行して、Vueも3.xに上げて新しくテンプレ化してみようと思った。その新プロジェクトの作成時の手順を備忘録として残しておきたく。 完成したプロジェクトは以下。 yarn create viteで初期プロジェクトを作成する まずは公式にある通りの方法（yarn create vite）で初期プロジェクトを作成する。 作成直後は以下のように最低限の状態で、yarn.lockすらない状態で作成される。 study@localhost:~/workspace/vite-vue3-vuetify-express (m
課題 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>
本記事はうるる 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
このチャプターで達成すること チャプター「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 の基本 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を配置します。
現在、ベータ版のVuetify3でMaterial Design Icon(MDI)で必要なアイコンだけ読み込ませるベストプラクティスをメモに残しておきます。 (Laravel Mixの環境ですがvue-cliやNuxtでも同様です) @mdi/fontは重すぎる! 「アイコンフォントは重すぎる！！！」某米倉◯子さんに読んでいただきたいですね。 MDIやFontawesomeなどのアイコンフォントは300KB程度。更に追加でフォントファイルも読み込まれるため非常に読み込み遅延の阻害になりPageSpeed Insightsのモバイルスコアがガタ落ちします。 しかも使うアイコンの数は多くて10個程度だしもったいなすぎる。 そこで、@mdi/fontsパッケージから @mdi/js パッケージに切り替え、必要なアイコンSVGのみバンドルする手法を活用します。 Vuetify3で必要なアイコンだ
Vuetifyのコンポーネントを利用すると見栄えのいいページネーションを簡単に設置することができます。Vuetifyのマニュアルには、v-paginationコンポーネントによるページネーションのタグは記述されていますが、どのようにvue.js上で設定を行い動作させるかについては説明はありません。 本文書では、最も簡単だと思われる方法でVuetifyのページネーションの設定方法を詳細に説明しています。Vuetifyのページネーションに興味がある人はぜひ参考にしてみてください。 vue.jsとVuetifyの環境について 本文書ではページネーションに焦点を当てているので、vue.jsとVuetifyの環境構築手順については説明を行なっていません。下記の文書の前半部分を参考に環境構築を行なってください。またVuefityの設定方法についても説明を行なっています。 ページネーションの設定 Vue
Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create beautiful content rich applications.
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
