Nuxt 3 で Vuetify 3 を使う
この記事の内容は古い情報が含まれています 現在は公式の Nuxt モジュール vuetify-nuxt-module が提供されています。 環境構築は、記事内の方法ではなく Nuxt モジュールを利用することをおすすめします。 なお、この記事は2023年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 を始める際は、つぎのコ
祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力
11月16日、Nuxt 3 の初のstable版となる 3.0 がついに正式リリースされました！ Public Beta版が公開されてから約1年、RC版で様々な改善と機能追加が行われてきましたが、待望の安定版の登場です。 個人的にこの1年いろいろな機能を試してみた感覚として、Nuxt 3 はあらゆるフロントエンド開発者にオススメできる、非常に使いやすくて優れたフレームワークだと思っています。 Nuxt 3 は非常に多機能かつ巨大なフレームワークであり、「何が優れているのか」を一言で説明するのはなかなか難しいのですが、大きく5つのテーマに分けてその魅力を整理してみました。 まず冒頭に、テーマごとの「最低限これだけ知ってもらいたい！」という要約を載せてから、細かいポイントを解説していきます。 まずは忙しい人向けの要約だけでも読んでもらって、興味が出てきた方は続きを読んで頂ければ嬉しいです！ N
Nuxt3でvue3-notificationをつかって通知する - くらげになりたい。
BuefyからTailwind CSSに移行してるけど、 通知を自前で作る必要があるので、いろいろ試してみたときの備忘録。 通知関連のVueコンポーネントはいくつかあるけど、 Vue3対応でメンテナンスされているvue3-notificationを利用 使い方 まずはインストール $ npm install --save @kyvg/vue3-notification プラグインの作成 vueプラグインを使うので、~/pluginsディレクトリに、 ファイル(vue-notification.client.ts)を追加する。 client側のみで利用するので、.clientサフィックスで作成 // ~/plugins/vue-notification.client.ts import Notifications, { notify } from "@kyvg/vue3-notificati
Nuxt.js ログイン後のツールバーを作成しよう(inject解説) - 独学プログラマ
このチャプターで達成すること チャプター「ログイン後のレイアウト構築」では、ログイン後の各ページを作成します。 それと同時に、 inject機能を使った共通メソッドの作成 ページファイルの子コンポーネント化 など、Nuxt.jsの実務的な知識と実装方法を学びます。 ログイン後のレイアウトファイル設計 ログイン後に使用するレイアウトファイルは3つあります。 レイアウトファイル 使用するページ レイアウトファイル自体は何個作成しても問題ないですが、大切な事は「プロジェクトページ」とその他のページを分離することです。 上記のように分離することで、構築から運用までが楽に行えます。 今後のNuxtアプリ構築の参考にしてください。 本チャプターで構築するページ なお、本チャプターで構築するページは、 プロジェクト一覧ページ ログアウトページ プロジェクトページ の3つです。 アカウントページは作成しま
バンドルファイルの分析(Vue.js, Nuxt.js) - わくわくBank
Webpack Bundle Analyzerを利用すると、バンドルサイズを可視化できます。可視化することで「容量の大きいモジュールの把握」「複数ページで共通モジュールを保持してないかの確認」といった分析がしやすくなります。 バンドルファイルの確認方法 Webpack Bundle Analyzer Webpack Bundle Analyzer を利用してバンドルファイルを分析できます。 Vue CLI で生成したプロジェクトや Nuxt.js であれば、すぐに利用できる状態になっています。 Vue CLIの場合 Vue CLI で生成したプロジェクトであれば、 yarn run build --report を実行すると、Webpack Bundle Analyzer によるレポートファイルも一緒に生成されます。 $ yarn run build --report yarn run v
Nuxtのslugを静的ページ生成すると中身が同じになる現象を1行で解決 - ブログじゃないもん
とりあえず解決法超絶ハマってたのが突然あっさり解決してしまった、というお話。 結論から言うとnuxt.config.jsのgenerateでconcurrencyオプションを1に指定すると中身がきちんと分かれます。 concurrency: 1こんな感じで入れてください。 export default { generate: { concurrency: 1 } }これにたどり着くのに3週間かかりました。。 改めて、どんな問題が起こっていたか問題が起こっていたのがまさにこのサイト「ブログじゃないもん」なんですが、作りはざっくりと以下の流れにしています。 ローカルでMarkdownで記事を書くprocessmdでjsonに変換それを ~/pages/post/_slug.vue で読み込む静的ページ生成（generate）したものを本番サーバーにアップロードして公開nuxt上のファイル構成は
Nuxt.js のビルド時間を高速化 | mintsu's blog
Nuxt.js のビルド時間を高速化 Nuxt.jsで開発していると、ローカル開発環境で確認の為に、ビルドを走らせるかと思います。 しかし、Nuxt.js のビルドは割と時間かかりますよね。 HardSourceWebpackPluginを利用することで Nuxt.js のビルド時間を大幅に削減することができます。 今回は HardSourceWebpackPlugin の導入方法について紹介します。 目次 Nuxt.js のビルド時間を高速化 目次 HardSourceWebpackPlugin を有効にする nuxt.config.jsの設定 キャッシュのクリア パフォーマンス まとめ HardSourceWebpackPlugin を有効にする Nuxt.js 2.4以降からNuxt.jsに組み込まれているので、バージョン2.4以降を使っているのであれば、nuxt.config.js
Nuxt.jsのビルドを高速化してみる - ContractS開発者ブログ
こんにちは。Holmesでエンジニアをしている三澤です。 背景 弊社ではフロントエンドフレームワークとしてNuxt.jsを利用しています。プロジェクトが進みコードが増えてくるとビルドに時間がかかってくるのが悩みの種です。 ビルド時に最も時間がかかっているのは下記の画像の部分ですが、恐らくwebpackのビルドに最も時間がかかっているのではないかと仮定しました。 この仮定に基づいて何かいい方法はないかと探しているとNuxt.js本家のGithub上で興味深いissueを見つけました。 github.com ここでNuxtの中の人がこのようなことを言っていました。 今回は上記のコメントで取り上げられている方法を試してNuxt.jsのビルド高速化(=webpackのビルド高速化)に取り組んでみたいと思います。 背景 概要 実行結果 何もしていない場合 parallelプロパティ cacheプロパ
Vuetify2を使ったプロジェクトのビルドが遅いので高速化する - Qiita
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が済んでいるプリコンパイル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt Firebase