Nuxt 3 㧠Vuetify 3 を使ã†
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
{{#tags}}- {{label}}
{{/tags}}