Nuxt Auto-imports機能の深淵を求めて 2024 author: GANGAN

About me 2024 author: GANGAN

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

2024 author: GANGAN

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

ひょんなことからオーナーになりました 2024 author: GANGAN

2024 author: GANGAN

Vue・Nuxt 情報が集まる広場 / Plaza for Vue・Nuxt. Vue.js / Nuxtユーザーが気軽に 情報を得られる場所を目指して作成しました 初学者がVue2系、Vue3系で迷わないよう に、初学者がとりあえず最初に調べてみる場 所を目指して広場という名前にしています 執筆してくれる方は随時募集中です https://github.com/shinGangan/comm_vue_nuxt 2024 author: GANGAN

本日のタイトル 2024 author: GANGAN

Nuxt Auto-imports機能の深淵を求めて 2024 author: GANGAN

Auto-imports機能？ 🤔 2024 author: GANGAN

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 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

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

それぞれ設定オプションが異なります 2024 author: GANGAN

composables/, utils/ imports options で設定する ` ` export default defineNuxtConfig({ imports: {}, }); components/ components options で設定する ` ` export default defineNuxtConfig({ components: [], }); 2024 author: GANGAN

Nuxtの構造から"あたり"をつけていく 2024 author: GANGAN

The "Set Union" Extract the universal parts Expand the scopes Grow the communities unjs nitro unplugin vite-node 2024 author: GANGAN

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

UnJS パッケージが使われているのではないか 🤔 2024 author: GANGAN

imports options 2024 author: GANGAN

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>({ 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

components options 2024 author: GANGAN

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

unjs/unimportではない…？ 🤔 2024 author: GANGAN

unjs/unimportではない…？ 🤔 components modules の実装 を確認したがunimportは使われていなかった。 → Nuxt2系で開発されていた@nuxt/components をベースに開発されているため 2024 author: GANGAN

Usage Auto-imports 2024 author: GANGAN

※ 時間の都合もあるため点数を絞ってご紹介 2024 author: GANGAN

case1: Auto-imports されるコンポーネントを限 定したい 2024 author: GANGAN

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 -> pathPrefix: false, }, ], }); 2024 author: GANGAN

case2: schemas/やtypes/をAuto-Import したい 2024 author: GANGAN

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

case3: stores/をAuto-Import したい 2024 author: GANGAN

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

case4: consola, h3などを Auto-importsして使いたい 2024 author: GANGAN

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

今回紹介しきれなかったものは プロダクト開発で使えるNuxt Auto-imports設定 にて記載しています。 2024 author: GANGAN

おしまい 2024 author: GANGAN