Nuxt3 で Vuetify3 + SASS/SCSS を使う (vuetify-nuxt-module 使用) - Qiita
主旨 Nuxt3 で Vuetify3 を使う方法です。 外部モジュールなしで使う方法を下記に書いていましたが、下記の方法では現状 (Nuxt 3.8.2 + Vuetify 3.4.6) SASS/SCSS 周りがどうしてもうまくいかないようです。 Nuxt3 で Vuetify3 を使う vuetify-nuxt-module を使うとプロジェクト作成も簡単で、SASS/SCSS も（一応）動くことを確認しました。以下に方法をメモしておきます。 Vuetify Nuxt Module 前提 $ node -v v20.10.0 $ yarn -v 1.22.21 $ npm -v 10.2.5 $ npx nuxt -v ⚡️ Nuxt Generation CLI Experience (nuxi v3.10.0)
Nuxt3 で Vuetify3 を使う - Qiita
外部モジュールを使うと簡単にできます。 Nuxt3 で Vuetify3 + SASS/SCSS を使う (vuetify-nuxt-module 使用) 上記方法は SASS/SCSS も動くことを確認しました。 Nuxt3でVuetifyを使えるようにする簡単手順 この方法は SASS/SCSS の設定がうまくできませんでした（2023/12 現在, Nuxt 3.8.2 / Vuetify 3.4.6）。うまくいく方法があったら教えてください。 そんなわけで、下記の記事はあまり意味がなくなった気はしますが、参考のために残しておきます。 以下の記事は、外部のモジュールに頼らずに Nuxt3 に Vuetify3 を導入する方法について記述しています。SASS/SCSS についても記述しています。 主旨 理解は後でいいから、とりあえずコピペで動けばOKという場合は、ページ末尾の「全部盛り
Vue.js
Provide / Inject このページは、すでにコンポーネントの基礎を読んでいることを前提にしています。初めてコンポーネントに触れる方は、まずそちらをお読みください。 props のバケツリレー（Prop Drilling） 通常、親コンポーネントから子コンポーネントにデータを渡す必要がある場合、propsを使用します。ですが、大きなコンポーネントツリーがあり、深くネストされたコンポーネントが遠い祖先のコンポーネントから何かしらを必要とするケースを想像してみてください。props だけを使う場合、親コンポーネントのチェーン全体に同じ props を渡さなければなりません: <Footer> コンポーネントはこれらの props を全く気にしないかもしれませんが、<DeepChild> がそれらにアクセスできるように宣言して渡す必要があることに注意してください。さらに長い親チェーン
Storybook 7 を Vue 3 + TypeScript ではじめよう！
想定読者や使い方などについては「はじめに」の章をご覧ください。
Vue Router - Navigation Guards
Navigation Guards 名前が示すように、Vue ルーターによって提供されるナビゲーション ガードは、主にナビゲーションをリダイレクトまたはキャンセルすることによってナビゲーションを保護するために使用されます。ルート ナビゲーション プロセスに接続するには、グローバル、ルートごと、コンポーネント内など、さまざまな方法があります。 グローバルビフォーガード router.beforeEach を使用してガードの前にグローバルを登録できます。 const router = createRouter({ ... }) router.beforeEach((to, from) => { // ... // 明示的に false を返してナビゲーションをキャンセルします return false }) ナビゲーションがトリガーされるたびに、グローバル ビフォア ガードが作成順に呼び出され
【表示速度改善】Vuetifyで利用する分だけmaterialdesigniconsをインポート
nuxtのvuetifyでデフォルトでheadに以下が記載されていて、ページ表示速度が下がる。 <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet"> 利用する分だけインストールする方法 まず、デフォルトで出力されるmaterialdesigniconsを削除 vuetify: { defaultAssets: { icons: false, font: false }, } @mdi/jsをインストール npm install @mdi/js -D 利用方法 <template> <v-icon>{{ mdiHome }}</v-icon> </template> <script> import { mdiHome } from '@
コンポーネントディレクトリ
コンポーネントディレクトリ components ディレクトリには、Vue.js コンポーネントが含まれています。コンポーネントは、ページのさまざまな部分を構成するものであり、再利用して、ページ、レイアウト、さらには他のコンポーネントにインポートすることができます。 データの取得 コンポーネントの API から非同期データにアクセスするには、fetch() を使用できます。 $fetchState.pending をチェックすることで、データがロードされるのを待っている時にメッセージを表示することができます。$fetchState.error を確認し、データの取得中にエラーが発生した場合はエラーメッセージを表示することもできます。fetch() を使用する場合、data() で適切なプロパティを宣言する必要があります。フェッチから取得したデータは、これらのプロパティに割り当てることができ
How to Reduce Your Vue.JS Bundle Size With Webpack
I work on the Industry 4.0 team at Stanley Black & Decker. Our team recently created the equivalent of an App Store for Stanley’s manufacturing plants worldwide. Factories can visit the marketplace and select what applications they need based on the products they are producing at that location. This will create a custom build that bundles all of these applications together for the plant to run. Du
Vue.js/Nuxt.jsで使える！便利なUIパッケージ紹介 - Qiita
Vue.js/Nuxt.jsで開発しているときに便利でアイディアの広がるUIコンポーネントを紹介したいと思います。 良さそうなのを見つけたら随時更新していこうと思います！ vue-carousel 簡単にカルーセルを実装できるUIコンポーネント。レスポンシブ対応もされています！ vue-swipe スワイプ動作の実装を簡単にできるUIコンポーネント vue-snotify 幅広くカスタマイズできる通知のUIコンポーネント vue-twitter-counter Twitter風のカウンターを実装できるUIコンポーネント vue-poll Twitter風の投票UIを作れるコンポーネント vue-stepper シンプルなフォームのステッパーを作成できるUIコンポーネント vue-circle-menu ボタンをタップするとボタンが出るUIコンポーネント vue-star スターアニメーショ
Nuxt.jsのプロジェクトでGoogleアナリティクスを導入する方法まとめ | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
Vue.jsのアプリケーションでGoogleアナリティクスを導入するまでの流れについては、過去記事
Vuetify のパンくずコンポーネントを Nuxt.js に対応させるには？｜ProgLearn｜エンジニアのためのプログラミング情報メディア
こんな感じの綺麗なパンくずリストが作成できちゃいます！ とても便利なのですが、一つ問題点が。 デフォルトの設定のままではリンクが a タグのままであり、Nuxt.jsを使っている時の nuxt-link が適用されません。 なので、Nuxt.jsを使っている恩恵に預かれません。 その時は、 Slotを用いてちょこっと設定をしてあげる必要があります。 今回はその書き方をご紹介します！ サンプルデータ <template> <v-breadcrumbs :items="itemsData"> <template v-slot:item="props"> <v-breadcrumbs-item exact :disabled="props.item.disabled" :to="props.item.href" nuxt > {{ props.item.text }} </v-breadcrum
Vue.jsでhandsontableを使う - Qiita
テーブルの作成 なにはともあれテーブルを作成して表示させてみましょう。 ざっくりとコードを示します。 vue-handsontable-officialをコンポーネントとして追加 テーブルの設定値はhotSettings.dataとして記述 <style> body { padding: 15px; font-family: Helvetica, Arial, sans-serif; font-size: 0.8em; } #test-hot-app { width: 500px; height: 500px; overflow: hidden; } </style> <div id="app"> <hot-table :root="root" :settings="hotSettings"></hot-table> </div> <script> import Vue from 'vue
Vueの秘密のパフォーマンステク9選紹介 - Qiita
VueConf USでのさまざまな発表 今年の3月に VueConf US が開催されました。最近になってビデオが公開されて初めて知ったこともあるので本記事ではその紹介をします。 いろいろ面白いトピックがあるのですが、特にVueコアチームのGuillaume Chauさんによるパフォーマンス改善テクニックはまじかーという感じだったのでここにまとめたいと思います。 "9 Performance Secrets Revealed with Guillaume Chau" プレゼン動画: http://www.youtube.com/watch?v=5B66qer8cZo スライド: https://slides.com/akryum/vueconfus-2019#/ デモサイト: https://vue-9-perf-secrets.netlify.com ソース: https://githu
vue.jsでInfinite Scrollを実装する - GeekFactory
ページを下端までスクロールしたら次のページが読み込まれるInfinite Scroll（無限スクロール）をvue.jsで実装する方法を調べてみました． 一般的なInfinite Scrollの実装方法 スクロール可能な要素の scroll イベントを捕捉して，表示領域の位置を計算します．もし，要素の高さに達している場合は，下端までスクロールされたことになります． <div class="items"></div> .items { position: fixed; top: 0; bottom: 0; overflow-y: auto; } $('.items').on('scroll', function (e) { // jQueryを使う場合 var target = $(e.target); if ((target.scrollTop() + target.outerHeight(
Vue.jsでコンポーネントの親子間でデータのやり取りを行う方法 - Qiita
最近Vue.jsを使ったプロジェクトに手を出しています。 そこでコンポーネント間で値をやり取りする方法を調べていましたが、 こうするべきでしょ、というのを私なりに探っていった結果をまとめました。 こちらのコードの例で使用しているVueのバージョンは2.5.21です。 親から子に単方向でやり取りする方法 親コンポーネントから子コンポーネントに一方的にデータの値を渡して、 子からはそれを変更しても、親に変更は伝搬させない場合のやり方です。 シンプルにpropsに渡す propsで親のもつ値を渡します。Vueを使うなら普通のやり方ですね。 See the Pen vue component test parent -&rt; child by stoba (@rhistoba) on CodePen. 子から親に単方向でやり取りする方法 子コンポーネントのもつデータの変更を、親コンポーネントに一
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Scrolling a page in vue-router only after loading the components
[Vue.js] ルーティング による画面遷移 - Qiita![[Vue.js] ルーティング による画面遷移 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/fbd5ad85679ceb3fc5431b1686d38a2677dac60f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCVnVlLmpzJTVEJTIwJUUzJTgzJUFCJUUzJTgzJUJDJUUzJTgzJTg2JUUzJTgyJUEzJUUzJTgzJUIzJUUzJTgyJUIwJTIwJUUzJTgxJUFCJUUzJTgyJTg4JUUzJTgyJThCJUU3JTk0JUJCJUU5JTlEJUEyJUU5JTgxJUI3JUU3JUE3JUJCJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mYzNlMmM1YTZlOTAwOTk4NDkwNjU4MjdjMDlmOWU5MQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwa3NoLWZ0aHImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zMiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWJkZWVhMzRiZWRmNTUzZjYzNTU1N2U0YzJjMzFhMjU0%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dd08cf0836803bc6ae611385211189239)
Vue.js+VuexでContainer Componentパターン | log.pocka.io
GitHub - stackjie/vue-pull-to: ⚡️ A pull-down refresh and pull-up load more and infinite scroll component for Vue.js --Vue下拉刷新组件
https://vuetifyjs.com/ja/
