Nuxt Auto-imports機能の深淵を求めて@Reboot v-kansai Meetup #15

2024.02.29
Reboot v-kansai Meetup #15 登壇資料

- article version: https://zenn.dev/comm_vue_nuxt/articles/seeking-the-depths-of-nuxt-auto-imports-feature
- event report: [Report] v-kansai #15 に参加してきました

---
- 資料の中で登場したコミュニティ: Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt.

Publicationのアサイン希望や執筆依頼などはGitHubの方からお願い致します: https://github.com/shinGangan/comm_vue_nuxt/issues

Transcript

1. Nuxt Auto-imports機能の深淵を求めて 2024 author: GANGAN
2. About me 2024 author: GANGAN
3. About me 岩丸慎平 (@gangan_nikki) AI Webアプリケーションの開発・運用やってました (Vue.js, Java, AWS, k8s, etc.) Nuxt, UnJS beginner contributor (Core in the future) Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt. Publication Owner 2024 author: GANGAN
4. 2024 author: GANGAN
5. About me 岩丸慎平 (@gangan_nikki) AI Webアプリケーションの開発・運用やってました (Vue.js, AWS, k8s, etc.) Nuxt, UnJS beginner contributor (Core in the future) Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt. Publication Owner 2024 author: GANGAN
6. ひょんなことからオーナーになりました 2024 author: GANGAN
7. 2024 author: GANGAN
8. Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt. Vue.js / Nuxtユーザーが気軽に 情報を得られる場所を目指して作成しました 初学者がVue2系、Vue3系で迷わないよう に、初学者がとりあえず最初に調べてみる場 所を目指して広場という名前にしています 執筆してくれる方は随時募集中です https://github.com/shinGangan/comm_vue_nuxt 2024 author: GANGAN
9. 本日のタイトル 2024 author: GANGAN
10. Nuxt Auto-imports機能の深淵を求めて 2024 author: GANGAN
11. Auto-imports機能？ 🤔 2024 author: GANGAN
12. Nuxt auto-imports components, composables and Vue.js APIs to use across your application without explicitly importing them. Auto-imports Nuxt auto-imports components, composables, helper functions and Vue APIs. Docs Guide Key Concepts <script setup lang="ts"> app.vue Table of Contents Nuxt UI Pro v1.0 is out with 50+ Vue components to create beautiful and responsive Nuxt apps in minutes. Learn more 50.6K 2024 author: GANGAN
13. Auto-imports機能とは components, composables, utils などを自動でインポートする機能 1. Built-in Auto-imports Vue, Nuxt composable がimport不要で利用できる eg. ref, computed, useFetch, useHead, etc. 2. Directory-based Auto-imports components/ , composables/ , utils/ ディレクトリ内のファイルを import不要で利用できる ` ` ` ` ` ` 2024 author: GANGAN
14. それぞれ設定オプションが異なります 2024 author: GANGAN
15. composables/, utils/ imports options で設定する ` ` export default defineNuxtConfig({ imports: {}, }); components/ components options で設定する ` ` export default defineNuxtConfig({ components: [], }); 2024 author: GANGAN
16. Nuxtの構造から"あたり"をつけていく 2024 author: GANGAN
17. The "Set Union" Extract the universal parts Expand the scopes Grow the communities unjs nitro unplugin vite-node 2024 author: GANGAN
18. Anthony Fu氏によるVue Fes Japan 2023登壇 セクション Anthony’s Roads to Open Source - The Set Theory 登壇スライドから引用 この図から分かる通り Nuxtの構成要素にはUnJS, Unpluginが含まれている The "Set Union" Extract the universal parts Expand the scopes Grow the communities unjs nitro unplugin vite-node 20 / 24 2024 author: GANGAN
19. UnJS パッケージが使われているのではないか 🤔 2024 author: GANGAN
20. imports options 2024 author: GANGAN
21. imports options unjs/unimportを利用していることが分かる imports optionsの型定義 // nuxt/packages/schema/src/types/imports.ts import type { UnimportOptions } from 'unimport' export interface ImportsOptions extends UnimportOptions { autoImport?: boolean dirs?: string[] global?: boolean transform?: { exclude?: RegExp[] include?: RegExp[] } } imports optionsの実装 // packages/nuxt/src/imports/module.ts // ... other imports import type { Import, Unimport } from 'unimport' import { createUnimport, scanDirExports } from 'unimport' import type { ImportPresetWithDeprecation, ImportsOptions export default defineNuxtModule<Partial<ImportsOptions>>({ async setup (options, nuxt) { // composables/ dirs from all layers let composablesDirs: string[] = [] for (const layer of nuxt.options._layers) { composablesDirs.push(resolve(layer.config.srcDir, 'c composablesDirs.push(resolve(layer.config.srcDir, 'u for (const dir of (layer.config.imports?.dirs ?? []) if (!dir) { continue } composablesDirs.push(resolve(layer.config.srcDir, } } // ... } }) 2024 author: GANGAN
22. components options 2024 author: GANGAN
23. components options components options の型定義 // nuxt/packages/schema/src/types/components.ts export interface Component { /** * */ } export interface ScanDir { path: string pattern?: string | string[] ignore?: string[] prefix?: string pathPrefix?: boolean enabled?: boolean prefetch?: boolean preload?: boolean isAsync?: boolean extendComponent?: (component: Component) => Promise<Comp global?: boolean island?: boolean } export interface ComponentsDir extends ScanDir { watch?: boolean extensions?: string[] transpile?: 'auto' | boolean priority?: number } export interface ComponentsOptions { dirs: (string | ComponentsDir)[] global?: boolean loader?: boolean transform?: { exclude?: RegExp[] include?: RegExp[] } } 2024 author: GANGAN
24. unjs/unimportではない…？ 🤔 2024 author: GANGAN
25. unjs/unimportではない…？ 🤔 components modules の実装 を確認したがunimportは使われていなかった。 → Nuxt2系で開発されていた@nuxt/components をベースに開発されているため 2024 author: GANGAN
26. Usage Auto-imports 2024 author: GANGAN
27. ※ 時間の都合もあるため点数を絞ってご紹介 2024 author: GANGAN
28. case1: Auto-imports されるコンポーネントを限 定したい 2024 author: GANGAN
29. Q1 以下のようなディレクトリ構造 | components/ --| ui/ ----| Button/ ------| index.vue ------| index.story.vue ------| type.ts ----| Card.vue ----| Table.vue Ans1 export default defineNuxtConfig({ components: [ { path: 'components/ui', extensions: [".vue"], ignore: ["**/*.story.vue"], // eg: /ui/Form/index.vue -> <UiForm /> pathPrefix: false, }, ], }); 2024 author: GANGAN
30. case2: schemas/やtypes/をAuto-Import したい 2024 author: GANGAN
31. Q2: 以下のようなディレクトリ構造 | components/ --| Button.vue | types/ --| User.ts --| Books.ts | schemas/ --| name.ts Ans2 export default defineNuxtConfig({ imports: [ dirs: [ "types/**", "schemas/**", // related Panda CSS "{components,layouts}/**/recipe.ts", ], // import * from zod もAuto-imports 化すると合わせて便利に presets: [ { from: "zod", imports: ["z", "string", "number", "object", "date }, ], ], }); 2024 author: GANGAN
32. case3: stores/をAuto-Import したい 2024 author: GANGAN
33. Q3 以下のようなディレクトリ構造 | components/ --| Button.vue | types/ --| User.ts --| Books.ts | schemas/ --| name.ts | stores/ --| user.ts --| admin.ts Ans3 モジュール提供公式がAuto-importsオプションを 用意しているケースもある export default defineNuxtConfig({ modules: ["@pinia/nuxt"], pinia: { storesDirs: ["stores/**"], }, }); 2024 author: GANGAN
34. case4: consola, h3などを Auto-importsして使いたい 2024 author: GANGAN
35. case4: consola, h3などをAuto-importsして使い たい Anthony Fu 氏にコメント頂いた https://github.com/unjs/unimport/issues/313 export default defineNuxtConfig({ imports: { presets: [ { from: "consola", imports: ["consola"], }, ], }, }); 2024 author: GANGAN
36. 今回紹介しきれなかったものは プロダクト開発で使えるNuxt Auto-imports設定 にて記載しています。 2024 author: GANGAN
37. おしまい 2024 author: GANGAN