[B! Nuxt] hkjのブックマーク

Nuxt 3 で Vuetify 3 を使う

Nuxt 3 で Vuetify 3 を使った開発の始め方をまとめました。この記事の初稿時点でのバージョンは下記のとおりです。Nuxt 3.2.0 公式サイト: https://nuxt.com/ リポジトリ: https://github.com/nuxt/nuxtVuetify 3.1.4 公式サイト: https://vuetifyjs.com/ リポジトリ: https://github.com/vuetifyjs/vuetify Nuxt 3 をインストールするNuxt 3 を始める際は、つぎのコマンドを利用します。

hkj 2023/02/13

Nuxt
Vuetify

リンク

祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力

11月16日、Nuxt 3 の初のstable版となる 3.0 がついに正式リリースされました！Public Beta版が公開されてから約1年、RC版で様々な改善と機能追加が行われてきましたが、待望の安定版の登場です。個人的にこの1年いろいろな機能を試してみた感覚として、Nuxt 3 はあらゆるフロントエンド開発者にオススメできる、非常に使いやすくて優れたフレームワークだと思っています。Nuxt 3 は非常に多機能かつ巨大なフレームワークであり、﹁何が優れているのか﹂を一言で説明するのはなかなか難しいのですが、大きく5つのテーマに分けてその魅力を整理してみました。まず冒頭に、テーマごとの﹁最低限これだけ知ってもらいたい！﹂という要約を載せてから、細かいポイントを解説していきます。まずは忙しい人向けの要約だけでも読んでもらって、興味が出てきた方は続きを読んで頂ければ嬉しいです！N

hkj 2022/11/22

Nuxt
Vue

リンク

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

hkj 2022/10/14

Nuxt

リンク

Nuxt.js ログイン後のツールバーを作成しよう(inject解説) - 独学プログラマ

このチャプターで達成することチャプター﹁ログイン後のレイアウト構築﹂では、ログイン後の各ページを作成します。それと同時に、 inject機能を使った共通メソッドの作成ページファイルの子コンポーネント化など、Nuxt.jsの実務的な知識と実装方法を学びます。ログイン後のレイアウトファイル設計ログイン後に使用するレイアウトファイルは3つあります。レイアウトファイル使用するページレイアウトファイル自体は何個作成しても問題ないですが、大切な事は﹁プロジェクトページ﹂とその他のページを分離することです。上記のように分離することで、構築から運用までが楽に行えます。今後のNuxtアプリ構築の参考にしてください。本チャプターで構築するページなお、本チャプターで構築するページは、プロジェクト一覧ページログアウトページプロジェクトページの3つです。アカウントページは作成しま

hkj 2021/12/01

Nuxt

リンク

バンドルファイルの分析(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

hkj 2021/11/23

webpackなどでのサイズ削減

Nuxt
Vuetify

リンク

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上のファイル構成は

hkj 2021/11/14

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

hkj 2021/11/12

Nuxt

リンク

Nuxt.jsのビルドを高速化してみる - ContractS開発者ブログ

こんにちは。Holmesでエンジニアをしている三澤です。背景弊社ではフロントエンドフレームワークとしてNuxt.jsを利用しています。プロジェクトが進みコードが増えてくるとビルドに時間がかかってくるのが悩みの種です。ビルド時に最も時間がかかっているのは下記の画像の部分ですが、恐らくwebpackのビルドに最も時間がかかっているのではないかと仮定しました。この仮定に基づいて何かいい方法はないかと探しているとNuxt.js本家のGithub上で興味深いissueを見つけました。 github.com ここでNuxtの中の人がこのようなことを言っていました。今回は上記のコメントで取り上げられている方法を試してNuxt.jsのビルド高速化(=webpackのビルド高速化)に取り組んでみたいと思います。背景概要実行結果何もしていない場合 parallelプロパティ cacheプロパ

hkj 2021/11/11

Nuxt
webpack

リンク

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が済んでいるプリコンパイル