'v-slot' directive doesn't support any modifier
I am using Vuetify's datatable, we have different slots with some props for example below <template #header.data-table-select="{ on, props }"> <v-simple-checkbox color="purple" v-bind="props" v-on="on"></v-simple-checkbox> </template> I am also using Vue's eslint plugin to check for any errors/bad code / or any violation, but if I use the above code snippet in my file it gives me the error 'v-slot
LaravelプロジェクトでVuetifyを「もっと」使いこなしたい(vuetify-loader&SASS変数) - Qiita
import Vue from 'vue' import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' Vue.use(Vuetify); const app = new Vue({ el: '#app', vuetify: new Vuetify() }); しかし、この方法では以下のような欠点があります。 vuetify-loaderが扱えない(コンパイル後のjsファイルサイズが大きくなってしまい、処理が重くなってしまう) vuetifyのSASS変数が変更できないので、デフォルトで設定されているフォントなどを変えたい場合、別CSSで上書きするなどの対応になってしまう 多分これらはwebpack.mix.jsでwebpackConfigをうまいこと扱えれば解決すると思うのですが、あまり情報がなかったり、自分の技
あまり頭を使わずVue + Vuetify + TypeScriptの初期描画を高速化するためにやったこと - Qiita
やりたいこと Vue + Vuetify + TypeScriptで書かれたWebアプリをはじめて開いたときの描画を高速化したいです。初期描画が早いと第一印象が良く速いほどと嬉しいです。ロジック部分を高速化できそうなアルゴリズム書き換えたりせず、なるべく単純作業だけで高速化できそうなことをまとめます。 具体的には「マルチデバイス間でファイル転送を手軽にしたい！スマホでもPCでもcurlでも - Qiita」のWebアプリを高速化します。もともと、デスクトップ環境だとそれほど初期描画の速度は気にならないのでモバイルでの初期描画の比較を以下に載せます。 高速化の前と後での比較 最終的にどれぐらいの差が出たかの比較動画です。 左が高速化前で、右が高速化後です。 画質が良い動画: https://youtu.be/I9VTpnpB6OM 体感でも描画までにかかる速度の時間がわかります。 iOS (
VuetifyでCRUDを作る手順【Laravel6とNuxt.jsで作る管理画面】 - Deha magazine
PHPの人気のフレームワークLaravelではWebサイトの管理画面を開発することができます。 このシリーズではそんな管理画面の構築に関して、技術者向けにその手順を紹介しています。 この記事ではVuetifyを利用してCRUDを作る方法をご紹介！ Nuxt.jsからLaravelのAPIをAjaxで通信できるようにする手順はこちらの記事で解説。CookieによるAPI経由のユーザー認証機能を作る方法はこちらの記事で解説しています。 ・Laravelを使って構築をしたい方 ・Webサイト構築の具体的な手法が知りたい方 これらに当てはまる方におすすめの記事となっています。このシリーズを読めばLaravel6とNuxt.jsで管理画面を作成することができますよ。 Vuetifyを使う理由VuetifyはマテリアルデザインベースのVueのUIコンポーネントライブラリです。 Vueを使って画面を作り
【vue.js】Vuefityをマスターする(1) | アールエフェクト
VuetifyはVue.jsのUI(ユーザインタフェース)のライブありでVuetifyを利用することでデザインの知識がなくても効率的に美しいGUI画面を作成することができます。しかし使いこなすためにはプログラミングの知識が必要となるためVuetifyの基本的な使用方法を理解しておく必要があります。 本文書ではVuetifyがマスターできるように実践的なダッシュボードの作成を通して使用方法を確認していきます。 説明は2回に分けて行い、1回目である本文書ではダッシュボードのレイアウトの作成方法とルーティングの設定方法を確認します。本文書を読み終えるとVuetifyを利用して自分の力で下記のダッシュボード画面を作成することができます。 ダッシュボード画面 2回目ではダッシュボードに表示させるグラフコンポーネントを使って、Grid System(グリッドシステム)やResponsive Desig
laravel-mix + vuetify-loader で Laravel に Vue + Vuetify の環境を作る
2020-03-27 laravel-mix + vuetify-loader で Laravel に Vue + Vuetify の環境を作る vuetify-loader とは webpack で vuetify のコンポーネントセットをロードするためのモジュールです。 環境 Laravel 7系を想定していますが、6系でも laravel-mix のバージョンが新しいものであれば問題なく動くと思います。 Vue は既に入っている前提です。（Laravel なら npm install 叩くだけです） 1. 必要なモジュールを入れる bash npm install -D vuetify vuetify-loader sass sass-loader fibers deepmerge # material design icons を利用する場合 npm install -D @mdi
作成済みのVueプロジェクトでVuetifyを使えるようにする
Vuetify.js is a reusable semantic component framework for Vue.js. It aims to provide clean, semantic and reusable components. 手順 npmでvuetifyをインストールします。 npm install vuetify --save main.jsにimportとプラグインの設定を追加します。 import Vuetify from 'vuetify' import "vuetify/dist/vuetify.min.css"; Vue.use(Vuetify) vuetifyを適用したい範囲を <v-app> タグで囲みます。 アプリ全体に対して適用したい場合は、App.vueを下記のように書き換えます。 <template> <v-app> <div id="ap
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue+TypeScriptのプロジェクトにVuetifyを導入 - rinoguchiのメモブログ
VueJS/Vuetify - draggable responsive grid of cards - doesn't work